赞
踩
一.实现效果如下:(完整代码见底部)
二.入参和反参
- 入参:
-
- title:标题
- show:控制显示和隐藏
- customFooter:是否自定义底部操作栏
- width:宽度
-
- ----可根据实际需求继续扩展----
- 反参:
-
- this.$emit("openDlg"); 提供打开窗口的钩子openDlg
- this.$emit("staticCloseDlg"); 提供关闭窗口的钩子staticCloseDlg
- this.$emit("confirm"); 提供点击确定的钩子confirm
三.引用
- <e-dialog
- @confirm="backAccConfirm"
- @staticCloseDlg="staticCloseDlg"
- :title="diaTitle"
- :show.sync="dialogVisible"
- >
- <bank-acc-form
- @closeDlg="closeDlg"
- ref="backAccForm"
- slot="content"
- :oriForm="oriForm"
- ></bank-acc-form>
- </e-dialog>
四.完整代码
- <template>
- <div class="e-dialog">
- <el-dialog
- :title="title"
- @close="staticCloseDlg"
- :width="width"
- :visible.sync="display"
- :close-on-click-modal="false"
- >
- <transition name="slide-fade" mode="out-in">
- <slot name="content" v-if="display"></slot>
- </transition>
- <!-- footer -->
- <div slot="footer" v-if="!customFooter">
- <el-button size="small" type="primary" icon="el-icon-check" @click="confirm">确定</el-button>
- <el-button size="small" class="cancel-btn" icon="el-icon-close" @click="cancel"
- >取消</el-button
- >
- </div>
- <div v-else slot="footer">
- <slot name="footer"></slot>
- </div>
- </el-dialog>
- </div>
- </template>
-
- <script>
- export default {
- name: "e-dialog",
- props: {
- title: {
- //标题
- type: String,
- default: "title",
- },
- show: {
- //显隐
- type: Boolean,
- default: false,
- },
- customFooter: {
- //是否自定义footer
- type: Boolean,
- default: false,
- },
- width: {
- //是否自定义footer
- type: String,
- default: "50%",
- },
- },
- watch: {
- show: function (newValue) {
- this.display = newValue; // show改变是同步子组件display的值
- if (newValue) {
- this.$emit("openDlg"); //打开弹窗的时候,抛出一个钩子用于外部组件预处理
- }
- },
- display: function (newValue) {
- this.$emit("update:show", newValue); // display改变时同步父组件show的值
- },
- },
- data() {
- return {
- display: false,
- };
- },
- methods: {
- cancel() {
- this.display = false;
- },
- staticCloseDlg() {
- this.$emit("staticCloseDlg");
- },
- confirm() {
- //点击确定的关闭事件是通过父节点进行处理
- this.$emit("confirm");
- },
- },
- };
- </script>
-
- <style scoped lang="scss">
- .e-dialog {
- .slide-fade-enter-active {
- transition: all 0.3s ease;
- }
- .slide-fade-leave-active {
- transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
- }
- .slide-fade-enter, .slide-fade-leave-to
- /* .slide-fade-leave-active for below version 2.1.8 */ {
- // transform: translateX(100px);
- opacity: 0;
- }
- /deep/.el-dialog {
- border-radius: 8px;
- }
-
- /deep/.el-dialog__body {
- padding: 10px 40px !important;
- }
-
- /deep/.el-dialog__header {
- background: #1d78d5;
- border-top-left-radius: 6px;
- border-top-right-radius: 6px;
- }
-
- /deep/.el-dialog__title {
- color: white;
- }
-
- /deep/.el-dialog__headerbtn .el-dialog__close {
- color: white !important;
- }
- }
- </style>
-
-

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。