Vue项目常见问题

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

本文已参与 “掘力星计划” ，赢取创作大礼包，挑战创作激励金。

input输入框的限制

dom上的代码：

 <span class="item-wrapper" v-if="showInterval"><el-input placeholder="在此输入时间间隔" class="input" v-model="formData.interval" @input.native="onInput"></el-input></span>

当我们在vue中遇到input输入框只能输入数字的问题，例如需要实现输入框中只能输入[1,59]区间的整数，我们可以采用以下方法做限制，这样当我们输入其他不符合的值会直接限制我们无法输入进去：

onInput(e) {
  // 验证是否是纯数字
  let isNumber = /^\d*$/.test(e.target.value);
  // 过滤非数字
  e.target.value = e.target.value.replace(/\D/g, "");
  if (!isNumber || e.target.value < 1 || e.target.value > 59) {
    this.$message.warning("只能输入[1,59]区间的整数");
    e.target.value = ''
  }
  e.target.value = (e.target.value >= 1 && e.target.value <= 59 && e.target.value.match(/^\d*/g)[0]) || null;
},

头像上传问题

dom代码：

<form id="form_face" method="post" enctype="multipart/form-data" style="width:auto;">
    <input type="file" name="fileToUpload" ref="fileToUpload" accept="image/png, image/jpeg, image/gif" @change="fileSelected" style="display:none;">
</form>

我们上传文件后需要将流传给后端，我们上传时可以限制上传图片的类型以及图片的大小：

fileSelected(e) {
    let _this = this
    //得到上传的第一个文件
    _this.imgObj = e.target.files[0];  
    /*图片类型正则验证*/
    let imgStr = /\.(jpg|jpeg|png|JPG|PNG)$/;
    if(!imgStr.test(this.imgObj.name)) {
        this.$message.error('请上传图片')
        return;
    } else {
        //异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
        this.file = new FileReader();
        //在读取操作完成时触发
        this.file.onload = () => {
            // 图片文件赋值给图片标签路径
            this.formData.headPortrait = this.file.result         
        }
        //将读取到的文件编码成Data URL
        this.file.readAsDataURL(this.imgObj);                   
    }
},

开始时间和结束时间间隔一个月

dom代码：

<span class="title">开始时间</span>
<el-date-picker :format="sFormat" v-model="cStartDate" value-format="yyyy-MM-dd" :picker-options="sOptions"></el-date-picker>
<span class="title e-time">结束时间</span>
<el-date-picker :format="eFormat" v-model="cEndDate" value-format="yyyy-MM-dd" :picker-options="eOptions" class="picker"></el-date-picker>

我们在data中定义format对应的sFormat和eFormat

sFormat: 'yyyy年MM月dd日',
eFormat: 'yyyy年MM月dd日',

我们在data中定义判断开始时间和结束时间以外的时间设置为不可选择状态：

sOptions: {
    disabledDate: this.startDateDisabled
},
eOptions: {
    disabledDate: this.endDateDisabled
},

我们可以给cStartDate和cEndDate进行获取和赋值：

cEndDate: {
    set($val) {
        if (this.type == 1)     this.endDate = $val;
        else                    this.vEndDate = $val;
    },
    get() {
        if (this.type == 1)     return this.endDate;
        else                    return this.vEndDate;
    }
},
cStartDate: {
    set($val) {
        if (this.type == 1)     this.startDate = $val;
        else                    this.vStartDate = $val
    },
    get() {
        if (this.type == 1)     return this.startDate;
        else                    return this.vStartDate;
    }
},

然后我们在这里写开始时间和结束时间相差一个月的逻辑代码：

//开始时间的判断逻辑
startDateDisabled($time) {
    //开始时间和结束时间清空，发现开始时间不能选中，所以增加一行if代码 
    if (!this.cEndDate) return ''
    return $time.getTime() >= time2LongString(this.cEndDate) || $time.getTime() <= (time2LongString(this.cEndDate) - 30*24*3600*1000)
},
//结束时间的判断逻辑
endDateDisabled($time) {
        return $time.getTime() <= (time2LongString(this.cStartDate) - 24*3600*1000) || $time.getTime() >= (time2LongString(this.cStartDate) + 30*24*3600*1000)
},

父子组件传值问题

一般父组件传递给子组件的值，我们不建议在子组件中去修改父组件传递的prop，因为vue是单向数据流，易于监测数据的流动，出现了错误可以更加迅速的定位到错误发生的位置。所以一旦我们在子组件中修改父组件中传递的值，控制台会显示警告。