<link rel="stylesheet" href="https://cdn.uv.cc/element-plus/2.3.2/index.css">
<script src="https://cdn.uv.cc/vue/3.5.13/vue.global.js"></script>
<script src="https://cdn.uv.cc/element-plus/2.3.2/index.full.js"></script>
<div id="app">
<div @click="xcv" style="margin: 50px">
click to focus input
</div>
{{input}}
<el-dialog
v-model="dialogVisible.x"
@opened="xcv2"
title="新增"
width="500"
align-center
>
<el-input ref="rx123" v-model="input" style="width: 240px" placeholder="Please input" />
</el-dialog>
</div>
<script>
const app = Vue.createApp({
setup() {
const dialogVisible = Vue.reactive({
x: false,
})
const rx123 = Vue.ref(null)
const xcv = () => {
dialogVisible.x = true
}
const xcv2 = () => {
rx123.value.focus()
}
return {
xcv,
xcv2,
rx123,
dialogVisible,
}
},
data() {
return {
input: ''
}
}
});
app.use(ElementPlus);
app.mount('#app');
</script>
Vue 3 打开 el-dialog 时使 el-input 获取焦点
一次购买，永久免费
去创作
评论
{{item.path.join('.')}}
{{item.item.name}}