安装输入时如何在输入中选择文本（Vue3）

【问题标题】：How to select text inside input when the input get mounted (Vue3 )安装输入时如何在输入中选择文本（Vue3）
【发布时间】：2022-01-20 23:22:42
【问题描述】：

我有我创建的这个表单，基本上它的作用是在我每次单击 ADD_INPUT 按钮时创建一个具有随机值的新输入。我想要的是每次我创建一个具有随机值的新 INPUT 时，都会选择该值。对不起，我的英语很糟糕。

我尝试过像这样创建一个新的自定义指令：

directives: {
    focusInput: {
      // directive definition
      mounted(el) {
        el.select()
      }
    }
  },

但它打破了idy

【问题讨论】：

请分享代码
我无法分享代码。很多。

标签： vue.js vuejs3

【解决方案1】：

霍伊可以使用select()

new Vue({
    el : '#app',
  data : {
   text: 'some text'
  },
  methods : {
    select() {
      this.$refs.input.select();
    },
  },
  mounted() {
    this.select()
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="select">ADD_INPUT</button>
  <input type="text" v-model="text" ref="input">
</div>

组合 API

setup() {
    const input = ref(null)

    function select() {
      input.value.select()
    }

    return {
      input,
      select
    }
  }

【讨论】：