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

Posted 2023-03-16

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

【英文标题】：How to select text inside input when the input get mounted (Vue3 )

【发布时间】：2022-01-20 23:22:42

【问题描述】：

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

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

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

但它打破了idy

【问题讨论】：

请分享代码

我无法分享代码。很多。

【参考方案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