我有一個使用以下事件的輸入:
<b-nput class="input" id="link" v-model="link" placeholder="link" @focus="$event.target.select()" ></b-input>
我如何在裡面使用這個 @focus="$event.target.select()"
事件:
上述方法複製該值。當(dāng)使用者點(diǎn)擊複製時,我需要觸發(fā)上述選擇焦點(diǎn)事件 如何才能正確實(shí)現(xiàn)?
為您的輸入提供參考
:
<b-input class="input" id="link" v-model="link" placeholder="link" ref="theInput" ></b-input>
然後在元件腳本中的任何位置:
this.$refs['theInput'].focus();
新增saved
方法作為焦點(diǎn)事件處理程序:
@focus="saved"
方法:
methods: { saved(event){ //the event is passed automatically as parameter event.target.select() } }
編輯:
嘗試將 ref
新增到輸入元素
<b-input ref="input" class="input" id="link" v-model="link" placeholder="link" @focus="$event.target.select()" ></b-input>
然後在方法內(nèi)以程式方式觸發(fā)焦點(diǎn):
methods: { async copy(s) { await navigator.clipboard.writeText(s) this.$refs.input.focus(); ... } }