前言
公司技術(shù)棧圍繞react為主，但是時(shí)間有限研究較少，本文以vue中自定義指令為切入點(diǎn)，詳細(xì)介紹directive的作用和如何實(shí)現(xiàn)自定義指令。
vue自定義指令顧名思義，就是vue給我們提供的一個(gè)編寫各種指令的入口。比如v-for,v-if ,v-show等，根據(jù)實(shí)際業(yè)務(wù)需求 時(shí)會(huì)用到自定義指令，一定程度上可以解決過(guò)濾器并承擔(dān)部分組件功能的作用。
但是總體而言，由于指令需要操作dom,因此能用組件就不用指令。言歸正傳：
比如寫一個(gè)v-focus,任何input或者textarea綁定該屬性可直接獲取焦點(diǎn)
自定義指令v-focus
<body>
<div id="app">
<input type="text" v-focus >
</div>
<script>
Vue.directive('focus',{
inserted:function(el){
el.focus()
}
})
var app = new Vue({
el:'#app'
})
</script>
</body>
上述directive相對(duì)簡(jiǎn)單，下面來(lái)看一下高級(jí)的自定義指令使用。比如當(dāng)遇到下面場(chǎng)景時(shí)：秒殺活動(dòng)中有許多個(gè)商品，其中每個(gè)商品都有著倒計(jì)時(shí)，要想實(shí)現(xiàn)頁(yè)面上倒計(jì)時(shí)的實(shí)時(shí)更新，傳統(tǒng)做法莫過(guò)于使用filter,里面綁定個(gè)計(jì)時(shí)器。而自定義指令則大大不同：
根據(jù)需要封裝一個(gè)time.js
var Time = {
// 當(dāng)前時(shí)間戳
getUnix: function() {
return new Date().getTime()
},
// 今天0點(diǎn)時(shí)間戳
getTodayUnix: function() {
var date = new Date()
date.setHours(0);
date.setMinutes(0);
date.setMilliseconds(0);
date.setMilliseconds(0);
return date.getTime();
},
//獲取今年1月1日零時(shí)時(shí)間戳
getYeaderUnix: function() {
var date = new Date()
date.setMonth(0)
date.setDate(1)
date.setHours(0);
date.setMinutes(0);
date.setMilliseconds(0);
date.setMilliseconds(0);
return date.getTime();
},
//獲取標(biāo)準(zhǔn)年月日
getLastDate: function(time) {
var date = new Date(time);
var month = date.getMonth()+1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
return date.getFullYear() + '-' + month + '-' + day;
},
// 開(kāi)始轉(zhuǎn)換
getFormatTime: function(timestamp) {
var now = this.getUnix();
var today = this.getTodayUnix();
var year = this.getYeaderUnix();
var timer = (now - timestamp) / 1000;
var tip = ''
if (timer <= 0) {
tip = '剛剛'
} else if (Math.floor(timer / 60) <= 0) {
tip = '剛剛'
} else if (timer < 3600) {
tip = Math.floor(timer / 60) + '分鐘前';
} else if (timer >= 3600 && (timestamp - today >= 0)) {
tip = Math.floor(timer / 3600) + '小時(shí)前';
} else if (timer / 86400 <= 31) {
tip = Math.ceil(timer / 86400) + '天前';
} else {
tip = this.getLastDate(timestamp);
}
return tip;
}
}
高級(jí)自定義指令v-time
<div id="app">
<div class="list" v-time="item" v-for="(item,index) in list" :key="index">
{{item }}
</div>
</div>
</body>
Vue.directive('time',{
bind:function(el,binding){
el.innerHTML = Time.getFormatTime(binding.value*1000)
el._timeout_ = setInterval(()=>{
el.innerHTML = Time.getFormatTime(binding.value*1000)
},60000)
},
unbind:function(el){
clearInterval(el._timeout_);
delete el._timeout_
}
})
只需要為每個(gè)列表綁定一個(gè)v-time 即可實(shí)現(xiàn)倒計(jì)時(shí)實(shí)時(shí)改變
