1.子组件childComponents.vue
<template>
<el-dialog title="威频AI助手" v-model="dialogVisble" width="50%">
<div style="display: flex; justify-content: center;">
<span class="tip-text">试试发送一些问题给我,比如"相噪计算公式"</span>
</div>
<template #footer>
<div class="dialog-footer">
<div>
<el-input v-model="inputValue" style="width: 90vh; height: 10vh;" placeholder="输入问题"></el-input>
</div>
<div style="display: flex; justify-content: center;">
<br>
</div>
<span>
<el-button @click="close">关 闭</el-button>
<el-button type="primary" @click="confirm">查 询</el-button>
</span>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus'
// 定义控制弹窗显隐的变量
const dialogVisble = ref(false)
// 定义输入问题的变量
const inputValue = ref('')
function confirm() {
ElMessageBox.confirm('AI助手暂未上线,敬请期待').then(() => {
dialogVisble.value = false
}).catch(() => { })
}
function close() {
dialogVisble.value = false
}
// 将变量暴露出来
defineExpose({
dialogVisble
})
</script>
<style lang="less" scoped>
.tip-text {
color: #00000080;
}
.dialog-footer {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
</style>
2.父组件
<script setup lang="ts">
import MyGpt from "./Gpt.vue"
const visiableGptDialog = ref(null)
function openGptDialog() {
visiableGptDialog.value.dialogVisble = true;
}
</script>
<template>
<div class="xyHeader">
<div class="box row">
<ElImage
class="logo"
src="/P2A/xy.png"
:draggable="false"
@click="openGptDialog"
/>
<MyGpt ref="visiableGptDialog" append-to-body></MyGpt>
</div>
</template>