element plus 使用经验合集

01.el-dialog使用

子组件：

<template>
  <el-dialog :model-value="dialogVisible" title="Tips" width="500" :before-close="handleClick">
    <span>This is a message</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClick">Cancel</el-button>
        <el-button type="primary" @click="handleClick"> Confirm </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, defineEmits } from 'vue'
const emit = defineEmits(['closeDialog'])

onMounted(() => {})

const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
})

const handleClick = () => {
  emit('closeDialog')
}
</script>

父组件：

<template>
  <div class="container">
    <Detail :dialogVisible="dialogVisible" @closeDialog="closeDialog" />
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import Detail from './detail.vue'

const dialogVisible = ref(false)

onMounted(() => {})

// 辅助函数，关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false
}
</script>