vue 开发过程中，常用到的写法

:::info

持续更新中

::::

1.input从右往左输入

只需要对input框添加text-align: right;这个CSS属性

2.数字校验rules

export const REG = {
 NUMBER: /^[0-9]*$/,
 POSITIVE_NUMBER: /^[1-9]\d*$/,
 PHONE: /^1[3|4|5|7|8][0-9]{9}$/
}

diningAmount: [
  { pattern: REG.NUMBER, message: '请输入数字', trigger: ['blur','change']}
],

3.手机号校验

contactWay: [
  { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
  { pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号码" }
],

4.重置表单校验

this.$refs['formName'].clearValidate();

5.动态校验表单字段

:rules="travelForm.diningPosition === '0' ? rules.nativeCity : []"

6.el-checkbox复选框如何修改尺寸大小

1.谷歌浏览器

<el-checkbox-group v-model="checkList">
  <el-checkbox class="checkbox"></el-checkbox>
</el-checkbox-group>
.checkbox{
    zoom: 200%;
}

添加自定义class（有网友说）

如果发现有浏览器没有作用那就用下面的办法

2.其他浏览器

.el-checkbox__inner {
       width: 20px;
       height: 20px;
}

.el-checkbox__inner::after {
        border: 3px solid #fff;
        border-left: 0;
        border-top: 0;
        left: 5px;
        top: 5px;
}

.el-checkbox__input.is-checked .el-checkbox__inner::after {
        transform: rotate(50deg) scaleY(1.3);
}

7.解决van-popup导致页面无法滑动问题

n-popup组件有一个默认锁定背景滚动，需要给van-popup标签添加 :lock-srcoll="false"

8.el-select 可下拉可搜索可保留

:filter-method="dataFilter"

dataFilter(val) {
    console.log(val, 'dataFilter')
    Vue.set(this.formAdd, 'repairsUserName', val)
  },