前言:
需求描述:在 Dialog 对话框中 使用 input 组件;当点击按钮,Dialog 对话框显示,且里面的 input 组件要自动获取焦点。因为页面上还存在其他的 input 组件,所以使用 自动获取焦点属性没用!!
解决方案:
使用了 Dialog 组件关闭即销毁属性还是不行,最后通过在 Dialog 组件上使用 v-if 达到自己想要的效果
javascript
<template>
<div class="search_box" @click="openDialog">
<el-icon><Search /></el-icon><span>搜索</span>
</div>
<el-dialog
v-model="dialogTableVisible"
top="6vh"
:show-close="false"
destroy-on-close
v-if="dialogTableVisible"
>
<el-input
v-model="input3"
style="max-width: 600px"
placeholder=""
class="input-with-select"
ref="input_dom"
@keyup.enter="searchByWord"
>
<template #prepend>
<el-select v-model="select" placeholder="搜索内容" style="width: 115px">
<el-option label="卡片搜索" value="1" />
<el-option label="内容搜索" value="2" />
</el-select>
</template>
</el-input>
</el-dialog>
</template>
<script>
import { Search } from "@element-plus/icons-vue";
export default {
data() {
return {
dialogTableVisible: false,
select: "1",
input3: null,
};
},
components: {
Search,
},
methods: {
searchByWord() {
this.$emit("ChangeSearch", {
value: this.select,
querySearch: this.input3,
});
this.dialogTableVisible = false;
},
openDialog() {
this.dialogTableVisible = true;
this.$nextTick(() => {
this.$refs.input_dom.focus();
});
},
},
};
</script>
<style lang="scss" scoped>
.search_box {
display: flex;
align-items: center;
cursor: pointer;
}
</style>
核心代码: