javascript - 点击选择框，光标消失？

Question

<template>  <div>    <!-- <textarea v-model="text" @click="textr"></textarea> -->    <div contenteditable="true" @click="textr" ref="editor" id="editor">      {{ content }}    </div>    <div class="flex" style="justify-content: center">      <el-button @click="toggleBold">加粗</el-button>      <el-button @click="toggleUnderline">下划线</el-button>      <el-button @click="toggleItalic">斜体</el-button>      <el-input        type="color"        v-model="color"        @input="changeColor"        style="width: 50px"      />      <el-select v-model="fontSize" @change="changeFontSize" id="fontSize" @click="handleClick">        <el-option  @click="handleClick"          v-for="data in fontSizeData"          :key="data.label"          :value="data.value"        >          {{ data.label }}        </el-option>      </el-select>      <el-select v-model="font" @change="changeFont" id="font">        <el-option value="Arial">Arial</el-option>        <el-option value="Verdana">Verdana</el-option>        <el-option value="Times New Roman">Times New Roman</el-option>      </el-select>      <el-button @click="insertImage">插入图片</el-button>    </div>    <div>{{ formattedText }}</div>  </div></template><script>export default {  data() {    return {      text: '',      htmlText: '',      isBold: false,      isUnderline: false,      isItalic: false,      color: '#000000',      fontSizeData: [],      fontSize: '17px',      font: 'Arial',      selectionStart: 0,      selectionEnd: 0    };  },  created() {    this.fontSizeData = []    for (let i = 17; i <= 40; i++) {      this.fontSizeData.push({ label: i, value: i })    }  },  mounted() {  },  methods: {    handleClick(event) {  // 阻止事件冒泡传递到编辑器中  event.stopPropagation();    // 其他处理逻辑  // ...},    toggleBold() {      document.execCommand("bold");    },    toggleUnderline() {      document.execCommand("underline");    },    toggleItalic() {      document.execCommand("italic");    },    changeColor() {      // Handle color change logic      document.execCommand("foreColor", false, this.color);    },    changeFontSize() {      // Handle font size change logic      document.execCommand("fontSize", false, this.fontSize)    },    changeFont() {      // Handle font change logic      document.execCommand("fontName", false, this.font);    },    insertImage() {      // Handle image insertion logic    },    textr(e) {            this.selectionStart = e.target.selectionStart      this.selectionEnd = e.target.selectionEnd      this.select = window.getSelection().toString()      console.lo    }  },  computed: {    formattedText() {      return ''    }  }};</script><style lang="scss" scoped>div[contenteditable="true"] {  border: 1px solid #cfcbcb;  width: 80%;  margin: auto;  margin-top: 30px;  margin-bottom: 10px;  border-radius: 10px;  box-shadow: 0px 0px 6px #efefef;  outline: none;  text-align: start;  padding: 10px;}div[contenteditable="true"]:focus {  border-color: #666666;}</style>

这份代码，现在有一个问题就是点击选择框，编辑器的光标就消失了，使用@click.prevent并不会成功
需要保留光标以及选中文本

Answer 1

我解决了，绑定v-on:blur="focus"

  然后focus里面this.$refs.editor.focus();