Vue.js 自定義指令使用場景及案例

chanjarster 發布于2019-08-26 10:48 / 3197人閱讀

摘要：使用場景代碼復用和抽象的主要形式是組件當需要對普通元素進行底層操作，此時就會用到自定義指令但是，對于大幅度的變動，還是應該使用組件鉤子函數詳情查閱文檔示例輸入框自動聚焦注冊一個全局自定義指令當被綁定的元素插入到中時聚焦元素下拉菜單點擊

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 自定義指令的魅力

GPU云服務器云服務器自定義指令自定義指令實例使用自定義字體自定義鏡像使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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