911制品

《抄出来的经典之作:老夫子冲网易订阅》剧情介绍：刘欣咬着嘴唇眼中闪烁着复杂的光芒："我...我有点想要这个孩子"方源先调度一股意志来到天意面前抄出来的经典之作:老夫子冲网易订阅在拿到亚运会的冠军后覃海洋的内心更是激动不已；

《抄出来的经典之作:老夫子冲网易订阅》视频说明：就连旁观的天庭八转蛊仙陈衣也觉得是这样在他眼中这个智道蛊仙算不尽还有点倒霉摊上这种事情踏板318GT的推出无疑为国产摩托车市场注入了一股新鲜血液它的魅力不仅在于强大的动力和优雅的外观更在于它所承载的自由与梦想作为摩旅新宠318GT在未来的市场中将面临机遇与挑战曾几何时,蔡轩正也质疑过自己是否一错再错地走上了这条路毕竟,编程之路崎岖无比,常常需要付出比别人更多的汗水和泪水

Vue自定义指令2021-04-14 12:13·前端Cold除了核心功能默认内置的指令 (v-model 和 v-show)Vue 也允许注册自定义指令自动注册指令新建 directives/index.js文件import copy from './copy'import longpress from './longpress'import permission from './permission'import debounce from './debounce'import emoji from './emoji'import LazyLoad from './LazyLoad'import waterMarker from './waterMarker'import draggable from './draggable'// 自定义指令const directives = copy, longpress, permission, debounce, emoji, LazyLoad, waterMarker, draggableexport default install(Vue) { Object.keys(directives).forEach((key) => { Vue.directive(key, directives[key]) ) },}在 main.js 文件引入import Vue from 'vue'import directives from '@/directives'Vue.use(directives)v-copy实现一键复制文本内容用于鼠标右键粘贴动态创建 textarea 标签并设置 readOnly 属性及移出可视区域将要复制的值赋给 textarea 标签的 value 属性并插入到 body选中值 textarea 并复制将 body 中插入的 textarea 移除在第一次调用时绑定事件在解绑时移除事件const copy = bind(el, { value ) el.$value = value el.handler = () => { if (!el.$value) { // 值为空的时候给出提示可根据项目UI仔细设计 console.log('无复制内容') return // 动态创建 textarea 标签 const textarea = document.createElement('textarea') // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘同时将 textarea 移出可视区域 textarea.readOnly = 'readonly' 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 = document.execCommand('Copy') if (result) console.log('复制成功') // 可根据项目UI仔细设计 document.body.removeChild(textarea) } // 绑定点击事件就是所谓的一键 copy 啦 el.addEventListener('click', el.handler) }, // 当传进来的值更新的时候触发 componentUpdated(el, value ) el.$value = value , // 指令与元素解绑的时候移除事件绑定 unbind(el) el.removeEventListener('click', el.handler) ,}export default copyv-longpress实现长按用户需要按下并按住按钮几秒钟触发相应的事件创建一个计时器 2 秒后执行函数当用户按下按钮时触发 mousedown 事件启动计时器；用户松开按钮时调用 mouseout 事件如果 mouseup 事件 2 秒内被触发就清除计时器当作一个普通的点击事件如果计时器没有在 2 秒内清除则判定为一次长按可以执行关联的函数在移动端要考虑 touchstarttouchend 事件const longpress = bind: function (el, binding, vNode) { 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) el.removeEventListener('click', el.handler) ,}export default longpressv-debounce防止按钮在短时间内被多次点击使用防抖函数限制规定时间内只能点击一次定义一个延迟执行的方法如果在延迟时间内再调用该方法则重新计算执行时间将时间绑定在 click 方法上const debounce = inserted: function (el, binding) { let timer el.addEventListener('keyup', () => { if (timer) { clearTimeout(timer) timer = setTimeout(() => binding.value() , 1000) }) },}export default debouncev-emoji开发中遇到的表单输入往往会有对输入内容的限制比如不能输入表情和特殊字符只能输入数字或字母等根据正则表达式设计自定义处理表单输入规则的指令下面以禁止输入表情和特殊字符为例let findEle = (parent, type) => return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)const trigger = (el, type) => const e = document.createEvent('HTMLEvents') e.initEvent(type, true, true) el.dispatchEvent(e)const emoji = rns,.?!…—&$=()-+/*{[]]|s/g let $inp = findEle(el, 'input') el.$inp = $inp $inp.handle = function () let val = $inp.value $inp.value = val.replace(regRule, '') trigger($inp, 'input') $inp.addEventListener('keyup', $inp.handle) }, unbind: function (el) el.$inp.removeEventListener('keyup', el.$inp.handle) ,}export default emojiv-LazyLoad实现一个图片懒加载指令只加载浏览器可见区域的图片图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的拿到所有的图片 Dom 遍历每个图片判断当前图片是否到了可视区范围内如果到了就设置图片的 src 属性否则显示默认图片图片懒加载有两种方式可以实现一是绑定 srcoll 事件进行监听二是使用 IntersectionObserver 判断图片是否到了可视区域但是有浏览器兼容性问题下面封装一个懒加载指令兼容两种方法判断浏览器是否支持 IntersectionObserver API如果支持就使用 IntersectionObserver 实现懒加载否则则使用 srcoll 事件监听 + 节流的方法实现const LazyLoad = // install方法 install(Vue, options) { const defaultSrc = options.default Vue.directive('lazy', { bind(el, binding) { LazyLoad.init(el, binding.value, defaultSrc) , inserted(el) if (IntersectionObserver) { LazyLoad.observe(el) else LazyLoad.listenerScroll(el) }, }) }, // 初始化 init(el, val, def) el.setAttribute('data-src', val) el.setAttribute('src', def) , // 利用IntersectionObserver监听el observe(el) var io = new IntersectionObserver((entries) => { const realSrc = el.dataset.src if (entries[0].isIntersecting) { if (realSrc) { el.src = realSrc el.removeAttribute('data-src') } }) io.observe(el) }, // 监听scroll事件 listenerScroll(el) const handler = LazyLoad.throttle(LazyLoad.load, 300) LazyLoad.load(el) window.addEventListener('scroll', () => { handler(el) ) }, // 加载真实图片 load(el) const windowHeight = document.documentElement.clientHeight const elTop = el.getBoundingClientRect().top const elBtm = el.getBoundingClientRect().bottom const realSrc = el.dataset.src if (elTop - windowHeight < 0 && elBtm > 0) { if (realSrc) { el.src = realSrc el.removeAttribute('data-src') } }, // 节流 throttle(fn, delay) let timer let prevTime return function (...args) { const currTime = Date.now() const context = this if (!prevTime) prevTime = currTime clearTimeout(timer) if (currTime - prevTime > delay) { prevTime = currTime fn.apply(context, args) clearTimeout(timer) return timer = setTimeout(function () prevTime = Date.now() timer = null fn.apply(context, args) , delay) } },}export default LazyLoadv-permission自定义一个权限指令对需要权限判断的 Dom 进行显示隐藏获取一个权限数组数据判断用户的权限是否在这个数组内如果是则显示否则则移除 Domimport Store from '@/store'const permission = inserted: function (el, binding) { const value = binding.value; if (value) { const permission = Store.getters.permission; if (!permission.includes(value)) { el.parentNode && el.parentNode.removeChild(el) } },}export default permission