除了核心功能默認的內置指令(v-model和v-show),也可以允許註冊自定義指令
代碼的複用和抽象是主要形式是組件,然而,有的情況系啊,你仍然需要對普通DOM進行底層操作
常用場景總計如下:
- 輸入框自動聚焦
// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
使用: <input v-focus>
- 下拉菜單
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
}
}
})
使用如下:
<div class="main" v-menu="handleHide">
<button @click="show = !show">點擊顯示下拉菜單</button>
<div class="dropdown" v-show="show">
<div class="item"><a href="#">選項 1</a></div>
<div class="item"><a href="#">選項 2</a></div>
<div class="item"><a href="#">選項 3</a></div>
</div>
</div>
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__
}
})
4.滾動動畫
<div id="app">
<h1 class="centered">Scroll me</h1>
<div class="box" v-scroll="handleScroll">
<p>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.</p>
</div>
</div>
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;
}
5.頁面頂部標題
Vue.directive('title', {
inserted: function (el, binding) {
document.title = binding.value;
el.remove();
}
})