vue点击复制文本代码 vue文本旁边添加复制按钮使用( 三 ) _生活百科

< 0 && elBtm > 0) {if (realSrc) {el.src = realSrcel.removeAttribute(/'data-src\')}}},// 节流throttle(fn, delay) {let timerlet prevTimereturn function (...args) {const currTime = Date.now()const context = thisif (!prevTime) prevTime = currTimeclearTimeout(timer)if (currTime - prevTime > delay) {prevTime = currTimefn.apply(context, args)clearTimeout(timer)return}timer = setTimeout(function () {prevTime = Date.now()timer = nullfn.apply(context, args)}, delay)}},} export default LazyLoad使用，将组件内标签的 src 换成 v-LazyLoad
<img v-LazyLoad=\"xxx.jpg\" />v-permission背景：在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理。
需求：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。
思路：

自定义一个权限数组
判断用户的权限是否在这个数组内，如果是则显示，否则则移除 Dom

function checkArray(key) {let arr = [\'1\', \'2\', \'3\', \'4\']let index = arr.indexOf(key)if (index > -1) {return true // 有权限} else {return false // 无权限}} const permission = {inserted: function (el, binding) {let permission = binding.value // 获取到 v-permission的值if (permission) {let hasPermission = checkArray(permission)if (!hasPermission) {// 没有权限 移除Dom元素el.parentNode && el.parentNode.removeChild(el)}}},} export default permission

使用：给 v-permission 赋值判断即可

<div class=\"btns\"><button v-permission=\"\'1\'\">权限按钮1</button><button v-permission=\"\'10\'\">权限按钮2</button></div>

vue-waterMarker需求：给整个页面添加背景水印
思路：

使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
将其设置为背景图片，从而实现页面或组件水印效果

function addWaterMarker(str, parentNode, font, textColor) {// 水印文字，父元素，字体，文字颜色var can = document.createElement(\'canvas\')parentNode.appendChild(can)can.width = 200can.height = 150can.style.display = \'none\'var 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\') + \')\'} const waterMarker = {bind: function (el, binding) {addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)},} export default waterMarker

设置需要拖拽的元素为相对定位，其父元素为绝对定位。
鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
鼠标松开(onmouseup)时完成一次拖拽

const draggable = {inserted: function (el) {el.style.cursor = \'move\'el.onmousedown = function (e) {let disx = e.pageX - el.offsetLeftlet disy = e.pageY - el.offsetTopdocument.onmousemove = function (e) {let x = e.pageX - disxlet y = e.pageY - disylet maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(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\'el.style.top = y + \'px\'}document.onmouseup = function () {document.onmousemove = document.onmouseup = null}}},}export default draggable

使用: 在 Dom 上加上 v-draggable 即可
【vue点击复制文本代码 vue文本旁边添加复制按钮使用】<template><div class=\"el-dialog\" v-draggable></div></template>