Vue2 针对el-dialog进行二次封装
时间: 2023-07-05 12:05:54 浏览: 268
Vue2 针对 el-dialog 进行二次封装的主要目的是为了简化 dialog 的使用,提高代码复用性和可维护性。
下面是一个简单的示例:
```vue
<template>
<div>
<my-dialog :visible="dialogVisible" @close="handleClose">
<p slot="title">Dialog Title</p>
<div slot="content">
<p>Dialog Content</p>
</div>
<div slot="footer">
<el-button @click="handleClose">Cancel</el-button>
<el-button type="primary" @click="handleSubmit">Confirm</el-button>
</div>
</my-dialog>
</div>
</template>
<script>
import MyDialog from '@/components/MyDialog.vue'
export default {
components: {
MyDialog
},
data() {
return {
dialogVisible: false
}
},
methods: {
handleClose() {
this.dialogVisible = false
},
handleSubmit() {
// do something
this.dialogVisible = false
}
}
}
</script>
```
在上面的示例中,我们使用了一个名为 MyDialog 的组件来封装 el-dialog。该组件接收一个 visible 属性来控制 dialog 的显示和隐藏,并且通过插槽来自定义 dialog 的标题、内容和底部按钮。
这种封装的好处是可以在多个组件中复用 MyDialog 组件,同时也可以在组件内部分离出 dialog 的逻辑,使得组件的代码更加清晰和简洁。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)