Vue.js 自定义指令使用场景及案例

chanjarster 发布于2019-08-26 10:48 / 2998人阅读

摘要：使用场景代码复用和抽象的主要形式是组件当需要对普通元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的变动，还是应该使用组件钩子函数详情查阅文档示例输入框自动聚焦注册一个全局自定义指令当被绑定的元素插入到中时聚焦元素下拉菜单点击

1. 使用场景

代码复用和抽象的主要形式是组件

当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令

但是，对于大幅度的 DOM 变动，还是应该使用组件

2. 钩子函数

详情查阅文档 https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0

3. 示例 3.1 输入框自动聚焦

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

3.2 下拉菜单

点击下拉菜单本身不会隐藏菜单

点击下拉菜单以外的区域隐藏菜单

Vue.directive("clickoutside", {
  bind(el, binding) {
    function documentHandler(e) {
      if (el.contains(e.target)) {
       return false 
      }
      
      if (binding.expression) {
        binding.value(e)
      }
    }
    
    el.__vueMenuHandler__ = documentHandler
    document.addEventListener("click", el.__vueMenuHandler__)
  },
  unbind(el) {
    document.removeEventListener("click", el.__vueMenuHandler__)
    delete el.__vueMenuHandler__
  }
})

new Vue({
  el: "#app",
  data: {
    show: false
  },
  methods: {
    handleHide() {
      this.show = false
    }
  }
})

3.3 相对时间转换

类似微博、朋友圈发布动态后的相对时间，比如刚刚、两分钟前等等

new Vue({
  el: "#app",
  data: {
    time: 1565753400000
  }
})

Vue.directive("relativeTime", {
  bind(el, binding) {
    // Time.getFormatTime() 方法，自行补充
    el.innerHTML = Time.getFormatTime(binding.value)
    el.__timeout__ = setInterval(() => {
      el.innerHTML = Time.getFormatTime(binding.value)
    }, 6000)
  },
  unbind(el) {
    clearInterval(el.innerHTML)
    delete el.__timeout__
  }
})

3.4 滚动动画


  Scroll me
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.

Vue.directive("scroll", {
  inserted: function(el, binding) {
    let f = function(evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener("scroll", f)
      }
    }
    window.addEventListener("scroll", f)
  }
})

// main app
new Vue({
  el: "#app",
  methods: {
   handleScroll: function(evt, el) {
    if (window.scrollY > 50) {
      TweenMax.to(el, 1.5, {
        y: -10,
        opacity: 1,
        ease: Sine.easeOut
      })
    }
    return window.scrollY > 100
    }
  }
})

body {
  font-family: "Abhaya Libre", Times, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
  font-weight: 800;
}

.centered {
  margin: 0 auto;
  display: table;
  font-size: 60px;
  margin-top: 100px;
}

.box {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 20px;
  line-height: 1.3em;
  opacity: 0;
  color: white;
  width: 200px;
  margin: 0 auto;
  margin-top: 30px;
  transform: translateZ(0);
  perspective: 1000px;
  backface-visibility: hidden;
  background: rgba(255, 255, 255, 0.1);
}

#app {
  height: 2000px;
}

4. 参考资料

《Vue.js 实战》作者：梁灏

【译】vue 自定义指令的魅力

混合云专线服务自定义指令自定义指令实例使用自定义字体自定义镜像使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106790.html

Vue 自定义指令

摘要：自定义指令定义直接看官网的介绍吧觉得官方文档说的很清楚了，所以我基本都是抄他的了。除了核心功能默认内置的指令和，也允许注册自定义指令。然而，有的情况下，你仍然需要对普通元素进行底层操作，这时候就会用到自定义指令。前言最近搞了毕设，需要实现一个场景，点击一块区域，弹出一个编辑区域，点击页面的其他地方的时候，这个编辑区域就隐藏，本想想之前写模态框一样写个方法的时候，突然showImg(...

you_De 2019-08-23 13:42 评论0 收藏0
认识Vue组件

摘要：认识组件组件是强大的功能之一。注意，所有的组件同时也都是的实例，可接受相同的选项对象。组件全局注册时通过方式注册。考虑到会出现禁止使用的场景，需要禁止和启用组件的功能，所以需要。同样也是先在子组件的选项中定义好传递过来的数据。前言 Vue.js是一套构建用户界面的渐进式框架（官方说明）。通俗点来说，Vue.js是一个轻量级的，易上手易使用的，便捷，灵活性强的前端MVVM框架。简洁的A...

xumenger 2019-08-22 11:19 评论0 收藏0
你应该要知道的Vue.js

摘要：具体步骤实现将需要的数据对象进行递归遍历，包括子属性对象的属性，都加上和。综上，在性能上的收益并不是最主要的，更重要的是它使得具备了现代框架应有的高级特性。原文：你应该要知道的Vue.js 组件data为什么必须是函数？因为组件可能被多处使用，但他们的data是私有的，所以每个组件都要return一个新的data对象组件通信父子组件通信：$on、$emit 非父子组件的通信...

张春雷 2019-08-22 15:37 评论0 收藏0
vue开发看这篇文章就够了

摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？ Library 库，本质上是一...

fsmStudy 2019-08-21 18:37 评论0 收藏0
每个人都能实现的vue自定义指令

摘要：指令绑定的前一个值，仅在和钩子中可用。字符串形式的指令表达式。上一个虚拟节点在上可根据需要定义一些钩子函数只调用一次，指令第一次绑定到元素时调用。指令的值可能发生了改变，也可能没有。前文先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多...

NickZhou 2019-08-21 18:23 评论0 收藏0