如何获取输入元素的宽度并使用 Vue3 Composition API 动态调整它？

如何解决如何获取输入元素的宽度并使用 Vue3 Composition API 动态调整它？

我正在尝试根据客户端类型动态更改输入宽度。

我试过获取输入内容的宽度...

模板：

<span ref="totCitSpan" id="hide">{{myReactivedata}}</span>
<input @input="resize()" ref="totCitInput" class="title" id="txt" type="number" v-model="myReactivedata" >  

脚本

let totCitSpan = ref(null);
let totCitInput = ref(null);

var hide = totCitSpan;
var txt = totCitInput;
const resize = (_value) => {
   hide.textContent = txt.value;
   txt.style.width = hide.offsetWidth + "px";
}

然后使用一些 css 来隐藏跨度并推送内容，就像在这个例子中一样 (Auto-scaling input[type=text] to width of value?

)，但 Vue 使用代理处理 refs 反应性，所以这是不行的，一些简单的事情正在成为使用 refs、挂载钩子、创建新数据属性的一项艰巨任务。 在理想的世界中，这种类型的事情甚至可以通过 html 或 css 来完成，但根据我的研究，没有现成的解决方案......

非常欢迎任何想法和聪明的想法。

解决方法

解决方案（使用 ch 单位）：

input.reactive {
  width: 5ch; /* starting width with 2 more ch  than the word - my word had 3 characters 'abc' */
}

<input 
  class="title reactive" 
  type='number' 
  value="abc"  
  onkeydown="this.style.width = (this.value.length + 2 ) + 'ch';">


  

我在内联函数中添加了另外两个字符，以便为向上/向下箭头腾出空间，但您可以删除它们并自由设置样式。

我希望这是有用的。

关于 ch 单位的更多信息：https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/