Vuetify输入框clientWidth与scrollWidth始终相等，Tooltip无法触发

你遇到的clientWidth和scrollWidth始终相等的问题，大概率是以下几个原因导致的，对应解决方法如下：

1. 错误获取了DOM元素 #

Vuetify的v-text-field是封装后的组件，外层包含了不少容器元素。如果直接拿组件根元素的尺寸，拿到的是外层容器的宽度，而非内部原生<input>的真实尺寸，自然会出现两个值相等的情况。

解决办法：
给v-text-field添加ref，通过ref定位到内部的原生输入框：

const inputEl = this.$refs.yourTextFieldRef.$el.querySelector('input')

2. 输入框未强制单行显示 #

如果输入框允许文本自动换行（默认可能开启），即使内容很长，也会通过换行适应输入框宽度，不会出现横向超出的情况，scrollWidth自然等于clientWidth。

解决办法：
给输入框添加强制单行的样式：

/* 自定义类名，绑定到v-text-field上 */
.no-wrap-input .v-text-field__input input {
  white-space: nowrap; /* 禁止换行 */
  overflow-x: hidden; /* 超出部分裁剪，触发scrollWidth计算 */
}

3. 计算时机过早 #

在组件刚挂载、或者内容刚更新时就立刻计算尺寸，此时DOM还未完成渲染，获取到的是更新前的尺寸，导致两个值相等。

解决办法：
在$nextTick中执行尺寸判断，确保DOM已更新：

• 监听输入值变化，在回调中用$nextTick延迟计算
• 组件挂载时，同样在$nextTick中初始化判断

完整示例代码 #

<template>
  <v-tooltip v-model="showTooltip" bottom>
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        ref="textField"
        v-model="inputVal"
        v-bind="attrs"
        v-on="on"
        class="no-wrap-input"
        placeholder="输入长文本测试"
      ></v-text-field>
    </template>
    <span>{{ inputVal }}</span>
  </v-tooltip>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
      showTooltip: false
    }
  },
  watch: {
    inputVal() {
      this.$nextTick(this.checkContentOverflow)
    }
  },
  mounted() {
    this.$nextTick(this.checkContentOverflow)
  },
  methods: {
    checkContentOverflow() {
      const inputEl = this.$refs.textField?.$el.querySelector('input')
      if (!inputEl) return
      this.showTooltip = inputEl.scrollWidth > inputEl.clientWidth
    }
  }
}
</script>

<style scoped>
.no-wrap-input .v-text-field__input input {
  white-space: nowrap;
  overflow-x: hidden;
}
</style>

内容的提问来源于stack exchange，提问作者baitendbidz