Vue.js 3在方法中使用自动聚焦于输入和参考
Vue.js 3在方法中使用自动聚焦于输入和参考
提问于 2020-11-10 17:48:44
我与Vue2合作过，但最近我尝试了Vue 3。
我有一个简单的问题：
<input ref="myinput" />
<button @click="submitData" />我想设置“焦点”在“我的输入”，内部函数"submitData“。在Vue 2中，它很简单(这个.$ref.)，但是在Vue 3中，它们使它变得复杂。我看到了“安装”的例子，但是对我来说没有用，我认为你只能从元素中访问“值”。
有什么方法可以在方法内部的元素上执行“聚焦”吗？
回答 6
Stack Overflow用户
回答已采纳
发布于 2020-11-10 17:53:28
您仍然可以使用Vue 3做同样的事情，但是如果使用复合api，则有一些不同：
选项API :
const {
createApp
} = Vue;
const App = {
data() {
return {
}
},
methods: {
submitData() {
this.$refs.myinput.focus()
}
},
mounted() {
}
}
const app = createApp(App)
app.mount('#app')<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>
<div id="app">
Vue 3 app
<input ref="myinput" />
<button @click="submitData">
Submit
</button>
</div>
组合API:
const {
createApp,
ref,
onMounted,
} = Vue;
const App = {
setup() {
const myinput = ref(null)
function submitData() {
myinput.value.focus()
}
return {
myinput,
submitData
}
}
}
const app = createApp(App)
app.mount('#app')<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>
<div id="app">
Vue 3 app
<input ref="myinput" />
<button @click="submitData">
Submit
</button>
</div>
Stack Overflow用户
发布于 2021-05-17 19:46:48
如果有人想要在Vue3中设置特定元素的自动对焦，您可以使用Vue自定义指令来实现。
const { createApp, onMounted } = Vue;
const app = createApp({})
// Register a global custom directive called `v-focus`
app.directive('focus', {
// When the bound element is mounted into the DOM...
mounted(el) {
// Focus the element
el.focus()
}
})
app.mount('#app')<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<input />
<input v-focus />
<input />
</div>
Stack Overflow用户
发布于 2021-11-29 21:01:12
我找到的最简单的答案不见了
<input type="text" autofocus />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64774113
复制相关文章
相似问题
腾讯云开发者
