vue 自定义指令 input框计算输入字数

最新推荐文章于 2025-03-13 00:08:53 发布

前端初中生

最新推荐文章于 2025-03-13 00:08:53 发布

阅读量1.3k

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_42222908/article/details/116665567

版权

js 专栏收录该内容

13 篇文章

订阅专栏

export default {
  install(vue) {
    vue.directive('limit-count', {
      bind: function(el) {
        vue.nextTick(() => {
          el.style.position = 'relative'
          const target = el.getElementsByTagName('input')[0] || el.getElementsByTagName('textarea')[0]
          // 修改文本域样式，避免计数器被输入文字遮挡
          const textarea = el.getElementsByClassName('el-textarea__inner')[0]
          if (textarea) {
            textarea.style.border = `none`
            textarea.style.marginBottom = '20px'
            textarea.style.resize = 'none'
            el.style.border = '1px solid #DCDFE6'
            el.style.borderRadius = '4px'
            textarea.onfocus = function() {
              el.style.border = '1px solid #035BED'
            }
            textarea.onblur = function() {
              el.style.border = '1px solid #DCDFE6'
            }
          }
          let maxlength = 0
          // 创建插入计数器显示元素
          const createSpan = document.createElement('div')
          createSpan.className = 'ysx-limit-' + Date.now()
          if (target) {
            maxlength = target.getAttribute('maxlength')
            createSpan.innerHTML = `${target.value.length}/${maxlength}`
            if (maxlength) {
              el.appendChild(createSpan)
              const cssText = el.getElementsByTagName('input')[0] ? 'padding: 0 5px;position: absolute;height: 100%;right: 5px;top: 0;text-align: center;color: #A5A5A5; font-size: 12px;transition: all .3s;pointer-events: none;' : 'position: absolute; font-size: 12px; bottom: 5px; right: 5px;text-align: center;color: #A5A5A5; line-height: 12px;background:#fff;pointer-events: none;'
              createSpan.style.cssText = cssText
            }
          }
          el.targetEle = createSpan
          el.Currentlength = maxlength
        })
      },
      update(el, binding) {
        vue.nextTick(() => {
          if (binding.value) {
            el.targetEle.innerHTML = `${binding.value.length}/${el.Currentlength}`
            const targetwidth = el.targetEle.clientWidth
            // 计算计数器宽度，改变父元素的paddingRight避免文字遮挡
            if (el.className.includes('el-input')) {
              const input = el.getElementsByClassName('el-input__inner')[0]
              if (input) {
                input.style.paddingRight = `${targetwidth + 5}px`
              }
            }
          } else {
            el.targetEle.innerHTML = `${0}/${el.Currentlength}`
          }
        })
      }
    })
  }
}