## 下拉懒加载指令v-lazy-loading element-ui 自定义el-select的下拉懒加载指令v-lazy-loading #### 注册 ```javascript import Vue from 'vue' import _lazyLoading from './lazyLoading' const lazyLoading = Vue.directive('lazyLoading', _lazyLoading) export { lazyLoading } ``` #### v-lazy-loading 源码 ```javascript export default { bind(el, binding) { const { value } = binding let elementClass = null let lazyFun = null if (typeof value == 'object') { const { elementClass: _elementClass, lazyFun: _lazyFun } = value // elementClass 元素的class, lazyFun 调用的函数 elementClass = _elementClass lazyFun = _lazyFun } else if (typeof value == 'function'){ lazyFun = value } else { console.err('传参错误') return } // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector(elementClass || '.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll', function () { let {clientHeight, scrollTop, scrollHeight} = this const CONDITION = Math.round(clientHeight + scrollTop) >= scrollHeight if (CONDITION) { debounce(lazyFun(),300) } }) } } function debounce(fn,delay) { // 防抖 var timeout = null; // 创建一个标记用来存放定时器的返回值 return (e) => { clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉 // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数 timeout = setTimeout(() => { fn.apply(this, arguments); }, delay); }; } ``` [搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop](https://www.imooc.com/article/17571) - scrollTop 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置； - scrollHeight 当前不可见部分的元素的高度，，(只读) - clientHeight 可见部分的高度，，(只读) scrollHeight>=clientHeight恒成立，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素 如果元素滚动到底, 下面等式返回true, 没有则返回false `Math.round(clientHeight + scrollTop) >= scrollHeight` #### 在el-select使用v-lazy-loading ```html <el-select class="condition" v-model="filterBoxData" v-lazy-loading="lazyLoadingFun" :filter-method="podSearch" > <el-option v-for="item in selectLists" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> ``` ```javascript lazyLoadingFun() { this.formData.pageIndex++; this.getList(this.formData); }, ``` # 案例四：拖拽 v-drag [Vue 指令实现拖拽功能](https://juejin.im/post/6844903958633267208)  >clientX ：表示鼠标当前的 X 坐标 clientY ：表示鼠标当前的 Y 坐标 那么伪代码就是： disX = 鼠标按下时的 clientX - 鼠标松开时的 clientX disY = 鼠标按下时的 clientY - 鼠标松开时的 clientY  ```javascript import { pauseEvent } from '@/utils/performanceOptimization' export default { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') //dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.style.cssText += ';cursor:move;' dragDom.style.cssText += ';top:0px;' // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = (function () { if (window.document.currentStyle) { return (dom, attr) => dom.currentStyle[attr] } else { return (dom, attr) => getComputedStyle(dom, false)[attr] } })() dialogHeaderEl.onmousedown = (e) => { e = e || window.event pauseEvent(e) // 禁止关闭弹框 vnode.context.dragNotCloseDialog = false // 鼠标按下，计算当前元素距离可视区的距离 const disX = e.clientX - dialogHeaderEl.offsetLeft const disY = e.clientY - dialogHeaderEl.offsetTop const screenWidth = document.body.clientWidth // body当前宽度 const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取) const dragDomWidth = dragDom.offsetWidth // 对话框宽度 const dragDomheight = dragDom.offsetHeight // 对话框高度 const minDragDomLeft = dragDom.offsetLeft const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth const minDragDomTop = dragDom.offsetTop const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight // 获取到的值带px 正则匹配替换 let styL = sty(dragDom, 'left') let styT = sty(dragDom, 'top') // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px if (styL.includes('%')) { styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100) styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100) } else { styL = +styL.replace(/\px/g, '') styT = +styT.replace(/\px/g, '') } let left, top // 防抖-性能优化 let timeout = null dialogHeaderEl.onmousemove = function mouseMove(e) { if (timeout) { clearTimeout(timeout) } timeout = setTimeout(() => { e = e || window.event pauseEvent(e) // 计算移动的距离 left = e.clientX - disX top = e.clientY - disY // 移动当前元素 dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;` }, 1) } document.onmouseup = function (e) { clearTimeout(timeout) dialogHeaderEl.onmousemove = null // 边界处理 if (-left > minDragDomLeft) { left = -minDragDomLeft } else if (left > maxDragDomLeft) { left = maxDragDomLeft } if (-top > minDragDomTop) { top = -minDragDomTop } else if (top > maxDragDomTop) { top = maxDragDomTop } // 移动当前元素 dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;` // 可以关闭弹框 setTimeout(() => { vnode.context.dragNotCloseDialog = true }, 100) document.onmouseup = null } } }, // 卸载时，清除事件绑定 unbind(el) { const header = el.children[0].children[0] header.onmousedown = null } } ``` ```javascript <el-dialog v-drag title="对话框" :visible.sync="dialogVisible"></el-dialog> ``` # 案例五：缩放 v-resize [vue中监听元素的宽高变化(强大的自定义指令)](https://www.jianshu.com/p/44c445c2e4ea) ```javascript directives: { // 使用局部注册指令的方式 resize: { // 指令的名称 bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象 let width = '', height = ''; function isReize() { const style = document.defaultView.getComputedStyle(el); if (width !== style.width || height !== style.height) { binding.value(); // 关键 } width = style.width; height = style.height; } el.__vueSetInterval__ = setInterval(isReize, 300); }, unbind(el) { clearInterval(el.__vueSetInterval__); } } } //然后在html中 <div v-resize="resize"></div> // 绑定的resize是一个函数 //在methods中 resize() { // 当宽高变化时就会执行 //执行某些操作 } ``` ```javascript const myChart = echarts.init(document.getElementById(id)) **** myChart.resize() ``` # 案例六：复制 v-copy ``` import { Message } from 'element-ui' const _copy = { bind (el, { value }) { el.$value = value el.handler = () => { if (!el.$value) { Message.warning('无复制内容') return } const textarea = document.createElement('textarea') textarea.readOnly = 'readonly' textarea.style.position = 'absolute' textarea.style.left = '-9999px' textarea.value = el.$value document.body.appendChild(textarea) textarea.select() const result = document.execCommand('Copy') if (result) { Message.success('已复制到剪切板') } document.body.removeChild(textarea) } el.addEventListener('click', el.handler) }, // 当传进来的值更新的时候触发 componentUpdated (el, { value }) { el.$value = value }, // 指令与元素解绑的时候，移除事件绑定 unbind (el) { el.removeEventListener('click', el.handler) } } export default _copy ```