• vue学习（6）自定义指令详解及常见自定义指令

    1、钩子函数

    bind : 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。（常用）

    inserted : 被绑定元素插入父节点时调用(保证父节点存在，但不一定已被插入文档中)。（常用）

    update : 所在组件的VNode更新时调用,但是可能发生在其子VNode更新之前。 指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新(详细的钩子函数参数下见)。（基本没咋用）

    componentUpdated : 指令所在组件的VNode 及其子 VNode 全部更新后调用。（基本没咋用）

    unbind : 只调用一次，指令与元素解绑时调用。（常用）

    2、钩子函数参数

    el : 指令所绑定的元素，可以用来直接操作DOM。（常用）

    binding : 一个对象，包含以下属性：（常用）

    1. name : 指令名，不包括 v- 前缀。
    2.  
    3. value : 指令表达式的最终返回结果
    4.  
    5. oldValue ：指令表达式的最终返回结果前一个值，仅在 update 和 componentUpdated 钩子中可用。
    6. expression ：表达式。
    7.  
    8. arg ：传给指令的参数，可选。例如 v-copy:foo 中，参数为 "foo"。
    9.  
    10. modifiers ：一个包含修饰符的对象。例如：v-copy:foo.a 中的a

    vnode ：Vue 编译生成的虚拟节点。（基本没咋用）

    oldVnode ：上一个虚拟节点，仅在 update和 componentUpdated 钩子中可用。（基本没咋用）

     

    3、Vue插件机制 install

    1. // directive.js
    2. import directive0 from './directive0'
    3. import directive1 from './directive1'
    4. import directive2 from './directive2'
    5.  
    6. const install = (Vue) => {
    7.   Vue.directive('directive0', copy)
    8.   Vue.directive('directive1', copy)
    9.   Vue.directive('directive2', copy)
    10. }
    11.  
    12. export default {
    13.   install
    14. }
    15.  
    16. // main.js
    17. import directive from './directive'
    18.  
    19. Vue.use(directive)

    4、常见自定义指令

    1、复制输入框的值 v-copy（已实测可行）

    调用：

    2. <script>
    3. export default {
    4.     data () {
    5.         return {
    6.             url: 'xxx'
    7.         }
    8.     }
    9. }
    10. script>

    代码：

    1. const copy = {
    2.   /**
    3.    * 初始化
    4.    * @param {DOM} el 指令所绑定的元素DOM节点
    5.    * @param {*} value 指令的绑定值 即 v-copy="value" 的value值
    6.    */
    7.   bind(el, { value }) {
    8.       // 给元素赋值一个$value值,即指令绑定的值
    9.       el.$value = value
    10.       el.handler = () => {
    11.           // 如果可复制的值为空的时候，给出提示；
    12.           if (!el.$value) {
    13.               console.log('无复制内容')
    14.               return
    15.           }
    16.           // 动态创建 textarea 标签
    17.           const textarea = document.createElement('textarea');
    18.           // 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
    19.           textarea.readOnly = 'readonly';
    20.           textarea.style.position = 'absolute';
    21.           textarea.style.left = '-9999px';
    22.           // 将要copy的值赋值给textarea 标签的value属性
    23.           textarea.value = el.$value;
    24.           // 将textarea 插入到body中
    25.           document.body.appendChild(textarea);
    26.           // 选中值并复制
    27.           textarea.select()
    28.           const result = document.execCommand('Copy');
    29.           if (result) {
    30.               console.log('复制成功');
    31.           }
    32.           document.body.removeChild(textarea);
    33.       }
    34.       // 绑定点击事件，点击的时候copy值
    35.       el.addEventListener('click', el.handler);
    36.   },
    37.   // 当传递进来的值更新的时候触发
    38.   componentUpdated(el, { value }) {
    39.       el.$value = value;
    40.   },
    41.   // 指令与元素解绑的时候，移除事件绑定
    42.   unbind(el) {
    43.       el.removeEventListener('click', el.handler);
    44.   }
    45. }
    46.  
    47. export default copy;

    2、长按屏幕 v-longpress（已实测可行）

    调用：直接v-longpress则默认长按1秒执行函数，当然也可以自己传参，单位为毫秒

    2.  
    3. <script>
    4. export default {
    5.     methods: {
    6.         longpress() {
    7.             // xxx
    8.         }
    9.     }
    10. }
    11. script>

     代码：

    1. /**
    2.  * 1. 创建一个计时器，n s 后执行函数
    3.  * 2. 当用户按下按钮时触发 mousedown 事件，启动计时器；
    4.  *    用户松开按钮时调用 mouseout 事件。
    5.  * 3. 如果 mouseup 事件 n s内被触发，就清除计时器，当作一个普通的点击事件。
    6.  * 4. 如果 计时器没有在n s内清除，则判定为移除长按，可以执行关联的函数。
    7.  * 5. 在移动端要考虑 touchstart, touchend 事件。
    8.  */
    9.  const longpress = {
    10.   bind (el, binding) {
    11.       if (typeof binding.value !== 'function') {
    12.           throw 'callback must be a function'
    13.       }
    14.       const time = binding.arg || 1000 // n秒后执行，默认1秒
    15.       let pressTimer = null
    16.       // 创建计时器(1s后执行函数)
    17.       let start = e => {
    18.           if (e.type === 'click' && e.button !== 0) return
    19.           if (pressTimer === null) {
    20.               pressTimer = setTimeout(() => {
    21.                   handler()
    22.               }, time)
    23.           }
    24.       }
    25.       // 取消计时器
    26.       let cancel = e => {
    27.           if (pressTimer !== null) {
    28.               clearTimeout(pressTimer)
    29.               pressTimer = null
    30.           }
    31.       }
    32.       // 运行函数
    33.       const handler = e => {
    34.           binding.value()
    35.       }
    36.       // 添加事件监听器
    37.       el.addEventListener('mousedown', start)
    38.       el.addEventListener('touchstart', start)
    39.       // 取消计时器
    40.       el.addEventListener('click', cancel)
    41.       el.addEventListener('mouseout', cancel)
    42.       el.addEventListener('touchend', cancel)
    43.       el.addEventListener('touchcancel', cancel)
    44.   },
    45.   // 当传递进来的值更新的时候触发
    46.   componentUpdated(el, { value }) {
    47.       el.$value = value
    48.   },
    49.   // 指令与元素解绑的时候，移除事件绑定
    50.   unbind(el) {
    51.       el.removeEventListener('click', el.handler)
    52.   }
    53. }
    54.  
    55. export default longpress

    3、 防抖 v-debounce （已实测可行）

    调用：分为立即/非立即防抖，传参方式不同

    2.  
    3. <script>export default {
    4.     methods: {
    5.         debounce() {
    6.             // xxx
    7.         }
    8.     }
    9. }
    10. script>

    代码：

    1. // 在指定的时间段内，多次点击只会执行一次
    2. const debounce = {
    3.   inserted(el ,binding) {
    4.       let timer
    5.       el.addEventListener('click', () => {
    6.           if (timer) {
    7.             clearTimeout(timer)
    8.           }
    9.           // 传值为 v-debounce="{ event: func, delay: 500, immediate: true}"
    10.           if (typeof binding.value !== 'function') {
    11.             const { event, delay = 500, immediate = false } = binding.value
    12.             if (immediate) {
    13.               let now = !timer
    14.               timer = setTimeout(() => {
    15.                 timer = null
    16.               }, delay)
    17.               now && event()
    18.             } else {
    19.               timer = setTimeout(() => {
    20.                 timer = null
    21.                 event()
    22.               }, delay)
    23.             }
    24.           } else {
    25.             // 传值为 v-debounce="func"
    26.             timer = setTimeout(() => {
    27.               binding.value() // 延迟执行回调方法
    28.             }, 1000)
    29.           }
    30.       })
    31.   }
    32. }
    33. export default debounce

    4、 禁止输入框发表情及特殊字符 v-emoji（目前暂不知道怎么用，无法测试）

    调用：

    2. <script>
    3. export default {
    4.     data () {
    5.         return {
    6.             name: ''
    7.         }
    8.     }
    9. }
    10. script>

    代码：

    1.  
    2. let findEle = (parent, type) => {
    3.     return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
    4. }
    5. const trigger = (el, type) => {
    6.     // 创建一个指定类型的事件
    7.     const e = document.createEvent('HTMLEvents') 
    8.     // 定义事件名为 type
    9.     e.initEvent(type, true, true)
    10.     // 触发对象可以是任何元素或其他事件目标
    11.     el.dispatchEvent(e)
    12. }
    13. const emoji = {
    14.     bind: function (el, binding) {
    15.       // 正则规则可根据需求自定义
    16.       var regRule = /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]|\s/g
    17.       let $inp = findEle(el, 'input')
    18.       el.$inp = $inp
    19.       $inp.handle = function () {
    20.         let val = $inp.value
    21.         $inp.value = val.replace(regRule, '')
    22.         trigger($inp, 'input')
    23.       }
    24.       $inp.addEventListener('keyup', $inp.handle)
    25.     },
    26.     unbind: function (el) {
    27.       el.$inp.removeEventListener('keyup', el.$inp.handle)
    28.     },
    29. }
    30.   
    31. export default emoji

    5、页面水印 v-waterMarker（已实测可行）

    调用：

     代码：

    1. /**
    2.  * @param {*} name 文字
    3.  * @param {*} width 文字宽度
    4.  * @param {*} height 文字高度
    5.  * @param {*} color 文字颜色
    6.  */
    7. const waterMarker = {
    8.   bind(el, binding) {
    9.     const { name, width, height, color } = binding.value
    10.     var can = document.createElement('canvas')
    11.     el.appendChild(can)
    12.     can.width = width
    13.     can.height = height
    14.     can.style.display = 'none'
    15.     var cans = can.getContext('2d')
    16.     cans.rotate((-20 * Math.PI) / 180)
    17.     cans.fillStyle = color || 'rgba(180, 180, 180, 0.3)'
    18.     cans.textAlign = 'left'
    19.     cans.textBaseline = 'Middle'
    20.     cans.fillText(name, can.width / 10, can.height / 2)
    21.     el.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
    22.   }
    23. }
    24.  
    25. export default waterMarker

    6、拖拽 v-draggable（已实测可行）

    调用：针对于el-dialog的拖动

    代码：

    1. const draggable = {
    2.   bind(el, binding, vnode) {
    3.     const dialogHeaderEl = el.querySelector('.el-dialog__header') // 点击能拖动的地方
    4.     const dragDom = el.querySelector('.el-dialog') // 被拖动的dom
    5.     dialogHeaderEl.style.cssText += ';cursor:move;'
    6.     dragDom.style.cssText += ';top:0px;'
    7.  
    8.     // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    9.     const getStyle = (function() {
    10.       if (window.document.currentStyle) {
    11.         return (dom, attr) => dom.currentStyle[attr]
    12.       } else {
    13.         return (dom, attr) => getComputedStyle(dom, false)[attr]
    14.       }
    15.     })()
    16.     dialogHeaderEl.onmousedown = (e) => {
    17.       // 鼠标按下，计算当前元素距离可视区的距离
    18.       const disX = e.clientX - dialogHeaderEl.offsetLeft
    19.       const disY = e.clientY - dialogHeaderEl.offsetTop
    20.  
    21.       const dragDomWidth = dragDom.offsetWidth
    22.       const dragDomHeight = dragDom.offsetHeight
    23.  
    24.       const screenWidth = document.body.clientWidth
    25.       const screenHeight = document.body.clientHeight
    26.  
    27.       const minDragDomLeft = dragDom.offsetLeft
    28.       const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
    29.  
    30.       const minDragDomTop = dragDom.offsetTop
    31.       const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
    32.  
    33.       // 获取到的值带px 正则匹配替换
    34.       let styL = getStyle(dragDom, 'left')
    35.       let styT = getStyle(dragDom, 'top')
    36.  
    37.       if (styL.includes('%')) {
    38.         styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
    39.         styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
    40.       } else {
    41.         styL = +styL.replace(/\px/g, '')
    42.         styT = +styT.replace(/\px/g, '')
    43.       }
    44.       document.onmousemove = function(e) {
    45.         // 通过事件委托，计算移动的距离
    46.         let left = e.clientX - disX
    47.         let top = e.clientY - disY
    48.  
    49.         // 边界处理
    50.         if (-(left) > minDragDomLeft) {
    51.           left = -minDragDomLeft
    52.         } else if (left > maxDragDomLeft) {
    53.           left = maxDragDomLeft
    54.         }
    55.  
    56.         if (-(top) > minDragDomTop) {
    57.           top = -minDragDomTop
    58.         } else if (top > maxDragDomTop) {
    59.           top = maxDragDomTop
    60.         }
    61.         // 移动当前元素
    62.         dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
    63.       }
    64.       document.onmouseup = function(e) {
    65.         document.onmousemove = null
    66.         document.onmouseup = null
    67.       }
    68.     }
    69.   }
    70. }
    71.  
    72. export default draggable

     7、权限控制 v-permission（已实测可行）

    调用：其实传什么值 和 如何验证都是你可控制的，由你自己逻辑来定

    代码：

    1. /**
    2.  * 实现你有无权限的地方，返回true则展示，返回false则隐藏，下面的1234则是举例子
    3.  * @param {*} key 
    4.  * @returns 
    5.  */
    6. function checkPermission(key) {
    7.   let arr = [1,2,3,4]
    8.   return arr.indexOf(key) > -1
    9. }
    10.  
    11. const permission = {
    12.   inserted: function (el, binding) {
    13.     let permission = binding.value // 获取到 v-permission的值
    14.     if (permission) {
    15.       let hasPermission = checkPermission(permission)
    16.       if (!hasPermission) {
    17.         // 没有权限 移除Dom元素
    18.         el.parentNode && el.parentNode.removeChild(el)
    19.       }
    20.     }
    21.   },
    22. }
    23.  
    24. export default permission

    8、 超出宽度隐藏显示文本 v-overflow-tooltip（不推荐使用）

    调用：（我个人觉得没啥必要用这个，你自己写个css样式就可以了）

    代码：

    1. /**
    2.  * 超出设置宽度显示文字提示指令
    3.  * 用法：v-overflow-tooltip / v-overflow-tooltip:width
    4.  * width 可选
    5.  * 只要当dom元素内容超出设置的宽度时，超出文字省略号显示，鼠标画上去有全部文字提示
    6. */
    7. export default {
    8.   name: 'overflow-tooltip',
    9.   bind (el, binding) {
    10.     const width = binding.arg
    11.     if (width) {
    12.       el.style.width = `${width}px`
    13.     }
    14.     const style = {
    15.       whiteSpace: 'nowrap',
    16.       overflow: 'hidden',
    17.       textOverflow: 'ellipsis'
    18.     }
    19.     setStyle(el, style)
    20.   },
    21.   inserted (el, binding) {
    22.     addTooltip(el, binding)
    23.   },
    24.   unbind (el) {
    25.     if (!el.tooltip) return
    26.     el.removeEventListener('mouseenter', el.elMouseEnterHandler)
    27.     el.removeEventListener('mouseleave', el.elMouseOutHandler)
    28.     el.tooltip.destroy()
    29.   }
    30. }
    31.  
    32. function addTooltip (el, binding) {
    33.   el.oldOffsetWidth = el.offsetWidth
    34.   if (!el.textWidth) {
    35.     // 计算文本宽度
    36.     const range = document.createRange()
    37.     range.setStart(el, 0)
    38.     range.setEnd(el, el.childNodes.length)
    39.     const rangeWidth = range.getBoundingClientRect().width
    40.     const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) +
    41.         (parseInt(getStyle(el, 'paddingRight'), 10) || 0)
    42.     const textWidth = rangeWidth + padding
    43.     el.textWidth = textWidth
    44.   }
    45.  
    46.   // 监听元素宽度变化
    47.   const resizeObserver = new ResizeObserver(entry => {
    48.     const target = entry[0].target
    49.     el.oldOffsetWidth !== target.offsetWidth && addTooltip(el, binding)
    50.   })
    51.   resizeObserver.observe(el)
    52.  
    53.   // Math.max(el.offsetWidth, binding.arg) 处理offsetWidth不是设置宽度时的情况
    54.   if (el.textWidth > Math.max(el.offsetWidth, binding.arg || 0)) {
    55.     let tooltip = null
    56.  
    57.     const elMouseEnterHandler = el.elMouseEnterHandler = debounce((event) => {
    58.       if (!tooltip) {
    59.         const tooltipContent = el.innerText || el.textContent
    60.         tooltip = new Tooltip()
    61.         tooltip.create(tooltipContent)
    62.         el.tooltip = tooltip
    63.       }
    64.       // 400为tootip最大宽度
    65.       tooltip.show(event, Math.min(el.textWidth, 400))
    66.     }, 300)
    67.     const elMouseOutHandler = el.elMouseOutHandler = debounce(() => {
    68.       tooltip && tooltip.hide()
    69.     }, 300)
    70.  
    71.     el.addEventListener('mouseenter', elMouseEnterHandler)
    72.     el.addEventListener('mouseleave', elMouseOutHandler)
    73.   } else {
    74.     el.tooltip && el.tooltip.destroy()
    75.     el.elMouseEnterHandler && el.removeEventListener('mouseenter', el.elMouseEnterHandler)
    76.     el.elMouseOutHandler && el.removeEventListener('mouseleave', el.elMouseOutHandler)
    77.   }
    78. }
    79.  
    80. function debounce(fn, delay = 500) {
    81.   let timer
    82.   return function() {
    83.     const th = this
    84.     const args = arguments
    85.     if (timer) {
    86.       clearTimeout(timer)
    87.     }
    88.     timer = setTimeout(function() {
    89.       timer = null
    90.       fn.apply(th, args)
    91.     }, delay)
    92.   }
    93. }
    94.  
    95. const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g
    96. const MOZ_HACK_REGEXP = /^moz([A-Z])/
    97. const ieVersion = Number(document.documentMode)
    98. const camelCase = function(name) {
    99.   return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
    100.     return offset ? letter.toUpperCase() : letter
    101.   }).replace(MOZ_HACK_REGEXP, 'Moz$1')
    102. }
    103.  
    104. const getStyle = ieVersion < 9 ? function(element, styleName) {
    105.   if (!element || !styleName) return null
    106.   styleName = camelCase(styleName)
    107.   if (styleName === 'float') {
    108.     styleName = 'styleFloat'
    109.   }
    110.   try {
    111.     switch (styleName) {
    112.       case 'opacity':
    113.         try {
    114.           return element.filters.item('alpha').opacity / 100
    115.         } catch (e) {
    116.           return 1.0
    117.         }
    118.       default:
    119.         return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null)
    120.     }
    121.   } catch (e) {
    122.     return element.style[styleName]
    123.   }
    124. } : function(element, styleName) {
    125.   if (!element || !styleName) return null
    126.   styleName = camelCase(styleName)
    127.   if (styleName === 'float') {
    128.     styleName = 'cssFloat'
    129.   }
    130.   try {
    131.     var computed = document.defaultView.getComputedStyle(element, '')
    132.     return element.style[styleName] || computed ? computed[styleName] : null
    133.   } catch (e) {
    134.     return element.style[styleName]
    135.   }
    136. }
    137.  
    138. function setStyle(element, styleName, value) {
    139.   if (!element || !styleName) return
    140.  
    141.   if (typeof styleName === 'object') {
    142.     for (const prop in styleName) {
    143.       if (styleName.hasOwnProperty(prop)) {
    144.         setStyle(element, prop, styleName[prop])
    145.       }
    146.     }
    147.   } else {
    148.     styleName = camelCase(styleName)
    149.     if (styleName === 'opacity' && ieVersion < 9) {
    150.       element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')'
    151.     } else {
    152.       element.style[styleName] = value
    153.     }
    154.   }
    155. }
    156.  
    157. class Tooltip {
    158.   constructor () {
    159.     this.id = 'autoToolTip'
    160.     this.styleId = 'autoToolTipStyle'
    161.     this.tooltipContent = ''
    162.     this.styleElementText = `
    163.       #autoToolTip {
    164.         display: none;
    165.         position: absolute;
    166.         border-radius: 4px;
    167.         padding: 10px;
    168.         z-index: 99999;
    169.         font-size: 12px;
    170.         line-height: 1.2;
    171.         min-width: 10px;
    172.         max-width: 400px;
    173.         word-break: break-word;
    174.         color: #fff;
    175.         background: #303133;
    176.         transform-origin: center top;
    177.       }
    178.       #autoToolTip #arrow::after {
    179.         content: " ";
    180.         border-width: 5px;
    181.         position: absolute;
    182.         display: block;
    183.         width: 0;
    184.         height: 0;
    185.         border-color: transparent;
    186.         border-style: solid;
    187.         bottom: -10px;
    188.         left: calc(50% - 5px);
    189.         border-top-color: #303133;
    190.       }
    191.     `
    192.     this.tooltipElement = null
    193.     this.styleElement = null
    194.     this.showStatus = false
    195.   }
    196.  
    197.   create (tooltipContent) {
    198.     this.tooltipContent = tooltipContent
    199.     const autoToolTip = document.querySelector('#' + this.id)
    200.     // 同时只添加一个
    201.     if (autoToolTip) {
    202.       this.tooltipElement = autoToolTip
    203.       return
    204.     }
    205.  
    206.     const styleElement = document.createElement('style')
    207.     styleElement.id = this.styleId
    208.     styleElement.innerHTML = this.styleElementText
    209.     document.head.append(styleElement)
    210.     this.styleElement = styleElement
    211.  
    212.     const element = document.createElement('div')
    213.     element.id = this.id
    214.  
    215.     const arrowElement = document.createElement('div')
    216.     arrowElement.id = 'arrow'
    217.     element.append(arrowElement)
    218.  
    219.     document.body.append(element)
    220.     this.tooltipElement = element
    221.   }
    222.  
    223.   show (event, textWidth) {
    224.     if (this.showStatus) return
    225.  
    226.     const targetElement = event.target
    227.     const targetElementRect = targetElement.getBoundingClientRect()
    228.     const { left, top, width } = targetElementRect
    229.  
    230.     this.showStatus = true
    231.     this.removeTextNode()
    232.     this.tooltipElement.insertAdjacentText('afterbegin', this.tooltipContent)
    233.     const style = {
    234.       left: `${left - (textWidth + 20 - width) / 2}px`,
    235.       top: `${top - 38}px`,
    236.       display: 'block'
    237.     }
    238.     setStyle(this.tooltipElement, style)
    239.   }
    240.  
    241.   hide () {
    242.     const style = {
    243.       left: '0px',
    244.       top: '0px',
    245.       display: 'none'
    246.     }
    247.     setStyle(this.tooltipElement, style)
    248.  
    249.     this.removeTextNode()
    250.     this.showStatus = false
    251.   }
    252.  
    253.   removeTextNode () {
    254.     const { firstChild } = this.tooltipElement
    255.     if (Object.prototype.toString.call(firstChild) === '[object Text]') {
    256.       this.tooltipElement.removeChild(firstChild)
    257.     }
    258.   }
    259.  
    260.   destroy () {
    261.     const { tooltipElement, styleElement } = this
    262.     tooltipElement && tooltipElement.remove()
    263.     styleElement && styleElement.remove()
    264.   }
    265. }

     9、输入框输入限制 v-limit-input（可用但有bug导致栈内存溢出，暂时不推荐使用）

    调用：

    代码：

    1. /**
    2.  * 用法：v-limit-input:digit 只允许输入数字
    3.  * v-limip-input:reg="your reg expression" 支持传正则表达式，处理一些特殊的场景
    4.  */
    5. const copy = {
    6.   bind (el, binding, vnode, oldvnode) {
    7.     const typeMap = {
    8.       // 只输入数字
    9.       digit: /\D/g,
    10.       // 只输入正整数
    11.       positiveInteger: /^(0+)|\D+/g,
    12.       // 只输入基本中文
    13.       chinese: /[^\u4E00-\u9FA5]/g,
    14.       // 只输入中文英文字母
    15.       chineseAlphabet: /[^\u4E00-\u9FA5A-Za-z]/g,
    16.       // 只输入大写字母及数字
    17.       uppercaseLetterDigit: /[^A-Z0-9]/g,
    18.       // 只输入字母及数字
    19.       letterDigit: /[^0-9a-zA-Z]/,
    20.       // 只输入合法的金额格式
    21.       price: /(\d+)(\.\d{0,2})?/
    22.     }
    23.     const { arg, value } = binding
    24.     console.log(binding);
    25.     if (!arg) {
    26.       throw Error('one arg is required')
    27.     }
    28.     if (arg && !typeMap.hasOwnProperty(arg)) {
    29.       throw Error('arg is not in typeMap')
    30.     }
    31.     if (arg === 'reg' && !value) {
    32.       throw Error('reg arg requires a reg expression value')
    33.     }
    34.     const tagName = el.tagName.toLowerCase()
    35.     const input = tagName === 'input' ? el : el.querySelector('input')
    36.     const regKey = arg || (arg === 'reg' && value)
    37.     // 输入法气泡窗弹出，开始拼写
    38.     el.compositionstartHandler = function () {
    39.       el.inputLocking = true
    40.     }
    41.     // 输入法气泡窗关闭，输入结束
    42.     el.compositionendHandler = function () {
    43.       el.inputLocking = false
    44.       input.dispatchEvent(new Event('input'))
    45.     }
    46.     el.inputHandler = function (e) {
    47.       if (el.inputLocking) return
    48.       const oldValue = e.target.value
    49.       const newValue = oldValue.replace(typeMap[regKey], '')
    50.       // price 正则在safar报错，导致页面无法打开，新增的判断
    51.       if (regKey === 'price') {
    52.         const rege = /(\d+)(\.\d{0,2})?/
    53.         const target = e.target
    54.         if (rege.test(target.value)) {
    55.           const value = target.value.match(rege)[0]
    56.           if (value.split('.').length === 1 && target.value === value) {
    57.             input.value = Number(value)
    58.           } else if (target.value !== value) {
    59.             input.value = value
    60.             input.dispatchEvent(new Event('input')) // 通知v-model更新
    61.           }
    62.         } else {
    63.           input.value = ''
    64.           input.dispatchEvent(new Event('input'))
    65.         }
    66.       } else {
    67.         // 判断是否需要更新，避免进入死循环
    68.         if (newValue !== oldValue) {
    69.           input.value = newValue
    70.           input.dispatchEvent(new Event('input')) // 通知v-model更新
    71.         }
    72.       }
    73.     }
    74.     input.addEventListener('compositionstart', el.compositionstartHandler)
    75.     input.addEventListener('compositionend', el.compositionendHandler)
    76.     input.addEventListener('input', el.inputHandler)
    77.   },
    78.   unbind (el) {
    79.     const tagName = el.tagName.toLowerCase()
    80.     const input = tagName === 'input' ? el : el.querySelector('input')
    81.     input.removeEventListener('compositionstart', el.compositionstartHandler)
    82.     input.removeEventListener('compositionend', el.compositionendHandler)
    83.     input.removeEventListener('input', el.inputHandler)
    84.   }
    85. }
    86.  export default copy

    ---持续更新--- 

  • 相关阅读:
    SB30100LCT-ASEMI插件肖特基二极管SB30100LCT
    Revit插件的【快速视图样板】视图设置保存
    Django实战项目-学习任务系统-用户注册
    漏洞扫描程序
    [LeetCode]剑指 Offer 34. 二叉树中和为某一值的路径
    jpom ruoyi 发布后端
    华为路由器AR6300 取消密码重置提醒和密码长期有效
    Oracle数据库Bug:相关子查询多层嵌套报错:标识符无效
    消息队列 Kafka
    Vue的`provide`和`inject`特性：上下文传递与数据共享
  • 原文地址：https://blog.csdn.net/qq_39404437/article/details/126075132