vue elementui intput文字内容超长时出现tooltip

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 16:47   1920   0

html部分:

<el-tooltip
          class="item"
          effect="dark"
          :content="expressionContent"
          placement="top-start"
          :disabled="isShowTooltip"
        >
          <el-input
            @mouseover.native="inputOnMouseOver($event)"
            readonly
            v-model.trim="expressionContent"
            placeholder="请编辑"
          />
        </el-tooltip>

注意:

@mouseover.native="inputOnMouseOver($event)"

要用mouseover.native而不是mouseover,mouseover会无效,原因百度

script部分:

methods: {
    // tooltip
    inputOnMouseOver (event) {
      const target = event.target
      // 判断是否开启tooltip功能
      if (target.offsetWidth < target.scrollWidth) {
        this.isShowTooltip = false
      } else {
        this.isShowTooltip = true
      }
    },
}

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP