vue3-element-plus-dialog弹窗小结

element-plus 官网

父组件

这种写法父组件的自定义事件

<template>
  <TestProps v-model:dialogVisible="visible" />
  <button @click="visible = true">show</button>
</template>


<script setup>
import { ref } from 'vue'
import TestProps from './components/TestProps.vue'
const visible = ref(false)
</script>

子组件

借助计算属性的gettter setter 写法; 子组件的v-model不能直接绑定props

<template>
  <el-dialog v-model="visible" title="Tips" width="30%">
    <span>这是子组件</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('update:dialogVisible', false)">Cancel</el-button>
        <el-button type="primary" @click="emit('update:dialogVisible', false)"> Confirm </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps<{ dialogVisible: boolean }>()

const emit = defineEmits(['update:dialogVisible'])
const visible = computed({
  get() {
    return props.dialogVisible
  },
  set(v) {
    emit('update:dialogVisible', v)
  },
})
</script>

before-close 属性

点击右上角的关闭X,或者单击遮罩才触发这个事件, 所以意义何在?

function handleClose(done) {
  
  //   return false
  return null || undefined || '' || false || NaN || 0 // false 的值不关闭弹窗 done()关闭
}

@close 这个才是在关闭的时候都触发的

下面四种情况能都触发

1. visible: false
2. 点击 X
3. 点击遮罩
4. 键盘Esc 按键

@open @close

1. open的时候做一些初始化操作, 比如设置标题, 是否调用接口获取数据
2. close 的时候做一些收尾工作: 比如resetFields