el-select选项内容显示不下添加title冒泡提示

最新推荐文章于 2024-06-13 15:53:35 发布

UpUp_seaboy

最新推荐文章于 2024-06-13 15:53:35 发布

阅读量450

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Y_seaboy/article/details/136298795

版权

文章介绍了如何在Vue中使用自定义指令`v-el-select-title`，当el-select下拉内容过长时，为输入框添加动态标题提示，以解决显示问题。

摘要由CSDN通过智能技术生成

指令

/**
 * v-el-select-title 用于el-select下拉内容显示不下时，添加title属性冒泡提示
 */
Vue.directive('elSelectTitle', {
    bind: function (el) {
        function setTitleHelper(el, binding, vnode) {
            vnode.context.$nextTick(() => {
                const inputEL = el.querySelector('.el-input__inner')
                const inputVal = inputEL?.value
                if (inputVal && inputEL) {
                    //文本宽度
                    const inputValWidth = Utils.checkShowTooTip(
                        inputVal,
                        '12px microsoft yahei',
                        undefined
                    )
                    const inputELStyle = window.getComputedStyle(inputEL)
                    // input显示文本区域宽度
                    const inputElWidth =
                        inputEL.clientWidth -
                        parseInt(inputELStyle.paddingLeft) -
                        parseInt(inputELStyle.paddingRight)
                    if (inputValWidth >= inputElWidth) {
                        el.setAttribute('title', inputVal)
                    } else {
                        el.removeAttribute('title')
                    }
                } else {
                    el.removeAttribute('title')
                }
            })
        }

        el.setTitleHelper = Utils.debounce(setTitleHelper, 300)
    },
    inserted: function (el, binding, vnode) {
        if (binding.value) {
            el.setTitleHelper(el, binding, vnode)
        }
    },
    componentUpdated: function (el, binding, vnode) {
        if (binding.value !== binding.oldValue) {
            el.setTitleHelper(el, binding, vnode)
        }
    },
    unbind: function (el) {
        el.removeAttribute('title')
        delete el.setTitleHelper
    },
})

使用示例

     <el-select
          v-el-select-title="cqVersionForm.inheritId"
          filterable
          :disabled="inheritFlag"
          value-key="id"
          v-model="cqVersionForm.inheritId"
          placeholder="请选择算量版本"
          style="width: 30%"
      >
          <el-option
              v-for="item in inheritList"
              :key="item.id"
              :label="item.versionName"
              :disabled="item.status === 3"
              :value="item.id"
          >
          </el-option>
      </el-select>