更新, 方式二:
将原来的显示的绑定和触发事件的方式,改为了用. Vue的 .sync
操作符实现对一个 prop 进行 “双向绑定” 的需求 ,详情见:Vue.js
Dialog.vue
的更改:触发父组件的更新函数去修改centerDialogVisible的值.
computed: {
visible: {
get() {
return this.centerDialogVisible;
},
set(val) {
this.$emit("update:centerDialogVisible", val);
}
}
},
- 使用时,
test.vue
文件的更改
- 给props属性加上了.sync操作符,
:centerDialogVisible.sync="visible"
- 去掉
@updateVisible="updateVisible"
以及methods中的updateVisible
方法
test.vue 文件,自定义footer时写法:
<template>
<div class="test">
<el-button @click="handleClick" type="danger">点击显示</el-button>
<!-- 自定义footer,无须绑定submitPopupData方法 -->
<comn-dialog
:dialogTitle="'规则克隆'"
:centerDialogVisible.sync="visible"
@resetPopupData="resetCopyPopup"
>
<div>
内容
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="visible = false">保存</el-button>
</span>
</comn-dialog>
</div>
</template>
<script>
import ComnDialog from "@/components/Dialog.vue";
export default {
components: {
ComnDialog
},
data() {
return {
visible: false
};
},
methods: {
resetCopyPopup() {
// 可在此做一些重置操作,如清除表单数据以及关闭弹框等
this.visible = false;
},
handleClick() {
this.visible = true;
}
}
};
</script>
一、封装Dialog弹框组件
Dialog.vue
,prop值可根据自己需求来定。
<template>
<el-dialog
class="comn_dialog"
:title="dialogTitle"
:visible.sync="visible"
:width="popupWidth"
:top="popupTop"
:close-on-click-modal="false"
v-dialogDrag
@close="Cancel"
>
<slot>
<p>弹窗内容自定义</p>
</slot>
<span v-if="!$slots.footer" slot="footer" class="dialog-footer">
<el-button type="primary" @click="Save">确定</el-button>
<el-button @click="Cancel">取 消</el-button>
</span>
<div v-else class="my-footer">
<slot name="footer" />
</div>
</el-dialog>
</template>
<script>
export default {
props: {
dialogTitle: {
type: String,
default: "标题"
},
centerDialogVisible: {
type: Boolean,
default() {
return false;
}
},
popupWidth: {
type: String,
default() {
return "430px";
}
},
popupTop: {
type: String,
default() {
return "15vh";
}
}
},
computed: {
visible: {
get() {
return this.centerDialogVisible;
},
set(val) {
this.$emit("updateVisible", val);
}
}
},
methods: {
Cancel() {
this.$emit("resetPopupData");
},
Save() {
this.$emit("submitPopupData");
}
}
};
</script>
<style lang="scss">
.comn_dialog {
.el-dialog__header {
padding: 8px 0px 3px 8px;
border-bottom: 1px solid #e7e6e6;
box-shadow: 0px 4px 4px -4px #d1d0d0;
}
.el-dialog__title {
font-size: 16px;
letter-spacing: 1px;
color: #464646;
font-weight: bolder;
}
.el-dialog__footer {
padding: 0px 20px 20px 0px;
}
.el-dialog__headerbtn {
position: static; // 兼容IE11 ,取消原有的position定位
}
.el-dialog__close {
color: $header_bg;
font-size: 20px;
font-weight: bolder;
position: absolute;
top: 8px;
right: 8px;
&::after {
content: '';
border: 2px solid $header_bg;
width: 20px;
height: 20px;
border-radius: 25px;
position: absolute;
right: -2px;
top: -3px;
}
}
.el-dialog__body {
padding: 20px;
}
.my-footer {
text-align: right;
box-sizing: border-box;
}
}
</style>
二、在组件中引入并使用
引入,注册刚刚定义的Dialog.vue组件并使用。
test.vue 文件,使用Dialog组件时,使用默认footer。
<template>
<div class="test">
<el-button @click="show" type="primary">点击显示弹框</el-button>
<comn-dialog
:dialogTitle="dialogTitle"
:centerDialogVisible="visible"
@updateVisible="updateVisible"
@resetPopupData="resetPopupData"
@submitPopupData="submitPopupData"
:popupWidth="'350px'"
:popupTop="'10vh'"
>
<p class="enable_font">
<i class="el-icon-info enable-icon"></i>
<span>
确定要
<em class="operate_font"> 删除</em>
选中数据吗?
</span>
</p>
</comn-dialog>
</div>
</template>
<script>
import comnDialog from "@/components/Dialog.vue"
export default {
components:{
comnDialog
},
data() {
return {
dialogTitle: "",
visible: false
};
},
methods: {
updateVisible(val) {
this.visible = val;
},
resetPopupData() {
// 这里可重置数据
this.visible = false;
},
submitPopupData() {
//这里向后台 提交数据
this.visible = false;
},
show() {
this.visible = true;
this.dialogTitle = "删除确认";
}
}
};
</script>
test.vue 文件,自定义footer时写法:
<template>
<div class="test">
<el-button @click="handleClick" type="danger">点击显示</el-button>
<!-- 自定义footer,无须绑定submitPopupData方法 -->
<comn-dialog
:dialogTitle="'规则克隆'"
:centerDialogVisible="visible"
@resetPopupData="resetCopyPopup"
@updateVisible="updatevisible"
>
<div>
内容
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="visible = false">保存</el-button>
</span>
</comn-dialog>
</div>
</template>
<script>
import ComnDialog from "@/components/Dialog.vue";
export default {
components: {
ComnDialog
},
data() {
return {
visible: false
};
},
methods: {
updatevisible(val) {
this.visible = val;
},
resetCopyPopup() {
// 可在此做一些重置操作,如清除表单数据以及关闭弹框等
this.visible = false;
},
handleClick() {
this.visible = true;
}
}
};
</script>