n20-common-lib 1.2.43 → 1.3.0

package/src/directives/VNstcNumber/temp.js

@@ -0,0 +1,446 @@
+
+// import Vue from 'vue'
+const NULL_ARR = ['', null, undefined, NaN]
+
+
+
+/**
+ * 金额格式化
+ * @param num 金额
+ * @param len 保留小数位数
+ * @param magnitude 数量级 （ 5 代表万 ）
+ * @returns {*}
+ */
+function amountFormat(num, len = 2, magnitude) {
+  /**
+   * input框的输入初始状态
+   */
+  if(num === '-') {
+    return '-'
+  }
+
+  // 已经格式化的数据
+  if (String(num).includes(',')) {
+    num = num.replace(/,/g, '')
+  }
+
+  // let symbol = String(num).includes('-') ? '-' : ''
+
+  // 非空校验
+  if (isNaN(Number(num)) || [null, '', undefined].includes(num)) {
+    return ''
+  }
+
+  const magnitudeObj = {
+    5: { label: '万元', value: 1E4 },
+    6: { label: '十万元', value: 1E5 },
+    7: { label: '百万元', value: 1E6 },
+    8: { label: '千万元', value: 1E7 },
+    9: { label: '亿元', value: 1E8 }
+  }
+  let temp = +num
+
+  if (magnitude) {
+    const t = magnitudeObj[magnitude]
+
+    temp = (temp / (t.value))
+  }
+
+  temp = temp.toFixed(len)
+
+  // 三点一逗
+  function get_thousand_num(num) {
+    return num.toString().replace(/\d+/, function(n) { // 先提取整数部分
+      return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) { // 对整数部分添加分隔符
+        return $1 + ','
+      })
+    })
+  }
+
+  temp = get_thousand_num(temp)
+  return temp
+}
+
+/** *
+ * uuid
+ */
+function generateUUID() {
+    var d = new Date().getTime()
+    if (window.performance && typeof window.performance.now === 'function') {
+        d += performance.now() // use high-precision timer if available
+    }
+    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = (d + Math.random() * 16) % 16 | 0
+        d = Math.floor(d / 16)
+        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
+    })
+    return uuid
+}
+
+let currentFocusUUID = ''
+
+/**
+ * updateInput
+ * el, binding, vnode, oldVnode
+ */
+function updateInput(el, binding) {
+    // 判断 input 是否是激活状态
+    const inputEl = el.querySelectorAll('input')[0]
+    if (!inputEl) {
+        return
+    }
+    // const activeFlag = document.activeElement.tagName
+    const currentUUID = inputEl.getAttribute('money-id')
+    const disabledFlag = inputEl.getAttribute('disabled') === 'disabled'
+    const screenEl = el.children[el.children.length - 1]
+
+    // 延迟后的
+    setTimeout(() => {
+        // 只有金额才存在更新遮挡板 (activeFlag !== 'INPUT')
+        // console.log('当前激活的元素', document.activeElement)
+        if (binding.value[`isMoney`] && currentFocusUUID !== currentUUID) {
+            const curValue = inputEl.value
+
+            // 如果input框是disabled 状态， 遮挡层也因该是disabled状态
+            if (!disabledFlag) {
+                // el.classList.remove('nstc-amount-input-disabled')
+                el.classList.add('nstc-amount-num')
+            } else {
+                // el.classList.add('nstc-amount-input-disabled')
+                el.classList.add('nstc-amount-num')
+            }
+
+            // 当input值更新时， 遮挡层也要更新
+            screenEl.innerText = amountFormat(curValue || '')
+            if (binding.value.precision) {
+                let word_ = Number(inputEl.value).toFixed(binding.value.precision)
+                let after_ = word_.slice(-Number(binding.value.precision))
+                if (amountFormat(inputEl.value || '', binding.value.precision).indexOf('.') !== -1) {
+                    let index = amountFormat(inputEl.value || '', binding.value.precision).indexOf('.')
+                    let before_ = amountFormat(inputEl.value || '', binding.value.precision).slice(0, index)
+                    el.children[el.children.length - 1].innerText = `${before_}.${after_}`
+                }
+                inputEl.value = Number(word_)
+            }
+
+            if (NULL_ARR.includes(curValue)) {
+                el.classList.remove('nstc-amount-num-temp')
+                inputEl.value = ''
+            } else {
+                // 当前的激活元素，进行输入时，不显示遮罩层
+                currentFocusUUID !== currentUUID && el.classList.add('nstc-amount-num-temp')
+            }
+            //
+        } else {
+            // 保证遮罩层的text的内容，和 input 的内容一致
+            // 金额模式下
+            binding.value[`isMoney`] && (screenEl.innerText = amountFormat(inputEl.value || ''))
+
+        }
+        //处理刷新页面赋值带有小数点后几位问题
+        // if (binding.value.precision) {
+        //   let word_ =   Number(inputEl.value).toFixed(binding.value.precision)
+        //   el.children[el.children.length - 1].innerText = word_
+        //   inputEl.value = Number(inputEl.value)
+        // }
+    }, 30)
+}
+
+export default {
+    bind: function (el, binding) {
+        // 绑定uuid
+        const inputEl = el.querySelectorAll('input')[0]
+        // 将input的type 类型设置为 Number
+        // inputEl && (inputEl.setAttribute('type', 'number'))
+        inputEl && inputEl.setAttribute('money-id', generateUUID())
+
+        if (binding.value[`isMoney`]) {
+            inputEl && inputEl.setAttribute('style', 'text-align:right;')
+        } else {
+            inputEl && inputEl.setAttribute('style', 'text-align:left;')
+        }
+
+        inputEl && inputEl.addEventListener('input', function () {
+            const curValue = el.querySelectorAll('input')[0].value
+            const screenEl = el.children[el.children.length - 1]
+            if (binding.value[`isMoney`]) {
+
+                screenEl.innerText = amountFormat(curValue || '')
+            }
+
+        })
+    },
+    unbind: function (el) {
+        el.removeEventListener('input', el.handler)
+    },
+
+    inserted(el, vDir) {
+
+        // 禁止input滚动事件
+        const ele = el.tagName === 'INPUT' ? el : el.querySelector('input')
+        // el.type = 'number'
+        ele && ele.addEventListener('mousewheel', () => {
+            ele.blur()
+        })
+
+        // 当为金额时，浮框显示三点一逗
+        if (vDir.value[`isMoney`]) {
+
+            el.querySelector('input').parentElement.style.userSelect = 'none';
+            const elDiv = document.createElement('div')
+            elDiv.className = 'input-after-amount-num'
+
+            // 添加金额class
+            el.classList.add('nstc-amount-num')
+
+            elDiv.innerText = ''
+            el.append(elDiv)
+
+            // 监听input聚焦事件
+            el.addEventListener('click', () => {
+                const inputEl = el.querySelectorAll('input')[0]
+                const disabledFlag = inputEl.getAttribute('disabled') === 'disabled'
+
+                if (!disabledFlag) {
+                    el.classList.remove('nstc-amount-num-temp')
+                    el.children[0].focus()
+
+                    currentFocusUUID = el.querySelectorAll('input')[0].getAttribute('money-id')
+                    //
+                }
+                //
+                // eslint-disable-next-line no-debugger
+            })
+        } else {
+            let inputEl = el.querySelectorAll('input')[0]
+            let curValue = inputEl.value
+            inputEl.value = curValue ? parseFloat(curValue).toFixed(vDir.value.precision || 0) : ""
+        }
+
+        // vDir.value 有指令的参数
+        if (JSON.stringify(vDir.value) === '{}') {
+            return null
+        }
+
+        let content
+        // 按键按下=>只允许输入 数字/小数点
+        el.addEventListener('keypress', event => {
+            let e = event || window.event
+            if (!Number(e.target.value) && e.target.value != 0) {
+                e.target.value = ''
+                return ''
+            }
+            if (!e.target.value) {
+                return null
+            }
+            let inputKey = String.fromCharCode(e.keyCode || e.charCode)
+            let re = /\d|\./
+            let reP = /\d|\.|-/
+            content = e.target.value
+
+            // 定义方法,阻止输入
+            function preventInput() {
+                if (e.preventDefault) {
+                    e.preventDefault()
+                } else {
+                    e.returnValue = false
+                }
+            }
+
+            // 判断最小值是不是负数
+            let arg_min = null
+            let preventFlag = null
+            if (vDir.value) {
+                arg_min = vDir.value.min
+                if (!NULL_ARR.includes(arg_min) && arg_min < 0) {
+                    preventFlag = !reP.test(inputKey) && !e.ctrlKey
+                } else {
+                    preventFlag = !re.test(inputKey) && !e.ctrlKey
+                }
+            }
+
+            if (preventFlag) {
+                preventInput()
+            } else if ((content.indexOf('.') > 0 && inputKey === '.') || (content.includes('-') && inputKey === '-')) {
+                // 已有小数点,再次输入小数点
+                preventInput()
+            }
+        })
+        // 按键弹起=>并限制最大最小, 最大长度
+        el.addEventListener('keyup', event => {
+            let e = event || window.event
+            if (!Number(e.target.value) && e.target.value != 0) {
+                e.target.value = ''
+                return ''
+            }
+            if (!e.target.value) {
+                return null
+            }
+            content = e.target.value
+            let inputKey = String.fromCharCode(e.keyCode || e.charCode)
+            // 判断是不是才输入的初始状态
+            vDir.value[`isMoney`] && (el.children[el.children.length - 1].innerText = amountFormat(content || ''))
+
+            if (!content) {
+                content = ''
+            }
+            let arg_max = ''
+            let arg_min = ''
+            let max = 9999999999999
+            if (vDir.value) {
+                arg_max = vDir.value.max
+                arg_min = vDir.value.min // 没用到
+            }
+            if (!arg_max || arg_max >= max) {
+                max = arg_max
+            }
+            if (arg_max && content > arg_max) {
+                e.target.value = arg_max
+                content = arg_max
+            }
+            let maxl = max.toString().length
+
+            // console.log('判断结果', Number(arg_min) < 0, inputKey === '½')
+
+            // 验证数字的最大长度
+            if (!NULL_ARR.includes(vDir.value[`isMoney`])) {
+
+                // 如果输入为负号， 不处理
+                // console.log('判断结果', Number(arg_min) < 0, currentInputValue)
+                if (Number(arg_min) < 0 && ['½', 'm', '\b', '-'].includes(inputKey)) {
+                    return null
+                }
+                let numPart = e.target.value.split('.')
+                let intPart = numPart[0] || ''
+                let decimalPart = numPart[1] || ''
+                if (numPart.length === 1) {
+                    try {
+                        Number(arg_min) >= 0 ? (e.target.value = Math.abs(intPart.toString().slice(0, maxl))) : (e.target.value = intPart.toString().slice(0, maxl))
+                    } catch {
+                        e.target.value = intPart.toString().slice(0, maxl)
+                    }
+
+                } else {
+                    try {
+                        Number(arg_min) >= 0 ? (e.target.value = Math.abs(intPart.toString().slice(0, maxl) + '.' + decimalPart.slice(0, 2))) : (e.target.value = intPart.toString().slice(0, maxl) + '.' + decimalPart.slice(0, 2))
+                    } catch {
+                        e.target.value = intPart.toString().slice(0, maxl) + '.' + decimalPart.slice(0, 2)
+                    }
+
+                }
+                //同步修改vue v-model绑定值
+                e.target.dispatchEvent(new Event('input'));
+                // e.target.value = e.target.value
+
+            } else if (!NULL_ARR.includes(vDir.value.maxLength)) {
+                // console.log('验证数字的最大长度', vDir.value.maxLength, e.target.value)
+                if (!isNaN(Number(vDir.value.maxLength))) {
+                    if (vDir.value.maxLength > maxl) {
+                        e.target.value = e.target.value.toString().slice(0, maxl)
+                    } else {
+                        e.target.value = e.target.value.toString().slice(0, vDir.value.maxLength)
+                    }
+
+                }
+            }
+        })
+        updateInput(el, vDir)
+        // 失去焦点=>保留指定位小数
+        el.addEventListener('focusout', event => { // 此处会在 el-input 的 @change 后执行
+
+            let e = event || window.event
+            let arg_precision = vDir.value.precision || 0  // 默认保留至整数
+
+            currentFocusUUID = ''
+            // 显示三点一抖的数字temp
+            if (!Number(e.target.value) && e.target.value != 0) {
+                e.target.value = ''
+                return ''
+            }
+            if (!e.target.value) {
+                return null
+            } else {
+                el.classList.add('nstc-amount-num-temp')
+            }
+            content = e.target.value
+            if (NULL_ARR.includes(content)) {
+                el.classList.add('nstc-amount-temp-transparent')
+            } else {
+                el.classList.remove('nstc-amount-temp-transparent')
+            }
+
+            if (!content) {
+                content = ''
+            }
+            let arg_min = ''
+            if (vDir.value) {
+                arg_min = vDir.value.min
+            }
+            if (!NULL_ARR.includes(arg_min) && content < arg_min) {
+                // 设置input的框的值
+                e.target.value = arg_min
+                content = arg_min
+
+                // 还原遮罩层
+                if (vDir.value[`isMoney`]) {
+                    el.children[el.children.length - 1].innerText = amountFormat(content, arg_precision);
+
+                } else {
+                    el.children[el.children.length - 1].innerText = content
+                }
+            }
+
+            if (vDir.value.precision) {
+
+                let word_ = !NULL_ARR.includes(content) && (Number(content).toFixed(arg_precision))
+                let after_ = word_.slice(-Number(arg_precision))
+                if (amountFormat(word_ || '', arg_precision).indexOf('.') !== -1) {
+                    let index = amountFormat(word_ || '', arg_precision).indexOf('.')
+                    let before_ = amountFormat(word_ || '', arg_precision).slice(0, index)
+                    el.children[el.children.length - 1].innerText = `${before_}.${after_}`
+                }
+                e.target.value = Number(word_)
+                // e.target.dispatchEvent(new Event('input'));
+            }
+            if (!vDir.value[`isMoney`]) {
+                e.target.value = Number(e.target.value).toFixed(vDir.value.precision)
+            }
+            // !NULL_ARR.includes(content) && (e.target.value = Number(content))
+            // e.target.dispatchEvent(new Event('input'));
+            //  updateInput(el, vDir)
+
+            //更新遮罩层
+            // e.target.dispatchEvent(new Event('input'));
+            // updateInput(el, vDir)
+            // -- callback写法1
+            // vNode.data.model.callback = ()=>{
+            //     e.target.value = content.toFixed(arg_precision)
+            // }
+            // vNode.data.model.callback();
+            // -- callback 写法2
+            // vNode.data.model.callback(
+            //     e.target.value = content.toFixed(arg_precision)
+            // )
+        })
+
+        // 当时去焦点时
+        el.addEventListener('blur', () => {
+
+        })
+
+        // 聚焦事件
+        el.addEventListener('focus', event => {
+            let e = event || window.event
+            if (!vDir.value[`isMoney`]) {
+                if (e.target.value !== '') {
+                    e.target.value = Number(e.target.value)
+                }
+            }
+        }, true)
+    },
+    componentUpdated(el, binding, vnode, oldVnode) {
+        updateInput(el, binding, vnode, oldVnode)
+    },
+    update() {
+    }
+}

package/src/directives/VTitle/index.js

@@ -1,69 +1,69 @@
-import Tooltip from './tooltip.vue'
-
-let timer = undefined
-
-function tipShow(el, tip) {
-  let _input = el.querySelector('.el-input__inner')
-  if (_input && !el.$tooltipTitle) el.$tooltipTitle = _input.value
-  if (el.$tooltipTitle) {
-    let _el = _input || el
-    if (!el.$tooltipTitleOverflow || _el.clientWidth < _el.scrollWidth) {
-      tip.title = el.$tooltipTitle
-      tip.$refs['title-pop'].referenceElm = el
-      tip.$refs['title-pop'].doDestroy()
-      tip.$nextTick(() => {
-        tip.visible = true
-        timer = setInterval(() => {
-          if (tip.visible && !el.scrollWidth) {
-            tipHide(el, tip)
-            clearInterval(timer)
-          }
-        }, 1000)
-      })
-    }
-  }
-}
-function tipHide(el, tip) {
-  tip.visible = false
-  clearInterval(timer)
-}
-
-const TitleDirective = {}
-TitleDirective.install = (Vue) => {
-  if (Vue.prototype.$isServer) return
-
-  const tooltip = new (Vue.extend(Tooltip))({
-    el: document.createElement('div'),
-    data: {
-      title: '',
-      visible: false
-    }
-  })
-  document.querySelector('body').appendChild(tooltip.$el)
-
-  Vue.directive('title', {
-    bind: function (el, binding, vnode) {
-      if (vnode.data && vnode.data.attrs) {
-        el.$tooltipTitleOverflow = vnode.data.attrs['show-overflow-tooltip']
-      }
-      el.$tooltipTitle = binding.value
-      el.$tooltipShow = () => tipShow(el, tooltip)
-      el.$tooltipHide = () => tipHide(el, tooltip)
-      el.addEventListener('mouseenter', el.$tooltipShow)
-      el.addEventListener('mouseleave', el.$tooltipHide)
-    },
-    update: function (el, binding) {
-      if (binding.value !== binding.oldValue) {
-        el.$tooltipTitle = binding.value
-      }
-    },
-    unbind: function (el, binding) {
-      el.$tooltipHide()
-      el.removeEventListener('mouseenter', el.$tooltipShow)
-      el.removeEventListener('mouseleave', el.$tooltipHide)
-      clearInterval(timer)
-    }
-  })
-}
-
-export default TitleDirective
+import Tooltip from './tooltip.vue'
+
+let timer = undefined
+
+function tipShow(el, tip) {
+  let _input = el.querySelector('.el-input__inner')
+  if (_input && !el.$tooltipTitle) el.$tooltipTitle = _input.value
+  if (el.$tooltipTitle) {
+    let _el = _input || el
+    if (!el.$tooltipTitleOverflow || _el.clientWidth < _el.scrollWidth) {
+      tip.title = el.$tooltipTitle
+      tip.$refs['title-pop'].referenceElm = el
+      tip.$refs['title-pop'].doDestroy()
+      tip.$nextTick(() => {
+        tip.visible = true
+        timer = setInterval(() => {
+          if (tip.visible && !el.scrollWidth) {
+            tipHide(el, tip)
+            clearInterval(timer)
+          }
+        }, 1000)
+      })
+    }
+  }
+}
+function tipHide(el, tip) {
+  tip.visible = false
+  clearInterval(timer)
+}
+
+const TitleDirective = {}
+TitleDirective.install = (Vue) => {
+  if (Vue.prototype.$isServer) return
+
+  const tooltip = new (Vue.extend(Tooltip))({
+    el: document.createElement('div'),
+    data: {
+      title: '',
+      visible: false
+    }
+  })
+  document.querySelector('body').appendChild(tooltip.$el)
+
+  Vue.directive('title', {
+    bind: function (el, binding, vnode) {
+      if (vnode.data && vnode.data.attrs) {
+        el.$tooltipTitleOverflow = vnode.data.attrs['show-overflow-tooltip']
+      }
+      el.$tooltipTitle = binding.value
+      el.$tooltipShow = () => tipShow(el, tooltip)
+      el.$tooltipHide = () => tipHide(el, tooltip)
+      el.addEventListener('mouseenter', el.$tooltipShow)
+      el.addEventListener('mouseleave', el.$tooltipHide)
+    },
+    update: function (el, binding) {
+      if (binding.value !== binding.oldValue) {
+        el.$tooltipTitle = binding.value
+      }
+    },
+    unbind: function (el, binding) {
+      el.$tooltipHide()
+      el.removeEventListener('mouseenter', el.$tooltipShow)
+      el.removeEventListener('mouseleave', el.$tooltipHide)
+      clearInterval(timer)
+    }
+  })
+}
+
+export default TitleDirective

package/src/directives/VTitle/tooltip.vue

@@ -1,21 +1,21 @@
-<template>
-  <el-popover
-    ref="title-pop"
-    v-model="visible"
-    trigger="manual"
-    popper-class="n20-title-pop"
-    placement="top"
-    >{{ title }}</el-popover
-  >
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      title: '',
-      visible: false
-    }
-  }
-}
-</script>
+<template>
+  <el-popover
+    ref="title-pop"
+    v-model="visible"
+    trigger="manual"
+    popper-class="n20-title-pop"
+    placement="top"
+    >{{ title }}</el-popover
+  >
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '',
+      visible: false
+    }
+  }
+}
+</script>