如果你想要在Vue项目中封装Element UI的弹出框el-dialog
,可以按照以下步骤进行操作:
- 创建一个新的Vue组件,用于封装
el-dialog
组件:
xmlCopy
<template>
<el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" :before-close="beforeClose">
<slot></slot>
<span slot="footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="confirm">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'Dialog',
props: {
title: {
type: String,
default: ''
},
visible: {
type: Boolean,
default: false
}
},
methods: {
beforeClose(done) {
this.$confirm('确定关闭该窗口吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
done();
}).catch(() => {});
},
confirm() {
this.$emit('confirm');
}
}
};
</script>
在这个组件中,我们使用了slot
插槽来实现弹出框的内容自定义。同时,我们通过props
接收了title
和visible
两个参数,用于设置弹出框的标题和显示状态。在弹出框的底部,我们添加了取消和确定按钮,并通过$emit
方法向父组件派发confirm
事件。
- 在父组件中使用封装好的
Dialog
组件:
xmlCopy
<template>
<div>
<el-button type="primary" @click="showDialog">显示弹出框</el-button>
<Dialog :title="title" :visible.sync="dialogVisible" @confirm="handleConfirm">
<p>这是弹出框的内容</p>
</Dialog>
</div>
</template>
<script>
import Dialog from './Dialog';
export default {
name: 'MyComponent',
components: {
Dialog
},
data() {
return {
title: '弹出框标题',
dialogVisible: false
};
},
methods: {
showDialog() {
this.dialogVisible = true;
},
handleConfirm() {
// 处理确定按钮的逻辑
this.dialogVisible = false;
}
}
};
</script>
在这个父组件中,我们引入了封装好的Dialog
组件,并传递了title
和dialogVisible
两个参数。当点击“显示弹出框”按钮时,dialogVisible
会变为true
,从而显示弹出框。在弹出框中,我们自定义了一段文本,并通过@confirm
监听到用户点击了确定按钮的事件,从而执行相应的逻辑。
通过以上步骤,我们就可以封装Element UI的弹出框el-dialog
,并在Vue项目中进行使用了。