vue 项⽬中常⽤⾃定义指令的使⽤⼀、vue项⽬中使⽤⾃定义指令
1、在src⽬录下新建directives/index.js
import copy from './js/copy';
import longPress from './js/longPress';
import debounce from './js/debounce';
import inputNumber from './js/inputNumber';
import waterMarker from './js/waterMarker';
import draggable from './js/draggable';
const directives = {
copy,
longPress,
debounce,
inputNumber,
waterMarker,
draggable
}
export default {
install(Vue){
Object.keys(directives).forEach(key=>{
Vue.directive(key, directives[key])
})
}
}
2、在 main.js 引⼊并调⽤
//引⼊⾃定义指令
import Vue from 'vue'
import Directives from './directives/index';
Vue.use(Directives);
⼆、项⽬中⼏个常⽤⾃定义指令
1、v-copy
/*
需求：实现⼀键复制⽂本内容，⽤于⿏标右键粘贴。
思路：
1、动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域
2、将要复制的值赋给 textarea 标签的 value 属性，并插⼊到 body
3、选中值 textarea 并复制
4、将 body 中插⼊的 textarea 移除
5、在第⼀次调⽤时绑定事件，在解绑时移除事件
使⽤：给 Dom 加上 v-copy 及复制的⽂本即可
例⼦：<button v-copy="copyText">⼀键复制</button>
*/
export default {
bind(el, { value }) {
el.$value = value
el.handler = () => {
if (!el.$value) {
// 值为空的时候，给出提⽰。可根据项⽬UI仔细设计
console.log('⽆复制内容')
return
}
// 动态创建 textarea 标签
const textarea = ateElement('textarea')
// 将该 textarea 设为 readonly 防⽌ iOS 下⾃动唤起键盘，同时将 textarea 移出可视区域
textarea.style.position = 'absolute'
textarea.style.left = '-9999px'
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = el.$value
// 将 textarea 插⼊到 body 中
document.body.appendChild(textarea)
// 选中值并复制
textarea.select()
const result = Command('Copy')
if (result) {
console.log('复制成功') // 可根据项⽬UI仔细设计
}
js教程removechildveChild(textarea)
}
// 绑定点击事件，就是所谓的⼀键 copy 啦
el.addEventListener('click', el.handler)
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候，移除事件绑定
unbind(el) {
},
}
2、v-debounce
/*
需求：防⽌按钮在短时间内被多次点击，使⽤防抖函数限制规定时间内只能点击⼀次。
思路：
1、第⼀次点击，⽴即调⽤⽅法并禁⽤按钮，等延迟结束再次激活按钮
2、将需要触发的⽅法绑定在指令上
使⽤：给 Dom 加上 v-debounce 及回调函数即可
<button v-debounce="debounceClick">防抖提交</button>
*/
export default {
inserted: function (el, binding) {
let timer
el.addEventListener('click', () => {
if (timer) {
clearTimeout(timer)
}
if (!el.disabled) {
el.disabled = true;
binding.value();
timer = setTimeout(() => {
el.disabled = false
}, 1000)
}
})
},
}
3、v-longPress
/*
需求：实现长按，⽤户需要按下并按住按钮⼏秒钟，触发相应的事件
思路：
1、创建⼀个计时器， 2 秒后执⾏函数
2、当⽤户按下按钮时触发 mousedown 事件，启动计时器；⽤户松开按钮时调⽤ mouseout 事件。
3、如果 mouseup 事件 2 秒内被触发，就清除计时器，当作⼀个普通的点击事件
4、如果计时器没有在 2 秒内清除，则判定为⼀次长按，可以执⾏关联的函数。
5、在移动端要考虑 touchstart，touchend 事件
使⽤：<button v-longpress="longpress">长按</button>
*/
export default {
bind: function (el, binding) {
if (typeof binding.value !== 'function') {
throw 'callback must be a function'
}
// 定义变量
let pressTimer = null
// 创建计时器（ 2秒后执⾏函数）
let start = (e) => {
if (e.type === 'click' && e.button !== 0) {
return
}
if (pressTimer === null) {
pressTimer = setTimeout(() => {
handler()
}, 2000)
}
}
// 取消计时器
let cancel = (e) => {
if (pressTimer !== null) {
clearTimeout(pressTimer)
pressTimer = null
}
}
// 运⾏函数
const handler = (e) => {
binding.value(e)
}
// 添加事件
el.addEventListener('mousedown', start)
el.addEventListener('touchstart', start)
// 取消计时器
el.addEventListener('click', cancel)
el.addEventListener('mouseout', cancel)
el.addEventListener('touchend', cancel)
el.addEventListener('touchcancel', cancel)
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候，移除事件绑定
unbind(el) {
}
}
4、v-inputNumber
/
*
需求：根据正则表达式，设计⾃定义处理表单输⼊规则的指令，这⾥只能输⼊正整数使⽤：将需要校验的输⼊框加上 v-inputNumber 即可
<input type="text" v-model="note" v-inputNumber />
*/
let findEle = (parent, type) => {
return LowerCase() === type ? parent : parent.querySelector(type) }
const trigger = (el, type) => {
const e = ateEvent('HTMLEvents')
e.initEvent(type, true, true)
el.dispatchEvent(e)
}
export default {
bind: function (el, binding, vnode) {
// 正则规则可根据需求⾃定义
var regRule = /[^0-9]/g
let $inp = findEle(el, 'input')
el.$inp = $inp
$inp.handle = function () {
let val = $inp.value
$inp.value = place(regRule, '')
trigger($inp, 'input')
}
$inp.addEventListener('keyup', $inp.handle)
},
unbind: function (el) {
el.$veEventListener('keyup', el.$inp.handle)
}
}
5、v-waterMarker
/*
需求：给整个页⾯添加背景⽔印。
思路：
1、使⽤ canvas 特性⽣成 base64 格式的图⽚⽂件，设置其字体⼤⼩，颜⾊等。
2、将其设置为背景图⽚，从⽽实现页⾯或组件⽔印效果
使⽤：设置⽔印⽂案，颜⾊，字体⼤⼩即可
<div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
*/
function addWaterMarker(str, parentNode, font, textColor) {
// ⽔印⽂字，⽗元素，字体，⽂字颜⾊
var can = ateElement('canvas')
parentNode.appendChild(can)
can.width = 200
can.height = 150
can.style.display = 'none'
var cans = Context('2d')
cans.font = font || '16px Microsoft JhengHei'
cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
cans.fillText(str, can.width / 10, can.height / 2)
parentNode.style.backgroundImage = 'url(' + DataURL('image/png') + ')'
}
export default {
bind: function (el, binding) {
addWaterMarker(, el, binding.value.font, Color)
}
}
6、v-draggable
/*
需求：实现⼀个拖拽指令，可在⽗元素区域任意拖拽元素。
思路：
1、设置需要拖拽的元素为absolute，其⽗元素为relative。
2、⿏标按下(onmousedown)时记录⽬标元素当前的 left 和 top 值。
3、⿏标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
4、⿏标松开(onmouseup)时完成⼀次拖拽
使⽤：在 Dom 上加上 v-draggable 即可
<div class="dialog-model" v-draggable></div>
*/
export default {
inserted: function (el) {
el.style.cursor = 'move';
el.style.position="absolute";
let disx = e.pageX - el.offsetLeft
let disy = e.pageY - el.offsetTop
let x = e.pageX - disx
let y = e.pageY - disy
let maxX = ComputedStyle(el.parentNode).width) - ComputedStyle(el).width) let maxY = ComputedStyle(el.parentNode).height) - ComputedStyle(el).height) if (x < 0) {
x = 0
} else if (x > maxX) {
x = maxX
}
if (y < 0) {
y = 0
} else if (y > maxY) {
y = maxY
}
el.style.left = x + 'px'
p = y + 'px'
}
}
}
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论