element input 自适应_input或者el-cascader的输入框随输入内容宽度自适应

解决的思路是动态修改css的width

如果是input，用onkeydown,onkeyup配合使用

如果是el-cascader的输入框

id="el-cascader"

v-model.trim="formTemp.service"

:disabled="currentStep!='apply'"

:options="serviceOptions"

:props="{ expandTrigger: 'hover' }"

:show-all-levels="true"

separator="."

@change="handleServiceSelect"

>

在methods中定义如下

updateElCascaderStyle(value) {

// 效果：项目名称的input框随着内容的长度而自适应，设置 el_cascader 标签的width

var el_cascader_element = document.querySelector('#el-cascader')

var length = value.join('.').length + 1

var num = length * 9 + 'px'

el_cascader_element.style.width = num

},

这个 * 9 的9是测试出来的，因为样式不是直接作用到input上，所以和上面input的例子还有些不一样，还有上面的 + 1 ，也是这种情况

效果大致是可以的，只不过如果最后一位是数字，可以正常显示，如果最后是字母，那么可能会有一些多余的空白字符，如下图

数字的情况：

字母的情况：