Vue+element自定义指令如何实现表格横向拖拽_vue.js_

import Vue from 'vue';

Vue.directive('tableDrag', {     inserted: function(el) {         el = el.getElementsByClassName('el-table__body-wrapper')[0];         el.style.cursor = 'grab';         el.onmousedown = function() {             let gapX = event.clientX;             let startX = el.scrollLeft;             document.onmousemove = function(e) {                 let x = e.clientX - gapX;                 el.scrollLeft = startX - x;                 return false;             };             document.onmouseup = function(e) {                 document.onmousemove = null;                 document.onmouseup = null;             };         };     } });

import '@/assets/js/directives.js';

import copy from './copy' import longpress from './longpress' // 自定义指令 const directives = {   copy,   longpress, }   export default {   install(Vue) {     Object.keys(directives).forEach((key) => {       Vue.directive(key, directives[key])     })   }, }

import Vue from 'vue' import Directives from './JS/directives' Vue.use(Directives)

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 copy

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 longpress

const debounce = {   inserted: function (el, binding) {     let timer     el.addEventListener('keyup', () => {       if (timer) {         clearTimeout(timer)       }       timer = setTimeout(() => {         binding.value()       }, 1000)     })   }, }   export default debounce

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 = {   bind: function (el, binding, vnode) {     // 正则规则可根据需求自定义     var regRule = /[^u4E00-u9FA5|d|a-zA-Z|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 emoji

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
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：在nodeJs中如何修改json文件中的数据_node.js_
                                                                
下一篇：使用echarts柱状图实现select下拉刷新数据_vue.js_