input或者el-cascader的輸入框隨輸入內容寬度自適應

解決的思路是動態修改css的width

參考：https://blog.csdn.net/lianzhang861/article/details/84306139中的方法一，

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

<input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>4?this.value.length:4);" size="4">

如果是el-cascader的輸入框

<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"
  >
</el-cascader>

在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 ，也是這種情況

效果大致是可以的，只不過如果最后一位是數字，可以正常顯示，如果最后是字母，那么可能會有一些多余的空白字符，如下圖

數字的情況：

 

字母的情況：

上面的這個bug，和https://blog.csdn.net/lianzhang861/article/details/84306139里面說的類似，有數字的時候會特殊一些，原因:數字占font-size的大小不知道是啥規律?