web vue开发遇到的问题

目录

vue开发的小知识点

作为刚入行web开发的我来说，终于可以系统的完成一块功能逻辑了，有挑战也有进步，下面把最近开发遇到的常见问题总结一下。

css

多行文本和单行文本溢出问题

这个是比较常见的问题，基本上每次开发都会遇到，代码是固定格式

//单行文本溢出部分隐藏显示省略号...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

/**
　　n 行文本溢出部分隐藏显示省略号..
　　使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
   （WebKit： 是一个开源的浏览器引擎） http://blog.csdn.net/cutesource/article/details/8731841/
　-webkit-line-clamp:限制在一个块元素显示的文本的行数
（box-orient：指定一个box子元素是否应按水平或垂直排列）http://www.runoob.com/cssref/css3-pr-box-orient.html
**/
width:100%
height:20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

超出内容出现滚动条

//竖直方向滚动
overflow: auto;
overflow-x: hidden;//隐藏横轴滚动条
//水平方向滚动
overflow: hidden;
overflow-x: scroll;

css样式style的参数

刚开始不太理解

	

		
	

.father{
	width:100%
    height:20px;
	.son{
		width:200
		height:20px;
	}
}

scoped表示该样式只能作用在当前页面，不会影响到其他页面，包括子页面

上拉加载更多

下来加载更多自己实现的话就通过touch事件，其中用到了标签，插槽，相当于Android中的标签。
这个主要参考的是vue2.0 移动端，下拉刷新，上拉加载更多插件，修改版 不过还不太好用，修改了一点东西，下拉刷新还没有实现，晚点再更新一下。

详情页返回列表页保留上次进入的位置

这个问题很常见，目前还没有实现，后期不充。。。。

水平滑动的实现（white-space: nowrap;）

我们有一排广告栏要求可以水平滑动，样式一样，所以我就使用了ul/li标签然后ul左浮动，但是样式有问题，超出的li会往下掉，后来就用的display：inline-block。这里重点说一下white-space: nowrap;这个可以实现内部的元素在一行上排列，但是会影响子元素，如果子元素是一个p标签有多行，需要单独改一下white-space: normal;这样问题就解决了，具体看代码。

//html
 

                
产品
                

                    

                    

                
                

                
                    

                        
                        

                            
***
                            
***
                            

                                *******************
                            
查看更多
                        
                    
                
            
//css
.page2-bg {
        background-image: url(../../images/page2_bg.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .page2-bg h3 {
        width: 100%;
        height: 59px;
        font-size: 60px;
        font-weight: normal;
        font-family: MicrosoftYaHei;
        color: rgba(18, 22, 27, 1);
    }

    .page2-bg .line {
        position: relative;
        margin-top: 31px;
        width: 100%;
        height: 18px;
        text-align: center;
        line-height: 18px;
    }

    .page2-bg .line .yellow {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -1px;
        margin-left: -35px;
        width: 70px;
        height: 2px;
        background: rgba(255, 217, 0, 1);
    }

    .page2-bg .line .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -9px;
        margin-left: -9px;
        width: 18px;
        height: 18px;
        background: RGBA(255, 255, 255, 1);
        border-radius: 50%;
        border: 4px solid RGBA(234, 85, 4, 1);
    }

    .page2-bg .products {
        margin-top: 100px;
        height: 346px;
        width: 100%;
        overflow: auto;
        overflow-x: scroll;
        white-space: nowrap;
    }

    .page2-bg .products::-webkit-scrollbar {
        display: none;//隐藏滚动条
    }

    .page2-bg .products .product {
        display: inline-block;
        margin: 0px;
    }

    .page2-bg .products .product .image {
        float: left;
        width: 371px;
        height: 346px;
    }

    .page2-bg .products .product .introduction {
        float: left;
        width: 514px;
        height: 346px;
        background: #F0F2F5;
        padding: 0 85px 0 59px;
        font-family: MicrosoftYaHei;
    }

    .page2-bg .products .product .introduction .littleT {
        height: 12px;
        font-size: 14px;
        color: rgba(112, 122, 135, 1);
        line-height: 18px;
        padding-top: 3px;
    }

    .page2-bg .products .product .introduction .largeT {
        margin-top: 36px;
        height: 40px;
        font-size: 40px;
        color: rgba(18, 22, 27, 1);
        line-height: 47px;
    }

    .page2-bg .products .product .introduction .info {
        width: 370px;
        height: 134px;
        margin-top: 38px;
        font-size: 14px;
        color: rgba(102, 102, 102, 1);
        line-height: 28px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        white-space: normal;
    }

    .page2-bg .products .product .introduction .more {
        margin-top: 30px;
        width: 170px;
        height: 55px;
        background: rgba(234, 85, 4, 1);
        border-radius: 4px;
        font-size: 14px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 55px;
    }

不过以上只能水平滑动，不能拖拽，功能并没有实现，后来使用了better-scroll完美的解决问题。在最外层套一个div

import BScroll from 'better-scroll';

mounted(){
let wrapper = document.querySelector('.products-wrap')
            let scroll = new BScroll('.products-wrap',{
                scrollX: true,
                click: true
            })
}

//css
.page2-bg .products-wrap{
        margin:0 auto;
        margin-top: 100px;
        height: 346px;
        width: 90%;
        overflow: hidden;
        overflow-x: scroll;

    }
    .page2-bg .products {
        height: 346px;
        width: 6195px;//所有标签的总和，这样写如果li不是写死的就有问题了
        white-space: nowrap;
    }

渐变色（粗细不一）

渐变色主要一条线或者背景图，一般就是一个均匀变化，如下

实现方式就是

 background: linear-gradient(to right, #FF4800, #FF9900);

下面是粗细不一的

这个刚开始都不知奥咋实现，因为粗细不一致，一条白线逐渐变粗；后来就下了一个巧妙的方法就是使用渐变来实现，给人一个视觉效果。

 background: linear-gradient(to right, #FF9900, #ffffff);

还有下划线的渐变，使用border-image实现,可以看下面三方控件中input的下划线设置。

动画（由左向右）

一般动画是默认有右向左滑，我现在要实现有左向右滑，移动方向加个负号就可以了

.show-enter-active, .show-leave-active {
            transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
.show-enter, .show-leave-to {
    transform: translateX(-375px);//由左向右
    opacity: 0;
}
//html

          //执行动画的也页面

将一个图片作为背景图，并且随着页面滑动而滑动

background-image: url("image/background.png");
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
background-attachment: scroll;

ios手机文字偏下没有居中

页面有个位置显示消息，因为比较小所以文字也就设置的小了点，但是在ios手机上就有问题了，偏下，不居中。在浏览器和安卓手机上是好的，后来发现是字体大小太小了，改成12px就可以了，之前知道浏览器不支持小于12px的盒子，但是ios好像也不支持小于12px的文字显示，导致样式有问题。

JavaScript

登录时长限制，时间到了退出（cookie）

记录用户登录时长，既可以使用local storage实现，然后拿到时间做差，看是否超时；也可以用cookie指定过期时长，这样我们直接判断cookie值是否存在就可以了。我选择的后者，代码如下：

//设置cookie
var exp = new Date();
exp.getMilliseconds()
exp.setTime(exp.getTime() + 60 * 1000);//过期时间 1分钟
console.log(exp.toGMTString())
//this.setCookie('isLogin', true,  exp.toGMTString())
document.cookie = 'isLogin' + '=' + true + ';expires=' + exp.toGMTString();
//此处赋值的是世界时间，和我国的时间差8小时，不过千万不要把这8小时加上，直接赋值指定时长就好

//获取cookie，可以用js-cookie
import Cookies from 'js-cookie';
updated() {
	  if (!Cookies.get('isLogin')) {
	           this.$store.dispatch("setSignOut")//清空用户登录信息
	           this.$router.push({
	               name: 'login'//跳到登录页
	           });
	       }
	   },
	   activated() {
	       if (!Cookies.get('isLogin')) {
	           this.$store.dispatch("setSignOut")
	           this.$router.push({
	               name: 'login'
	           });
	       }
	   },
//因为没有统一的入口，所以我在首页的updated和activated中添加的判断，并没有在每个页面都加，感觉没必要
//还可以用这种方式获取cookie，不需要导包了
function getCookie(cname){
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i

生命周期和钩子函数

生命周期是我们流程的一个中重要工具，了解生命周期我们才能更好的判断流程的执行顺序，方便我们处理页面的展示。
这篇文章写的比较详细可以参考一下Vue2.0 探索之路——生命周期和钩子函数的一些理解

原生调js

消息列表是native的，客户端可以查看，web也可以查看，看完后消息提示需要刷新一下，这个就需要客户端给我们一个触发，我们在index.html中添加一个js方法，给客户端提供一个方法名，然后我们再请求消息接口刷新页面。我们采用广播的形式，在js方法中发送一个广播，然后在对应的vue页面接受广播，再次请求接口，完美实现。

//index.html
	var refreshMessage=function(){
	//发送广播
      var event = new Event("refreshMessage")
      window.dispatchEvent(event)
    }

//刷新的.vue页面
window.addEventListener("refreshMessage", function (e) {
	   that.getNewMsg()//请求消息接口
        })
//android调用js
mWebView.loadUrl("javascript:refreshMessage()");

使用vue-cli创建项目如何解决跨域问题

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 我们本地访问服务端经常出现跨域问题，本地该如何操作呢？
首先，打开config/index.js文件，找到proxyTable，做以下配置

proxyTable: {
      '/api':{
        target:'http://****com',//想要访问的IP地址
        changeOrigin:true,
        pathRewrite:{'^/':'http://****.com'}//和target的地址一样
      }
    },

然后在main.js中封装axios请求

import axios from 'axios'
import Qs from 'qs'

//配置请求信息
var $http = axios.create({
  baseURL: "/api",
  timeout: 30000,
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  transformRequest: [function (data) {
    data = Qs.stringify(data);
    return data;
  }]
})

在组建中直接这样调用可以了

this.$http.post('/dsds.go', {
          action: "",
          token: "",
        }).then(res => {
	        console.log('res', JSON.stringify(res))
        })

服务端的可以在API上配置以下配置，意思是所有的url都可以访问，缺点是安全性不高。
responce.header(“Access-Control-Allow-Origin”,"*");

三方控件（Element ui）

用到element UI的datetimePicker控件，需要改一下他的样式和逻辑，看了API但是用起来还会有问题，我们要求改一些样式，还要处理时间，比如每次进来是上次的时间；如果另外如果开始时间选择非当前的日期，那么时间就是选择日期的00：00；如果结束时间选择的非当前的日期，那么时间就默认是23：59。下面看代码，我是咋实现的吧！

    

        
        
        
    
    至
    

        
        
        
    
 
//css
.screenRight {
            width: 9px;
            height: 6px;
        }
input {
            outline: none;
            border: none;
            border: 0px;
            margin-top: 13px;
            height: 29px;
            width: 100%;
            line-height: 29px;
            font-size: 15px;
            font-family: MicrosoftJhengHeiUIRegular;
            color: rgba(0, 0, 51, 1);
            border-bottom: 1px solid rgba(153, 153, 153, 1);

        }

        input::-webkit-input-placeholder {
            color: rgba(153, 153, 153, 1);

        }

        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: rgba(153, 153, 153, 1);

        }

        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: rgba(153, 153, 153, 1);

        }

        input:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: rgba(153, 153, 153, 1);

        }

        input:hover {//响应的时候下划线改变
            outline: none;
            border: none;
            border: 0px;
            border-bottom: 2px solid;
            border-image: -webkit-linear-gradient(to right, #FF4800, #FF9900) 30 30;//水平渐变
            border-image: -moz-linear-gradient(to right, #FF4800, #FF9900) 30 30;
            border-image: linear-gradient(to right, #FF4800, #FF9900) 30 30;
        }

        input.form-control:focus {
            outline: none;
            border: none;
            border: 0px;
        }
//由于控件内部的样式如果添加scoped就修改不了，所以我单独修改的内部样式


//js
data() {
        return {
            first: true,
            isProduct: false,
            current: 0,//当前选中的产品
            start: '',//控件的开始时间
            end: '',//控件的结束时间
            // oldStart: '',//记录上次筛选的开始时间
            // oldEnd: '',//记录上次筛选的结束时间
            // hackReset: true,
            //进入页面的时候时上次筛选的日期，默认时当前的0点到当前时刻，如果改变日期，开始时间的时刻变成0点0分，终点时刻变成23时59分
            //先判断日期较上一次是否有变化，有变化就置0
            //开始时间小于结束时间
            pickerBeginDateBefore: {
                disabledDate: (time) => {
                    let beginDateVal = this.end;
                    if (beginDateVal) {
                        return time.getTime() > beginDateVal;
                    }
                }
            },
            pickerBeginDateAfter: {
                disabledDate: (time) => {
                    let beginDateVal = this.start;
                    if (beginDateVal) {
                        return time.getTime() < beginDateVal;
                    }
                }
            }
        }
    },
created() {
        this.start = new Date(this.screenInfo.payTimeStart)//将上次的
        this.end = new Date(this.screenInfo.payTimeEnd)
        },
methods: {
        getStart() {//时间变化是给对象赋值
            console.log('this.start:' + this.start)
            this.screenInfo.payTimeStart = new Date(this.start).getTime()
            // this.screenInfo.payTimeStart = new Date(this.start).getTime()
            this.screenInfo.startTime = util.formatTime2(this.start)
            console.log('---------------')
        },
        getEnd() {
            console.log('结束时间' + this.end);

            this.screenInfo.payTimeEnd = new Date(this.end).getTime()
            this.screenInfo.endTime = util.formatTime2(this.end)
            console.log('---------------')
        },
    },
 watch: {//之前想在computed，但是没有实现，value一直在变，所以判不出来，使用watch恰到好处
        "start"(n, o) {
            // this.$nextTick(() => {
            //     this.hackReset = true
            console.log('开始时间' + n);
            console.log('oldStart:' + o)
            var startString = n.toString()
            n = new Date(startString.replace(/-/g, "/"))
            console.log(util.formatDate(n), '---', util.formatDate(o))
            if (util.formatDate(n) !== util.formatDate(o)) {
                console.log('改变日期了' + this.start)
                //日期改变了
                let temp = n
                temp.setHours('00')
                temp.setMinutes('00')
                this.start = temp
            }

            // })

        },
        "end"(n, o) {

            console.log('oldEnd:' + o)
            var endString = n.toString()
            n = new Date(endString.replace(/-/g, "/"))
            console.log(util.formatDate(n), '---', util.formatDate(o))
            if (util.formatDate(n) !== util.formatDate(o)) {
                console.log('改变日期了')
                //日期改变了
                let temp = n
                temp.setHours('23')
                temp.setMinutes('59')
                this.end = temp
            }
            console.log('this.end:' + this.end)
        },
    }