Vue自定义指令

最新推荐文章于 2024-04-24 21:31:50 发布

FourteenSeptember

最新推荐文章于 2024-04-24 21:31:50 发布

阅读量97

点赞数

分类专栏： JavaScript Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wozouludaifeng/article/details/129265798

版权

Vue 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

JavaScript

22 篇文章 0 订阅

订阅专栏

文章展示了如何使用Vue的自定义指令`Vue.directive`来创建一个名为`focus`的指令，该指令在元素插入DOM时改变其样式，添加鼠标滚轮事件监听器，并更新元素内容。事件监听器记录并显示`mousewheel`事件的`wheelDelta`值。同时，它还设置了一个定时器，每秒增加并显示`binding.value`的值。

摘要由CSDN通过智能技术生成

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  bind: function (el,binding,vnode,oldVnode) {
    // 聚焦元素
    el.style.color  = 'red'
    el.style.fontSize = '28px'
    el.addEventListener('mousewheel',function (e){
      console.log(e.wheelDelta)
      el.innerHTML  = e.wheelDelta
     })
    el.__timeout__ = setInterval(() => {
      el.innerHTML = binding.value ++
    }, 1000)
  },
  unbind(el) {
    console.log("🚀 ~ file: main.js:92 ~ unbind ~ el:", el)
    clearInterval(el.innerHTML)
  }
})

<template>
    <div class="welcome">
      <!-- <img src="@/assets/image/welcome.png" alt=""> -->
      <div v-focus="mousewheel" >input</div>
    </div>
</template>
<script>
export default {
    name: 'welcome',
    data() {
      return {
        mousewheel: 1565753400000
      }
    },
//     directives: {
//   focus: {
//     // 指令的定义
//     inserted: function (el) {
//       el.focus()
//     }
//   }
// }
}