vue封装公共方法(export default install)

这篇具有很好参考价值的文章主要介绍了vue封装公共方法(export default install)—2。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

定义一validate.js文件内容如下：

validate.js封装部分
const rules = {
    email: {
        ex: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
        msg: '请输入正确的email地址'
    },
    mobile: {
        ex: /^1[0-9]{10}$/,
        msg: '请输入正确的手机号'
  }
    ....此还可添加的其他的校验方法
}

const compareFn= (rule, value, callback) => {
  if (parseInt(value) > 255) {
    return callback(new Error('值不可以大于5'))
  } else {
    callback()
  }
}，
....此还可添加的其他的封装方法

const Validator = {
  rules,
  compareFn
}

export default {
  install: function(Vue, Option) {
    Object.defineProperty(Vue.prototype, '$valid', { value: Validator })
  }
}

xxx.vue文件使用方法：

//标签部分：
        <el-form-item label="手机号：" required prop="phone">
          <el-input v-model="addFormData.phone"></el-input>
        </el-form-item>

        <el-form-item label="邮箱：" required prop="email">
          <el-input v-model="addFormData.email"></el-input>
        </el-form-item>


//验证规则：
rules: {
     phone: [
         { required: true, message: '请输入手机号' },
         { pattern: this.$valid.rules.mobile.ex, message: '手机号格式错误' }
     ],

     email: [
          { required: true, message: '请输入邮箱' },
          { pattern: this.$valid.rules.email.ex, message: '邮箱格式错误' }
     ]
}

重点：：①、标签传入校验规则；②、this.$valid.rules在规则定义里面调用具体的规则文章来源地址https://www.toymoban.com/news/detail-645879.html

到了这里，关于vue封装公共方法(export default install)—2的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！