1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| <template>
| <el-dialog v-dialogDrag ref="elDialog" :width="width" :id="id" :title="title" :visible.sync="dialogVisible" :append-to-body="true" class="cus-dialog-container" center top="5vh">
| <span v-if="show">
| <slot></slot>
| </span>
|
| <span v-loading="loading" v-if="action" slot="footer" :element-loading-text="loadingText" class="dialog-footer">
| <slot name="action">
| <el-button @click="close">取消</el-button>
| <el-button type="primary" @click="submit">确 定</el-button>
| </slot>
| </span>
| </el-dialog>
| </template>
|
| <script>
| export default {
| props: {
| visible: {
| type: Boolean,
| default: false
| },
| loadingText: {
| type: String,
| default: ""
| },
| title: {
| type: String,
| default: ""
| },
| width: {
| type: String,
| default: "600px"
| },
| form: {
| type: Boolean,
| default: true
| },
| action: {
| type: Boolean,
| default: true
| }
| },
| data() {
| return {
| loading: false,
| dialogVisible: this.visible,
| id: "dialog_" + new Date().getTime(),
| showForm: false
| };
| },
| computed: {
| show() {
| if (this.form) {
| return this.showForm;
| } else {
| return true;
| }
| }
| },
| watch: {
| dialogVisible(val) {
| if (!val) {
| this.loading = false;
| this.$emit("on-close");
| setTimeout(() => {
| this.showForm = false;
| }, 300);
| } else {
| this.showForm = true;
| }
| },
| visible(val) {
| this.dialogVisible = val;
| }
| },
| methods: {
| close() {
| this.dialogVisible = false;
| },
| submit() {
| this.loading = true;
|
| this.$emit("on-submit");
| },
| end() {
| this.loading = false;
| }
| }
| };
| </script>
|
| <style lang="scss">
| .cus-dialog-container {
| .el-dialog__footer {
| margin: 0 20px;
| // border-top: 1px dashed #ccc;
| padding: 15px 0 16px;
| text-align: center;
| position: relative;
|
| .dialog-footer {
| display: block;
|
| .circular {
| display: inline-block;
| vertical-align: middle;
| margin-right: 5px;
| width: 24px;
| height: 24px;
| }
|
| .el-loading-text {
| display: inline-block;
| vertical-align: middle;
| }
|
| .el-loading-spinner {
| margin-top: -12px;
| }
| }
| }
| .el-dialog--center .el-dialog__body {
| padding: 10px 5px 20px;
| }
| }
| </style>
|
|
