首页 前端 Vue.js 正文

【Vue3从零开始-第五章】5-5 数据校验插件实例


前言

上一篇的文章中,我们了解了vue高级语法中的Plugin插件,本章节中将会使用前面学到的mixin和plugin来做一个数据校验的插件。

正式开始

在以前大家写项目的时候,如果对于表单校验,除了使用封装好的UI组件之外,还会怎么写呢?是不是会用js对每一个表单项进行判断,如果表单项很长,那么要写的js逻辑也会很多很长。

大家在使用vue开发项目时,肯定也用过ElementUI组件库,那怎么才能封装一个类似于组件库里面的校验插件呢?

<script>
  const app = Vue.createApp({
    data(){
      return {
        name: 'JueJin',
        age: 18
      }
    },
    template: `
      <div>
        <div>
          name: <input v-model="name" />    
        </div>
        <div>
          age: <input v-model="age" />  
        </div>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

【Vue3从零开始 第五章】5 5 数据校验插件实例  第1张

下面我们就分别使用mixin和plugin的方式来封装表单项的校验规则。

使用mixin封装

首先我们需要定义一个规则,用于表单项的校验。可以在根组件data函数中返回这个规则,也可以单独写一个对象用于定义规则。

rules: {
  age: {
    validate: age => age > 18,
    message: '未成年哦~'
  }
},

  • 在根组件中直接定义了一个rules对象,用来定义规则项。

  • 在规则项中,对age属性值进行判断。

  • 判断age>18的时候就通过,如果age<18则提示message中的内容。

【Vue3从零开始 第五章】5 5 数据校验插件实例  第2张

此时如果改变age的话,其实是没有任何反应的,那下面我们就要开始写封装的代码了。

获取到rules

app.mixin({
    created(){
      console.log(this.$options.rules)
    }
})

  • 在mixin里面调用created生命周期函数。

  • 在函数中,先通过$options来获取到rules

  • $options表示vue实例上的所有东西。

【Vue3从零开始 第五章】5 5 数据校验插件实例  第3张

在控制台中会发现rules中的agevalidatemessage都会打印出来,那么我们获取rules的方法就没啥问题了,可以通过this.$options.rules的方式对rules做一些操作了。

既然rules是一个对象,那么我们就可以通过循环来获取到这个对象中的每一个规则项。

app.mixin({
    created(){
      for(let key in this.$options.rules){
        const item = this.$options.rules[key]
        console.log(item)
      }
    }
})

【Vue3从零开始 第五章】5 5 数据校验插件实例  第4张

通过循环已经可以获取到rules中的每一项了,下面我们就可以通过监听的方式来对每一项进行操作。

app.mixin({
    created(){
      for(let key in this.$options.rules){
        const item = this.$options.rules[key]
        this.$watch(key, () => {
          console.log(key + '改变了')
        })
      }
    }
})

  • $watch是vue实例里面的监听器方法,也是一个全局的,所以可以通过this的方式来调用。

  • 在监听器中,对key进行监听,同时有一个回调函数用来输出监听结果。

【Vue3从零开始 第五章】5 5 数据校验插件实例  第5张

在浏览器控制中发现当我们改变age的时候,监听器同时也会作出相应的反应。

this.$watch(key, (value) => {
  const result = item.validate(value)
  if(!result){
    console.log(item.message)
  }
})

  • 在监听器的回调函数中接收一个value,表示当有值进行改变时,value就是最新的值了。

  • 将监听到的最新值传递给relus中的validate函数进行判断。

  • 同时将判断结果赋值给result,通过判断result来输出relus中的message

【Vue3从零开始 第五章】5 5 数据校验插件实例  第6张

在浏览器控制台中会发现,当我们对表单项中的age进行改变的时候,控制台就会输出对象的判断内容。

🔥 同理:我们也可以对name进行校验

 rules: {
      age: {
        validate: age => age > 18,
        message: '未成年哦~'
      },
      name: {
        validate: name => name.length > 6,
        message: '字符不够哦~'
      }
}

  • 我们直接在rules中定义一个name的校验规则项即可。

  • mixin中的校验方法时通用的,所以无需修改。

【Vue3从零开始 第五章】5 5 数据校验插件实例  第7张

使用plugin进行封装

const validatePlugin = {
    install(app, options){
      app.mixin({
        created(){
          for(let key in this.$options.rules){
            const item = this.$options.rules[key]
            this.$watch(key, (value) => {
              const result = item.validate(value)
              if(!result){
                console.log(item.message)
              }
            })
          }
        }
      })
    }
}

app.use(validatePlugin)

  • 其实通过plugin封装的时候,只是在外部嵌套了一层plugin的代码而已。

  • plugin中的内容还是上面mixin中的内容。

❓ 为什么我们还要使用plugin去进行封装呢

  • 主要是因为使用plugin的方式,首先会定义一个常量用来表示当前代码是用来做什么的,方便后期维护。

  • 其次是使用plugin的方式更加方便后期扩展,我们除了在插件里面用来校验表单项之外,还可以扩展更多其他的东西。

总结

本篇文章主要是结合之前学过的mixin和plugin来对表单数据项做一个校验规则的封装。

由于mixin和plugin的特性不一样,所以强烈推荐大家使用plugin的方式去封装mixin。

一起学习,大家加油💪🏻💪🏻

原文:https://juejin.cn/post/7101859238388957197
打赏
海报

本文转载自互联网,旨在分享有价值的内容,文章如有侵权请联系删除,部分文章如未署名作者来源请联系我们及时备注,感谢您的支持。

转载请注明本文地址:https://www.shouxicto.com/article/5454.html

相关推荐

Vue3 新特性

Vue3 新特性

   前言    在上一篇的文章中,我们了解了vue高级语法中的Plugin插件,本章节中将会使用前面学到的mixin和pl...

Vue.js 2022.06.01 0 728

50+Vue经典面试题源码级详解(24)

   Vue 3.0的设计目标是什么?做了哪些优化?    分析    还是问新特性,陈述典型新特性,分析其给你带来的变化即可。    思路    从以...

Vue.js 2022.06.01 0 712

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
支付宝
微信
赞助本站