Vue3+El-Dialog实现弹框

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>