在日常项目开发中,封装一个弹窗组件是很常见的,下面做一下总结。可根据实际开发自行修改。
效果图:
代码:
<template>
<div>
<el-form :model="form" label-width="80px" :inline="true">
<el-form-item label="姓名:" prop="name">
<el-input v-model="form.name" class="input-width">
<i slot="suffix" @click="nameBtn" class="el-icon-search"></i>
</el-input>
</el-form-item>
<el-form-item label="编号:" prop="code">
<el-input v-model="form.code" class="input-width"></el-input>
</el-form-item>
</el-form>
<!-- 3、使用组件 -->
<DialogComponent
v-if="DialogComponentShow"
:DialogComponentShow="DialogComponentShow"
@closeDialog="closeDialog"
@selectData="selectData"
></DialogComponent>
</div>
</template>
<script>
import DialogComponent from './DialogComponent.vue' //1、引入弹窗组件
export default {
components: {
//2、注册组件
DialogComponent
},
data() {
return {
form: {
name: '',
code: ''
},
DialogComponentShow: false
};
},
methods: {
nameBtn() {
//打开“弹窗组件”
this.DialogComponentShow = true
},
closeDialog() {
//关闭“弹窗组件”
this.DialogComponentShow = false
},
selectData(val) {
//监听“弹窗组件”返回的数据
this.form.name = val.name
this.form.code = val.code
}
}
};
</script>
<style>
.el-form {
padding: 10px;
}
.input-width {
width: 178px;
}
.input-width i {
cursor: pointer;
}
</style>
弹窗组件效果图:
append-to-body:用来解决在多重弹窗时,此弹窗组件被覆盖导致显示不出来的问题。
代码:
<template>
<el-dialog title="弹窗组件" :visible.sync="show" append-to-body width="30%" :before-close="handleClose">
<el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
<el-table-column type="index" width="50"> </el-table-column>
<el-table-column property="date" label="日期" width="100"> </el-table-column>
<el-table-column property="name" label="姓名" width="100"> </el-table-column>
<el-table-column property="code" label="编号" width="100"> </el-table-column>
<el-table-column property="address" label="地址"> </el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="checkBtn">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: ['DialogComponentShow'], //接受父组件传递过来的数据
data() {
return {
show: false, //弹窗默认隐藏
currentRow: null, //选择的行数据
tableData: [
//表格数据
{
date: '2022-12-16',
name: '王小虎1',
code: '001',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2022-12-16',
name: '王小虎2',
code: '002',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2022-12-16',
name: '王小虎3',
code: '003',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2022-12-16',
name: '王小虎4',
code: '004',
address: '上海市普陀区金沙江路 1516 弄'
}
]
};
},
mounted() {
//显示弹窗
this.show = this.DialogComponentShow
},
methods: {
handleCurrentChange(val) {
//获取选择的行数据
this.currentRow = val
},
handleClose() {
//关闭弹窗
this.show = false
this.$emit('closeDialog')
},
checkBtn() {
//确定按钮
if(!this.currentRow) {
this.$message({ message: '请先选择数据', type: 'warning' })
return
}
this.$emit('selectData', this.currentRow) //发送数据到父组件
this.handleClose()
}
}
};
</script>
<style>
</style>