vue之自定义插件

newway007

于 2019-12-29 19:18:03 发布

阅读量203

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/newway007/article/details/103756540

版权

Vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

rulesPlugin.js

const RulesPlugin = {
  install (Vue) {
    Vue.mixin({
      created() {
        const rules = this.$options.rules
        if (rules) {
          Object.keys(rules).forEach(key => {
            const {validate, message} = rules[key]
            this.$watch(key, newValue => {
              const valid = validate(newValue)
              if (!valid){
                console.error(message)
              }
            })
          })
        }
      },
    })
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>自定义插件</title>
  <script src="vue.min.js"></script>
  <script src='./rulesPlugin.js'></script>
</head>
<body>
  <div id="app"></div>
<script>
Vue.use(RulesPlugin)
const vm = new Vue({
  data: { number: 1, phone: '11'},
  rules: {
    number: {
      validate: value => value > 0,
      message: 'number 必须大于0'
    },
    phone: {
      validate: value => value.length === 11,
      message: '请输入11位的手机号'
    }
  },
})


</script>
</html>

newway007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue之自定义插件

rulesPlugin.jsconst RulesPlugin = { install (Vue) { Vue.mixin({ created() { const rules = this.$options.rules if (rules) { Object.keys(rules).forEach(key =>...
复制链接

扫一扫