【开发技巧】Vue3 中结合 ElementPlus 实现弹窗的封装

Fivk

2023 年 08 月 07 日

889 次浏览

暂无评论

1078字数

开发技巧

## Vue3 中结合 ElementPlus 实现弹窗的封装

在Vue3中，我们可以使用ElementPlus和一些关于Vue3的新特性来实现弹窗的封装。以下是一个示例代码，展示了如何编写一个自定义弹窗组件，并在父组件中使用它。

### 弹窗组件的编写

```html
<script setup lang="ts">
import { ref, defineEmits, defineExpose } from 'vue'

const emit = defineEmits(['confirmDia'])
let showDia = ref(false)

const openDia = (): void => {
  showDia.value = true
}

const closeDia = (): void => {
  showDia.value = false
}

const confirmDia = (): void => {
  emit('confirmDia', '弹窗内容事件处理完毕，信息传给父组件。')
}

// 使用 <script setup> 的组件默认是私有的，为了让父组件能够访问子组件中的方法和属性，需要通过 defineExpose 宏显式暴露
defineExpose({
  openDia,
  closeDia
})
</script>

<template>
   <el-dialog 
		title="Dialog" 
		@close="closeDia" 
		v-model="showDia"
	>
   	
    <template v-slot:footer>
        <el-button @click="confirmDia" type="primary">确定</el-button>
        <el-button @click="closeDia" type="primary" plain>取消</el-button>
    </template>
  </el-dialog>
</template>
```

### 父组件中使用弹窗组件

```html
<script setup lang="ts">
import { ref } from 'vue';
import MyDialog from './components/MyDialog.vue'

let dialog = ref<InstanceType<typeof MyDialog> | null>(null)

const open = (): void => {
    dialog.value?.openDia()
}

const confirmDia = (val: string): void => {
  console.log(val)
  dialog.value?.closeDia()
}
</script>

<el-button @click="open" type="primary">打开弹窗</el-button>

</template>
```

通过以上代码，我们完成了一个完整的自定义弹窗组件。在Vue3中，与Vue2相比，有一些写法上的差异。如果您对这些差异有任何疑问或需要进一步讨论，请在评论区留言。希望这篇文章对您有所帮助！

最后修改：2023 年 08 月 07 日