前端UI框架——VueAPI使用之自定义指令

最新推荐文章于 2024-05-08 21:57:26 发布

Blockchain Explorer

最新推荐文章于 2024-05-08 21:57:26 发布

阅读量307

点赞数

分类专栏： Web框架/Vue/ 文章标签：自定义指令 directives vue

本文链接：https://blog.csdn.net/TDCQZD/article/details/82155691

版权

Web框架/Vue/ 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、基本介绍

1、全局自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

2、局部指令
如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：

<input v-focus>

二、代码示例：

代码案例：

<body>
    <div id="app">
        <p v-move="1000" >{{msg}}</p>
    </div>

    <div id="demo">
        <p v-move="1000" >{{msg}}</p>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    // 注册全局指令
    /*Vue.directive('move', function(el, binding){
       el.style.transition = "2s";
       setTimeout(()=>{
           el.style.transform = `translateX(${binding.value}px)`;
       },200)
    })*/


    const vm = new Vue({
        el:"#app",
        data: {
            msg:"124444444444444"
        },
        <!--注册局部指令-->
        directives : {
            'move' : {
                bind (el, binding) {
                    el.style.transition = "2s";
                    setTimeout(()=>{
                        el.style.transform = `translateX(${binding.value}px)`;
                    },200)
                }
            }
        }
    })

    const vm2 = new Vue({
        el:"#demo",
        data: {
            msg:"124444444444444"
        }
    })

</script>

代码运行测试结果：

注册全局指令：
这里写图片描述
注册局部指令：

Blockchain Explorer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端UI框架——VueAPI使用之自定义指令

一、基本介绍1、全局自定义指令// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})2、局部指令如果想注册局部指令，组件中也接受一个 directives 的选项：...
复制链接

扫一扫