清空input中的值不影响到软键盘和光标聚焦

Question

<li >
   <i class="user"></i>
   <input id="muIpnutsss" @keydown="onkeydown($event)" ref="query" type="text" @focusin="nameFocus=!nameFocus" @focusout="nameFocus=!nameFocus" v-model="Uname" placeholder="请输入用户名">
   <van-icon name="cross" v-if="nameFocus" class="cross" size="0.36rem" tag="b" color="#5c6275" @click="Uname = ''" />
</li>

一个小功能，用户名输入框后面添加了一个 X 符号 用@click="Uname = ''"来清空输入的字符串。
有个问题是点击后输入框也会跟着一同取消并且失去焦点，现在的要求是直接清空上面的文字而不影响弹出的键盘和光标。请问如何解决？

Answer 1

重新 focus 上去呗

  @click="clickCrossIcon"
  ...
  methods: {
    clickCrossIcon: () => {
      this.Uname = ''
      this.$refs.query.focus()
    }
  }