vue插件的定义和使用

逃离我推掉我的手 2022-09-09 11:47 166阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>vue插件的定义和使用</title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
      // plugin 插件, 也是把通用性的功能封装起来
      const myPlugin = {
        install(app, options) {
          app.provide('name', 'Dell Lee');
          app.directive('focus', {
            mounted(el) {
              el.focus();
            }
          })
          app.mixin({
            mounted(){
              console.log('mixin')
            }
          })
          app.config.globalProperties.$sayHello = 'hello world';
        }
      }
    
      const app = Vue.createApp({
        template: `
          <my-title />
        `
      });
    
      app.component('my-title', {
        inject: ['name'],
        mounted() {
          console.log(this.$sayHello);
        },
        template: `<div>{
       {name}}<input v-focus /></div>`
      })
    
      app.use(myPlugin, { name: 'dell'});
    
      const vm = app.mount('#root');
    </script>
    </html>

Vue数据校验插件开发实例

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>数据校验插件开发实例</title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
      // 对数据做校验的插件
      const app = Vue.createApp({
        data() {
          return { name: 'dell', age: 23}
        },
        rules: {
          age: {
            validate: age => age > 25,
            message: 'too young, to simple'
          },
          name: {
            validate: name => name.length >= 4,
            message: 'name too short'
          }
        },
        template: `
          <div>name:{
       {name}}, age:{
       {age}}</div>
        `
      });
    
      const validatorPlugin = (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(validatorPlugin);
      const vm = app.mount('#root');
    </script>
    </html>