有的情况下，需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
自定义指令使用情景：
1.按钮级别权限的控制。
2.按钮的波纹动态效果。
3.一键copy的功能。
4.输入框自动聚焦。
5.下拉菜单，点击下拉菜单以外的地方时隐藏下拉菜单。
6.时间转换，比如朋友圈发布动态后的相对时间，比如刚刚、两分钟前等等。
7.输入框的最小值和最大值限制。
一：自定义指令有全局注册指令和局部注册指令两种方式：
全局注册指令：
Vue.directive('focus',{
bind:function(){},
inserted:function(){},
update:function(){},
componentUpdated:function(){},
unbind:function(){}
});局部注册指令：在.vue文件中使用directives属性：
directives:{
focus:{
bind:function(){},
inserted:function(){},
update:function(){},
componentUpdated:function(){},
unbind:function(){}
}
}注册指令成功后，直接在dom元素上使用v-focus。
<input v-focus/>二：注册指令的使用。
下面以局部注册指令来举例子。
自定义指令有4个钩子函数，v-check-num="{key:'myNum',maxval:1000,minval:100}"
钩子函数需要用到的参数解析:
1.el:指令所绑定的元素。
2.binding:绑定对象。属性包含
name(指令名)，不包括v-，此例子中为check-num。
value(计算后的指令所绑定的值),此例子中为{key:'myNum',maxval:1000,minval:100}。
oldValue(指令所绑定的前一个值，仅在update和componentUpdated中可用)。
express(绑定的值的字符串形式)，此例子中为'{key:'myNum',maxval:1000,minval:100}'。
arg(传递给指令的参数),v-check-num:a中的arg为a。
modifiers(修饰符对象),v-my-directive.foo.bar中的modifiers为{foo:true,bar:true}。
3.vnode:编译生成的虚拟节点。属性有context为虚拟节点的上下文。
注意：el可读可写，其他参数只读。如果需要在钩子函数之间共享数据，可通过dataset来实现。
4.oldVnode:上一个虚拟节点。
directiveCom.vue：
<template>
<div>
<p>checkNum指令</p>
<label>数量:</label>
<input :value="myNum" v-check-num="{key:'myNum',maxval:1000,minval:100}" v-if="show" />
<button @click="toggle">切换一下show</button>
</div>
</template>
<script>
export default {
name: "directiveCom",
data: () => {
return {
show: true,
myNum: "" //奖品总数
};
},
methods: {
toggle() {
this.show = !this.show;
}
},
directives: {
checkNum: {
//只调用一次，第一次绑定指令到元素上时调用，可在此生命周期内做一些初始化的操作
bind: function() {
console.log("bind");
},
//被绑定元素插入父节点时调用
inserted: function() {
console.log("inserted");
},
//被绑定元素所在的模板被更新时即可调用
update: function() {
console.log("update");
},
//被绑定元素所在的模板完成一次更新周期时调用
componentUpdated: function() {
console.log("componentUpdated");
},
//指令与元素解绑的时候调用
unbind: function() {
console.log("unbind");
}
}
}
};
</script>
<style>
</style>在App.vue里面引用上面的指令组件：
<template>
<div id="app">
<directive-com/>
</div>
</template>
<script>
import directiveCom from './components/directiveCom'
export default {
name: "App",
components:{
directiveCom
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
效果图：
页面渲染时，触发了bind和inserted函数。
点击按钮,效果图：
此时，改变了directiveCom组件里的dom元素的css样式，触发了update和componentUpdated函数。
将directiveCom中的v-show改为v-if:
<template>
<div>
<p>checkNum指令</p>
<label>数量:</label>
<input :value="myNum" v-check-num="{key:'myNum',maxval:1000,minval:100}" v-if="show" />
<button @click="toggle">切换一下show</button>
</div>
</template>
<script>
export default {
name: "directiveCom",
data: () => {
return {
show: true,
myNum: "" //奖品总数
};
},
methods: {
toggle() {
this.show = !this.show;
}
},
directives: {
checkNum: {
//只调用一次，第一次绑定指令到元素上时调用，可在此生命周期内做一些初始化的操作
bind: function() {
console.log("bind");
},
//被绑定元素插入父节点时调用
inserted: function() {
console.log("inserted");
},
//被绑定元素所在的模板被更新时即可调用
update: function() {
console.log("update");
},
//被绑定元素所在的模板完成一次更新周期时调用
componentUpdated: function() {
console.log("componentUpdated");
},
//指令与元素解绑的时候调用
unbind: function() {
console.log("upbind");
}
}
}
};
</script>
<style>
</style>点击按钮，效果如下：
v-if是dom组件的的销毁和创建，指令与元素解绑，此时触发了unbind函数。
三：进阶：使用自定义指令来设置输入框的最小值和最大值规则。规则：如果输入的值<最小值，那么默认为最小值;如果输入的值>最大值，那么默认为最大值；如果输入的是非数字，则清空输入框，默认为空。
directiveCom组件：
<template>
<div>
<p>checkNum指令</p>
<label>数量:</label>
<input :value="myNum" v-check-num="{key:'myNum',maxval:1000,minval:100}" v-if="show" />
<button @click="toggle">切换一下show</button>
</div>
</template>
<script>
export default {
name: "directiveCom",
data: () => {
return {
show: true,
myNum: "" //奖品总数
};
},
methods: {
toggle() {
this.show = !this.show;
}
},
directives: {
checkNum: {
//只调用一次，第一次绑定指令到元素上时调用，可在此生命周期内做一些初始化的操作
bind: function(el, binding, vnode) {
el.handler = function() {
if (!Number(el.value)) {
el.value = "";
return false;
}
const value = Number(el.value);
if (binding.value.maxval && value > binding.value.maxval) {
el.value = binding.value.maxval;
}
if (binding.value.minval && value < binding.value.minval) {
el.value = binding.value.minval;
}
//将el.val的值赋值给myNum
vnode["context"][binding.value.key] = el.value;
};
el.addEventListener("change", el.handler);
console.log("bind");
},
//被绑定元素插入父节点时调用
inserted: function() {
console.log("inserted");
},
//被绑定元素所在的模板被更新时即可调用
update: function() {
console.log("update");
},
//被绑定元素所在的模板完成一次更新周期时调用
componentUpdated: function() {
console.log("componentUpdated");
},
//指令与元素解绑的时候调用
unbind: function() {
console.log("unbind");
}
}
}
};
</script>
<style>
</style>四：用自定义指令来实现几种需求场景：
git链接：https://github.com/xiaoli0510/vue-directive
directive.vue:
<template>
<div>
<div>
<p>1.validBtn指令：按钮级别权限的控制</p>
<button v-valid-btn="'viewBtn'">查看按钮</button>
<br />
<!-- 通过ajax获取的用户按钮权限数组里面没有editBtn,所以编辑按钮被移除 -->
<button v-valid-btn="'editBtn'">编辑按钮</button>
</div>
<div>
<p>2.waves指令：按钮的波纹动态效果</p>
<button v-waves>点击有波纹效果的按钮</button>
</div>
<div>
<p>3.copy指令：一键copy的功能</p>
<button v-copy="'copyText'">点击一键复制</button>
</div>
<div>
<p>4.focus指令：输入框自动聚焦</p>
<input type="text" v-focus />
</div>
<div>
<p>5.clickoutside指令：下拉菜单，点击下拉菜单以外的地方时隐藏下拉菜单</p>
<div class="main" v-clickoutside="handleClose">
<button @click="showDrop =!showDrop">点击显示下拉菜单</button>
<div class="dropdown" v-show="showDrop">
<p>我是下拉框的内容，点击外部区域可以关闭</p>
</div>
</div>
</div>
<div>
<p>7.time指令：时间转换，比如朋友圈发布动态后的相对时间，比如刚刚、两分钟前等等</p>
<div v-time="timeNow"></div>
</div>
<div>
<p>8.checkNum指令：输入框的最小值和最大值限制</p>
<label>数量:</label>
<input :value="myNum" v-check-num="{key:'myNum',maxval:1000,minval:100}" />
</div>
</div>
</template>
<script>
export default {
name: "directiveCom",
data: () => {
return {
showDrop: false,
myNum: "",
timeNow: new Date().getTime()
};
},
methods: {
handleClose() {
this.showDrop = false;
}
},
directives: {
//输入框的最小值和最大值限制
checkNum: {
//指令第一次绑定在元素上时调用，只调用一次
bind: function(el, binding, vnode) {
el._handler_ = function() {
let value = el.value;
if (!Number(value)) {
el.value = "";
return false;
}
value = Number(value);
if (binding.value.maxval && value > binding.value.maxval) {
el.value = binding.value.maxval;
}
if (binding.value.minval && value < binding.value.minval) {
el.value = binding.value.minval;
}
vnode["context"][binding.value.key] = el.value;
};
el.addEventListener("change", el._handler_);
},
//被绑定的元素插入父节点时调用
inserted: function() {},
//被绑定的元素所在的模板发送更新时，比如style或者内容改变的时候调用
update: function() {},
//所在的模板完成一次更新后调用
componentUpdated: function() {},
//指令与元素解绑的时候调用
unbind: function(el) {
delete el._handler_;
}
},
//按钮级别权限的控制
validBtn: {
inserted: function(el, binding) {
el.handler = function(value) {
//此处模拟的是ajax获取的用户权限按钮
const btnArr = ["viewBtn"];
for (var item of btnArr) {
if (item === value) {
return true;
}
}
//如果用户没有此按钮权限，则移除此按钮
el.parentNode.removeChild(el);
return false;
};
el.handler(binding.value);
},
unbind: function(el) {
delete el.handler;
}
},
focus: {
inserted: function(el) {
el.focus();
}
},
clickoutside: {
bind: function(el, binding) {
function documentHandler(e) {
//如果点击的是当前的下拉框元素 则不做处理
if (el.contains(e.target)) {
return false;
}
//如果v-clickoutside后面有表达式 则执行后面的函数 此例子中执行handleClose函数
if (binding.expression) {
binding.value(e);
}
}
el.__vueClickOutside__ = documentHandler;
document.addEventListener("click", documentHandler);
},
unbind: function(el) {
document.removeEventListener("click", el.__vueClickOutside__);
delete el.__vueClickOutside__;
}
}
}
};
</script>
<style>
button {
margin-bottom: 10px;
}
</style>先上效果图：
checkNum、validBtn、focus、clickoutside是局部注册指令。
waves、copy、time是全局注册指定。
time.js：
var Time = {
//获取当前时间戳
getUnix: function () {
var date = new Date();
return date.getTime();
},
//获取今天0点0分0秒的时间戳
getTodayUnix: function () {
var date = new Date();
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date.getTime();
},
//获取今年1月1日0点0分0秒的时间戳
getYearUnix: function () {
var date = new Date();
date.setMonth(0);
date.setDate(1);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date.getTime();
},
//获取标准年月日
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;
},
//转换时间
getFormatTime: function (timestamp) {
var now = this.getUnix(); //当前时间戳
var today = this.getTodayUnix(); //今天0点时间戳
//var year = this.getYearUnix(); //今年0点时间戳
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) + '小时前';
} else if (timer / 86400 <= 31) {
tip = Math.ceil(timer / 86400) + '天前';
} else {
tip = this.getLastDate(timestamp);
}
return tip;
}
};
export default {
bind: function (el, binding) {
el.innerHTML = Time.getFormatTime(binding.value);
el._timeout_ = setInterval(function () {
el.innerHTML = Time.getFormatTime(binding.value);
}, 1000);
},
unbind:function(el){
clearInterval(el._timeout_);
delete el._timeout_;
}
}copy.js:
let listenAction
export default {
inserted(el, binding) {
const params = binding.value || {}
const stickyTop = params.stickyTop || 0
const zIndex = params.zIndex || 1000
const elStyle = el.style
elStyle.position = '-webkit-sticky'
elStyle.position = 'sticky'
// if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
// if (~elStyle.position.indexOf('sticky')) {
// elStyle.top = `${stickyTop}px`;
// elStyle.zIndex = zIndex;
// return
// }
const elHeight = el.getBoundingClientRect().height
const elWidth = el.getBoundingClientRect().width
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
const parentElm = el.parentNode || document.documentElement
const placeholder = document.createElement('div')
placeholder.style.display = 'none'
placeholder.style.width = `${elWidth}px`
placeholder.style.height = `${elHeight}px`
parentElm.insertBefore(placeholder, el)
let active = false
const getScroll = (target, top) => {
const prop = top ? 'pageYOffset' : 'pageXOffset'
const method = top ? 'scrollTop' : 'scrollLeft'
let ret = target[prop]
if (typeof ret !== 'number') {
ret = window.document.documentElement[method]
}
return ret
}
const sticky = () => {
if (active) {
return
}
if (!elStyle.height) {
elStyle.height = `${el.offsetHeight}px`
}
elStyle.position = 'fixed'
elStyle.width = `${elWidth}px`
placeholder.style.display = 'inline-block'
active = true
}
const reset = () => {
if (!active) {
return
}
elStyle.position = ''
placeholder.style.display = 'none'
active = false
}
const check = () => {
const scrollTop = getScroll(window, true)
const offsetTop = el.getBoundingClientRect().top
if (offsetTop < stickyTop) {
sticky()
} else {
if (scrollTop < elHeight + stickyTop) {
reset()
}
}
}
listenAction = () => {
check()
}
window.addEventListener('scroll', listenAction)
},
unbind() {
window.removeEventListener('scroll', listenAction)
}
}waves.js:
import './waves.css'
const context = '@@wavesContext'
function handleClick(el, binding) {
function handle(e) {
const customOpts = Object.assign({}, binding.value)
const opts = Object.assign({
ele: el, // 波纹作用元素
type: 'hit', // hit 点击位置扩散 center中心点扩展
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
},
customOpts
)
const target = opts.ele
if (target) {
target.style.position = 'relative'
target.style.overflow = 'hidden'
const rect = target.getBoundingClientRect()
let ripple = target.querySelector('.waves-ripple')
if (!ripple) {
ripple = document.createElement('span')
ripple.className = 'waves-ripple'
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
target.appendChild(ripple)
} else {
ripple.className = 'waves-ripple'
}
switch (opts.type) {
case 'center':
ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px'
ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px'
break
default:
ripple.style.top =
(e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop ||
document.body.scrollTop) + 'px'
ripple.style.left =
(e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
document.body.scrollLeft) + 'px'
}
ripple.style.backgroundColor = opts.color
ripple.className = 'waves-ripple z-active'
return false
}
}
if (!el[context]) {
el[context] = {
removeHandle: handle
}
} else {
el[context].removeHandle = handle
}
return handle
}
export default {
bind(el, binding) {
el.addEventListener('click', handleClick(el, binding), false)
},
update(el, binding) {
el.removeEventListener('click', el[context].removeHandle, false)
el.addEventListener('click', handleClick(el, binding), false)
},
unbind(el) {
el.removeEventListener('click', el[context].removeHandle, false)
el[context] = null
delete el[context]
}
}
waves.css:
.waves-ripple {
position: absolute;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.15);
background-clip: padding-box;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 1;
}
.waves-ripple.z-active {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
}在main.js中引入js文件，再进行全局注册：
main.js:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import waves from './directive/waves/waves.js'
Vue.directive('waves', waves)
import copy from './directive/copy.js'
Vue.directive('copy', copy)
import time from './directive/time.js'
Vue.directive('time', time)
new Vue({
render: h => h(App),
}).$mount('#app')
3306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
