使用可编辑的div，contenteditable=“true“属性，自动聚焦

做项目时遇到的需求，需要让文字都竖向排列，且可编辑如下图

 实现编辑时也是竖向的效果，最终效果如下

如果用普通的input写出来，虽然可以通过方法让input竖向排列，但里面的文字是没办法竖向的，input效果如下，

代码如下，v-if和动态样式是业务代码，可忽略

    <div
      ref="editRef"
      v-if="item.isEdit"
      class="edit-div"
      contenteditable="true"
      :style="{ 'letter-spacing': item.fileName.length > 6 ? '2px' : '4px' }"
      v-text="currentFile.fileName"
      @input="inputValueChange"
      @blur="cancelReName"
      @keyup.enter="saveName"
      @keydown="pushKeyDown($event)"
    ></div>

js部分，业务代码不影响

//重命名
function rename() {
  let hasEdit = folderList.value.some((elem) => {
    return elem.isEdit == true;
  });
  if (hasEdit) {
    ElMessage.error('当前有未保存的文件夹');
    return;
  }
  currentFile.value.isEdit = true;
  nextTick(() => {
    proxy.$refs['editRef'][0].focus();
    let range = document.createRange();
    range.selectNodeContents(proxy.$refs['editRef'][0]);
    range.collapse(false);
    let sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  });
}

//回车时阻止默认换行行为

function pushKeyDown(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
}


function inputValueChange() {
  currentFile.value.fileName = proxy.$refs['editRef'][0].innerText.trim();
}