vue3基础-自定义指令directive

小小婷几

已于 2023-07-07 16:02:51 修改

阅读量1k

点赞数

分类专栏： VUE3学习笔记文章标签： vue.js javascript 前端

于 2022-02-16 18:15:57 首次发布

本文链接：https://blog.csdn.net/qq_40128375/article/details/122969244

版权

VUE3学习笔记专栏收录该内容

15 篇文章 4 订阅

订阅专栏

全局自定义指令

场景：视情况而定（一般不使用）

 // 全局自定义指令
 app.directive('focus', {
   mounted(el) {
     el.focus();
   }
 })
 app.directive('blur', {
   mounted(el) {
     el.addEventListener('blur', function(el) {
       if (el.target.tagName === 'INPUT') {
         el.target.value = el.target.value.toUpperCase();
       }
     })
   }
 })

使用方式：template直接使用： <input v-focus v-blur />

局部自定义指令

 const directives = {
   focus: {
     mounted(el) {
         el.focus();
     }
   },
   blur: {
     mounted(el) {
       el.addEventListener('blur', function(el) {
         if (el.target.tagName === 'INPUT') {
           el.target.value = el.target.value.toUpperCase();
         }
       })
     }
   }
 }

使用方式

const app = Vue.createApp({
  directives: directives, // 需要注册
  template: `
    <div>
      <input v-focus v-blur />
    </div>`,
})

vue2使用自定义指令

    <script>
        var app = new Vue({
            el: '#app',
            template: `
                <div>
                    <input v-model="message" v-focus />
                    {{message}}
                </div>
            `,
            data: {
                message: '12'
            },
            directives: {
                focus: {
                    // 指令的定义
                    bind: function (el, binding, vnode) {
                        let done = true
                        el.addEventListener('input', function(e) {
                            if (done && /^123/.test(el.value)) {
                                el.value += '-'
                                done = false
                            }
                        })
                    }
                }
            }
        })
    </script>