使用vue2封装一个el-dailog组件
时间: 2023-12-06 22:45:01 浏览: 89
好的,下面是一个简单的 Vue2 组件代码示例,可供参考:
```html
<template>
<el-dialog :title="title" :visible.sync="visible" :width="width" :fullscreen="fullscreen" :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false">
<slot></slot>
<span slot="footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleOk">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'ElDialog',
props: {
title: {
type: String,
default: ''
},
visible: {
type: Boolean,
default: false
},
width: {
type: String,
default: '50%'
},
fullscreen: {
type: Boolean,
default: false
}
},
methods: {
handleCancel() {
this.$emit('cancel')
},
handleOk() {
this.$emit('ok')
}
}
}
</script>
```
在上述代码中,我们使用了 Element UI 的 Dialog 组件作为基础组件,并且提供了一些常用的组件属性,如对话框标题、宽度、全屏模式、对话框是否可见等。同时,我们还通过 `slot` 插槽提供了对话框内容的自定义。
另外,我们还为对话框的“取消”和“确定”按钮绑定了点击事件,并通过 `$emit` 方法将事件传递给父组件,以便父组件可以根据这些事件来执行相应的操作。
希望这个例子能够帮助您更好地理解如何封装一个简单的对话框组件。
阅读全文