Vue项目常见问题
发布网友
发布时间：2024-09-29 04:20
共1个回答
热心网友
时间：2024-09-29 21:54
dom上的代码：
<spanclass="item-wrapper"v-if="showInterval"><el-inputplaceholder="在此输入时间间隔"class="input"v-model="formData.interval"@input.native="onInput"></el-input></span>当我们在vue中遇到input输入框只能输入数字的问题，例如需要实现输入框中只能输入[1,59]区间的整数，我们可以采用以下方法做*，这样当我们输入其他不符合的值会直接*我们无法输入进去：
onInput(e){//验证是否是纯数字letisNumber=/^\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代码：
<formid="form_face"method="post"enctype="multipart/form-data"style="width:auto;"><inputtype="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];/*图片类型正则验证*/letimgStr=/\.(jpg|jpeg|png|JPG|PNG)$/;if(!imgStr.test(this.imgObj.name)){this.$message.error('请上传图片')return;}else{//异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容this.file=newFileReader();//在读取操作完成时触发this.file.onload=()=>{//图片文件赋值给图片标签路径this.formData.headPortrait=this.file.result}//将读取到的文件编码成DataURLthis.file.readAsDataURL(this.imgObj);}},开始时间和结束时间间隔一个月dom代码：
<spanclass="title">开始时间</span><el-date-picker:format="sFormat"v-model="cStartDate"value-format="yyyy-MM-dd":picker-options="sOptions"></el-date-picker><spanclass="titlee-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;elsethis.vEndDate=$val;},get(){if(this.type==1)returnthis.endDate;elsereturnthis.vEndDate;}},cStartDate:{set($val){if(this.type==1)this.startDate=$val;elsethis.vStartDate=$val},get(){if(this.type==1)returnthis.startDate;elsereturnthis.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是单向数据流，易于监测数据的流动，出现了错误可以更加迅速的定位到错误发生的位置。所以一旦我们在子组件中修改父组件中传递的值，控制台会显示警告。
