VUE + Element项目中，你可能不知道的一些技巧-CSDN博客

表单弹框

实际的项目中会存在很多的表单弹框，并且有许多是可以复用的，我们可以简单的封装成业务组件。技巧就是利用.sync特性

<Dialog :visible.sync="dialogFormVisible"></Dialog>

<el-dialog @close="close" title="收货地址" :visible.sync="visible">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="ok">确 定</el-button>
    </div>
  </el-dialog>
复制代码

export default {
  props: {
    visible: false
  },
  data() {
    return {
      form: {
        name: "",
        region: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    },
    ok() {
      this.$emit("update:visible", false);
    }
  }
};
复制代码

表单嵌入

有一些场景，除了表单输入不同，其他的一些逻辑都是一样的，这时候就可以把表单拉出来，做一个判断，这样就能公用一个页面

<el-form :model="form">
  <Forms :data.sync="form"></Forms>
  <el-button @click="close">取 消</el-button>
  <el-button type="primary" @click="ok">确 定</el-button>
</el-form>

//Forms
<div>
    <el-form-item label="活动名称" :label-width="formLabelWidth">
      <el-input v-numberInt:5="data.name" v-model="data.name" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select v-model="data.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
</div>
复制代码

export default {
  props: {
    data: Object
  },
  data() {
    return {
      formLabelWidth: "120px"
    };
  }
};
复制代码

Directive 指令

有一天，我正在开开心心的写代码的时候，产品突然跟我说，表单仅仅做校验是不够的，我们还要限制用户输入，价格只能输入数字，数量只能输入整数，我听到后整个人就很~~高兴~~说: 我（艹）看（泥）看（马）（当用户傻呀，外星人呀，价格是ABC）~~~~

<el-input v-numberInt:5="data.name" v-model="data.name" ></el-input>
复制代码

//JS
export const numberInt = {
  update: function (el, binding, vnode) {
    let val = binding.value ? binding.value.toString() : ''
    let len = binding.arg
    if (val === '') return
    let reg = new RegExp('^[0-9]{0,' + len + '}$')
    if (!reg.test(val)) {
    // 因为model的原因必须nextTick后去更改才行
      Vue.nextTick(() => {
        vnode.data.model.callback(binding.oldValue)
      })
    }
  }
}
    
复制代码