插件

simple plugin

创建一个插件使 Vue 组件拦截自定义 rules option 对象，对组件的 data option 里的 property 进行校验。

• install 全局 mixin
• 包含created钩子
• 在钩子函数里检查this.$options.rules

核心代码

const RulesPlugin = {  install(Vue) {    Vue.mixin({      created() {        if (this.$options.rules) {          // Do something with rules          const rules = this.$options.rules;          Object.keys(rules).forEach((key) => {            const rule = rules[key];            this.$watch(key, (newValue) => {              const result = rule.validate(newValue);              if (!result) {                console.log(rule.message);              }            });          });        }      },    });  },};
Vue.use(RulesPlugin);
const vm = new Vue({  data: { age: 18 },  rules: {    age: {      validate: (value) => value >= 18,      message: "未满18岁禁止观看",    },  },});