常见自定义指令
一、响应缩放指令
- 使用
<div v-resize="resize"></div>
- 代码
/**
* 响应缩放指令
* @direction 使用该指令可以响应元素宽高改变时执行的方法。
* @resize {function} 传入对应resize方法
* v-resize="resize"
**/
export default {
bind(el, binding) {
let width = '', height = '';
function isResize() {
const style = document.defaultView.getComputedStyle(el);
if (width !== style.width || height !== style.height) {
binding.value(); // 执行传入的方法
}
width = style.width;
height = style.height;
}
el.__timer__ = setInterval(isResize, 300); // 周期性监听元素是否改变
},
unbind(el) {
clearInterval(el.__timer__);
}
}
二、元素点击范围扩展指令
- 使用
<div v-expandClick="20,30,40,50"></div>
- 代码
/**
* 元素点击范围扩展指令
* @direction 使用该指令可以隐式的扩展元素的点击范围,由于借用伪元素实现,故不会影响元素在页面上的排列布局。法。
* @top {string} 上扩展的范围,单位 px,默认向外扩展 10px
* @right {string} 右扩展的范围,单位 px,默认向外扩展 10px
* @bottom {string} 下扩展的范围,单位 px,默认向外扩展 10px
* @left {string} 左扩展的范围,单位 px,默认向外扩展 10px
* v-expandClick="top, right, bottom, left" (10, 10, 10, 10)
**/
export default {
bind(el, binding) {
const s = document.styleSheets[document.styleSheets.length - 1]
const DEFAULT = -10 // 默认向外扩展10px
const ruleStr = `content:"";position:absolute;top:-${top || DEFAULT}px;bottom:-${bottom || DEFAULT}px;right:-${right || DEFAULT}px;left:-${left || DEFAULT}px;`
const [top, right, bottom, left] = binding.expression && binding.expression.split(',') || []
const classNameList = el.className.split(' ')
el.className = classNameList.includes('expand_click_range') ? classNameList.join(' ') : [...classNameList, 'expand_click_range'].join(' ')
el.style.position = el.style.position || 'relative'
if (s.insertRule) {
s.insertRule('.expand_click_range::before' + '{' + ruleStr + '}', s.cssRules.length)
} else { /* IE */
s.addRule('.expand_click_range::before', ruleStr, -1)
}
}
}
三、文本内容复制指令
- 使用
<div v-copy> 单击复制 </div>
<div v-copy.dblclick> 双击复制 </div>
<div v-copy.icon> icon复制 </div>
- 代码
/**
* 文本内容复制指令
* @direction 使用该指令可以复制元素的文本内容(指令支持单击复制 v-copy、双击复制 v-copy.dblclick、点击icon复制 v-copy.icon三种模式),不传参数时,默认使用单击复制。
* @dblclick {string} dblclick 双击复制文本内容
* @icon {string} icon 单击icon复制文本内容
* v-copy 单击复制
* v-copy.dblclick 双击复制
* v-copy.icon icon复制
**/
export default {
bind(el, binding) {
// 双击触发复制
if (binding.modifiers.dblclick) {
el.addEventListener('dblclick', () => handleClick(el.innerText))
el.style.cursor = 'copy'
} else if (binding.modifiers.icon) { // 点击icon触发复制
if (el.hasIcon) return
const iconElement = document.createElement('i')
iconElement.setAttribute('class', 'el-icon-document-copy')
iconElement.setAttribute('style', 'margin-left:5px')
el.appendChild(iconElement)
el.hasIcon = true
iconElement.addEventListener('click', () => handleClick(el.innerText))
iconElement.style.cursor = 'copy'
} else { // 单击触发复制
el.addEventListener('click', () => handleClick(el.innerText))
el.style.cursor = 'copy'
}
}
}
四、元素说明指令
- 使用
<div v-tooltip:content='tootipParams'> 提示 </div>
- 代码
/**
* 元素说明指令
* @direction 为元素添加说明,同 element-ui 的el-tooltip
* @content {string} 传给指令的参数
* @tooltipParams {Object} element-ui 支持的 tooltip属性
* v-tooltip:content='tooltipParams'
**/
import Vue from 'vue'
function structureIcon(content, attrs) {
// 拼接绑定属性
let attrStr = ''
for (const key in attrs) {
attrStr += `${key}=${attrs[key]} `
}
const a = `<el-tooltip content=${content} ${attrStr}><i class="el-icon-question" style="margin:0 10px"></i></el-tooltip>`
// 创建构造器
const tooltip = Vue.extend({
template: a
})
// 创建一个 tooltip 实例并返回 dom 节点
const component = new tooltip().$mount()
return component.$el
}
export default {
bind(el, binding) {
if (el.hasIcon) return
const iconElement = structureIcon(binding.arg, binding.value)
el.appendChild(iconElement)
el.hasIcon = true
}
}
五、文字超出省略指令
- 使用
<div v-ellipsis:100> 需要省略的文字是阿萨的副本阿萨的副本阿萨的副本阿萨的副本</div>
- 代码
/**
* 文字超出省略指令
* @direction 使用该指令当文字内容超出宽度。
* @width {number} 元素宽度
* v-ellipsis:width
**/
export default {
bind(el, binding) {
el.style.width = binding.arg || 100 + 'px'
el.style.whiteSpace = 'nowrap'
el.style.overflow = 'hidden';
el.style.textOverflow = 'ellipsis';
}
}
六、回到顶部指令
- 使用
<div v-backtop:app="400"> 回到顶部 </div>
- 代码
/**
* 回到顶部指令
* @direction 使用该指令可以让页面或指定元素回到顶部。
* @id {string} 给需要回到顶部的元素添加的id
* @offset {number} 偏移距离为 height 时显示指令绑定的元素
* v-backtop:id="offset"
**/
export default {
bind(el, binding, vnode) {
// 响应点击后滚动到元素顶部
el.addEventListener('click', () => {
const target = binding.arg ? document.getElementById(binding.arg) : window
target.scrollTo({
top: 0,
behavior: 'smooth'
})
})
},
update(el, binding, vnode) {
// 滚动到达参数值才出现绑定指令的元素
const target = binding.arg ? document.getElementById(binding.arg) : window
if (binding.value) {
target.addEventListener('scroll', (e) => {
if (e.srcElement.scrollTop > binding.value) {
el.style.visibility = 'unset'
} else {
el.style.visibility = 'hidden'
}
})
}
// 判断初始化状态
if (target.scrollTop < binding.value) {
el.style.visibility = 'hidden'
}
},
unbind(el, binding) {
const target = binding.arg ? document.getElementById(binding.arg) : window
target.removeEventListener('scroll')
el.removeEventListener('click')
}
}
七、拖拽指令
- 使用
<div v-drag> 支持拖拽的元素 </div>
- 代码
/**
* 拖拽指令
* @direction 使用该指令可以对元素进行拖拽。
* v-drag=“[width, height]”
**/
export default {
inserted(el, binding) {
let { value } = binding;
if (!value || value.length === 0) value = [0, 0]
el.style.cursor = 'move'
el.onmousedown = function(e) {
const disx = e.pageX - el.offsetLeft
const disy = e.pageY - el.offsetTop
document.onmousemove = function(e) {
let x = e.pageX - disx
let y = e.pageY - disy
const maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width) - value[0]
const maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height) - value[1]
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'
el.style.top = y + 'px'
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null
}
}
}
}
八、长按指令
- 使用
<div v-longpress="longPress"></div>
- 代码
/**
* 长按指令
* @direction 实现长按,用户需要按下并按住按钮几秒钟,触发相应的事件
* @longPress {function} 长按的回调
* v-longpress="longPress"
**/
export default {
bind: function(el, binding, vNode) {
if (typeof binding.value !== 'function') {
throw 'callback must be a function'
}
// 定义变量
let pressTimer = null
// 创建计时器( 2秒后执行函数 )
const start = (e) => {
if (e.type === 'click' && e.button !== 0) {
return
}
if (pressTimer === null) {
pressTimer = setTimeout(() => {
handler()
}, 2000)
}
}
// 取消计时器
const 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) {
el.removeEventListener('click', el.handler)
}
}
九、防抖指令
- 使用
<el-button v-debounce="debounceClick"> 防抖 </el-button>
- 代码
/**
* 防抖指令
* @direction 防止按钮在短时间内被多次点击,使用防抖函数限制规定时间内只能点击一次。
* @debounceClick {function} 按钮的点击事件
* v-debounce="debounceClick"
**/
export default {
inserted(el, binding) {
let timer
el.addEventListener('keyup', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value()
}, 1000)
})
}
}
十、水印指令
- 使用
<div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)', font:'16px Microsoft JhengHei'}"></div>
- 代码
/**
* 水印指令
* @direction 给整个页面添加背景水印
* @data {Object} 水印文案,颜色,字体
* v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)', font:'16px Microsoft JhengHei'}"
**/
function addWaterMarker(str, parentNode, font, textColor) {
// 水印文字,父元素,字体,文字颜色
const can = document.createElement('canvas')
parentNode.appendChild(can)
can.width = 200
can.height = 150
can.style.display = 'none'
const cans = can.getContext('2d')
cans.rotate((-20 * Math.PI) / 180)
cans.font = font || '16px Microsoft JhengHei'
cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
cans.textAlign = 'left'
cans.textBaseline = 'Middle'
cans.fillText(str, can.width / 10, can.height / 2)
parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}
export default {
bind(el, binding) {
addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
}
}
十一、懒加载指令select
- 使用
<el-select v-loadselect="loadmore"></el-select>
- 代码
/**
* el-select懒加载指令
* @direction 下拉框数据较多,需要下拉的时候懒加载数据
* @load {function} 懒加载调用方法
* v-loadselect="load"
**/
export default {
inserted(el, binding) {
const selectWarpDom = el.querySelector(
'.el-select-dropdown .el-select-dropdown__wrap'
)
selectWarpDom.addEventListener('scroll', function() {
if (this.scrollHeight - this.scrollTop <= this.clientHeight) {
binding.value()
}
})
}
}
十二、徽标指令
- 使用
<div v-badge.dot.info="10"></div>
>
- 代码
/**
* 徽标指令
* @direction 使用该指令在元素右上角显示徽标。
* @shape {string} 形状 [normal(正常徽标), dot(仅展示一个点)]
* @type {string} 徽标颜色类型 [success, error, info, warning]
* @num {number} 懒加载调用方法
* v-badge.shape.type="num"
**/
import Vue from 'vue'
const SUCCESS = '#72c140'
const ERROR = '#ed5b56'
const WARNING = '#f0af41'
const INFO = '#4091f7'
const HEIGHT = 20
let flag = false
export default {
update(el, binding, vnode) {
const { modifiers, value } = binding
const modifiersKey = Object.keys(modifiers)
const isDot = modifiersKey.includes('dot')
let backgroundColor = ''
if (modifiersKey.includes('success')) {
backgroundColor = SUCCESS
} else if (modifiersKey.includes('warning')) {
backgroundColor = WARNING
} else if (modifiersKey.includes('info')) {
backgroundColor = INFO
} else {
backgroundColor = ERROR
}
const targetTemplate = isDot
? `<div style="position:absolute;top:-5px;right:-5px;height:10px;width:10px;border-radius:50%;background:${backgroundColor}"></div>`
: `<div style="background:${backgroundColor};position:absolute;top:-${HEIGHT / 2}px;right:-${HEIGHT / 2}px;height:${HEIGHT}px;min-width:${HEIGHT}px;border-radius:${HEIGHT / 2}px;text-align:center;line-height:${HEIGHT}px;color:#fff;padding:0 5px;">${value}</div>`
el.style.position = el.style.position || 'relative'
const badge = Vue.extend({
template: targetTemplate
})
const component = new badge().$mount().$el
if (flag) {
el.removeChild(el.lastChild)
}
el.appendChild(component)
flag = true
}
}
十三、空状态指令
- 使用
<div v-empty="emptyValue" style="height:500px;width:500px"> 原本内容 </div>
- 代码
/**
* 空状态指令
* @direction 使用该指令可以显示缺省的空状态, 可以传入默认图片(可选,默认无图片)、默认文字内容(可选,默认为暂无数据)、以及标示是否显示空状态(必选)。
* @emptyValue {Object} 懒加载调用方法
* @content: '暂无列表', 可选
* @img: require('../../assets/images/xxx.png'), 可选
* @visible: 'true', 是否显示. 必传
* v-empty="emptyValue "
**/
import Vue from 'vue';
export default {
update(el, binding, vnode) {
el.style.position = el.style.position || 'relative'
const { offsetHeight, offsetWidth } = el
const { visible, content, img } = binding.value
const image = img ? `<img src="${img}" height="30%" width="30%">` : ''
const defaultStyle = 'position:absolute;top:0;left:0;z-index:9999;background:#fff;display:flex;justify-content: center;align-items: center;'
const empty = Vue.extend({
template: `<div style="height:${offsetHeight}px;width:${offsetWidth}px;${defaultStyle}">
<div style="text-align:center">
<div>${image}</div>
<div>${content || '暂无数据'}</div>
</div>
</div>`
})
const component = new empty().$mount().$el
if (visible) {
el.appendChild(component)
} else {
el.removeChild(el.lastChild)
}
}
}
十四、输入框聚焦指令
- 使用
<div v-focus></div>
- 代码
/**
* 输入框聚焦指令
* @direction 页面加载时,输入框自动聚焦。
* v-focus
**/
export default {
inserted(el) {
// 聚焦元素
el.focus()
}
}
文章来源地址https://www.toymoban.com/news/detail-474259.html
文章来源:https://www.toymoban.com/news/detail-474259.html
到了这里,关于vue常见自定义指令的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!