Select 模板

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

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'

const props = defineProps({
  vision: { type: Boolean, default: false }
})

const emit = defineEmits(['update:vision'])

const currentVisible = ref(false)

watch(
  () => props.vision,
  newVal => {
    currentVisible.value = newVal
  },
  { immediate: true }
)

// 关闭弹窗
function handleClose() {
  emit('update:vision', false)
}
</script>

<style lang="scss" scoped></style>