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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
var kDialog = Vue.extend({
template:
'<el-dialog' +
' :append-to-body="appendToBody"' +
' :title="title"' +
' :width="newWidth"' +
' :modal="modal"' +
' :show-close="showClose"' +
' :close-on-press-escape="closeOnPressEscape"' +
' :close-on-click-modal="closeOnClickModal"' +
' :lock-scroll="lockScroll"' +
' :visible.sync="dialogVisible"' +
' :before-close="beforeCloseHandle"' +
' @open="openDialogHandle"' +
' @close="closeDialogHandle">' +
' <div class="dialog-body" :style="bodyStyle" ref="dialogBody">' +
' <slot></slot>' +
' </div>' +
' <div slot="footer" class="dialog-footer" v-if="isBtnGroup">' +
' <el-button' +
' v-for="(item, index) in btnGroup"' +
' :key="item.name"' +
' :type="btnTypes[index]"' +
' @click="clickHandle(item.fn)">' +
' {{item.name}}' +
' </el-button>' +
' </div>' +
'</el-dialog>',
data () {
return {
dialogVisible: false,
btnTypes: ['', 'primary', 'warning', 'info', 'success', 'danger']
}
},
props: {
// Dialog 的标题
title: {
type: String,
default: '提示'
},
// Dialog 的宽度 dialog大小:large, middle, small, mini
width: {
type: String,
default: '50%'
},
// 是否为全屏 Dialog
fullscreen: {
type: Boolean,
default: false
},
// 是否需要遮罩层
modal: {
type: Boolean,
default: true
},
// 是否在 Dialog 出现时将 body 滚动锁定
lockScroll: {
type: Boolean,
default: true
},
// 是否可以通过点击 modal 关闭 Dialog
closeOnClickModal: {
type: Boolean,
default: false
},
// 是否可以通过按下 ESC 关闭 Dialog
closeOnPressEscape: {
type: Boolean,
default: false
},
// 是否显示关闭按钮
showClose: {
type: Boolean,
default: true
},
// 是否需要按钮组
isBtnGroup: {
type: Boolean,
default: false
},
// 按钮组
btnGroup: {
type: Array,
default () {
return [
{
name: '取消',
fn: 'cancel-handle'
},
{
name: '确认',
fn: 'confirm-handle'
}
]
}
},
// body自定义样式
bodyStyle: {
type: Object,
default () {
return {}
}
},
appendToBody: {
type: Boolean,
default: false
}
},
computed: {
newWidth () {
var self = this
var size = [{name: 'large', width: '80%'}, {name: 'middle', width: '65%'}, {name: 'small', width: '50%'}, {name: 'mini', width: '30%'}]
var data = size.filter(function(item) {
return item.name === self.width
});
return data.length === 0 ? this.width : data[0].width
}
},
methods: {
open () {
this.dialogVisible = true
},
close () {
this.dialogVisible = false
},
// 关闭前的回调，会暂停 Dialog 的关闭
beforeCloseHandle (done) {
this.$emit('before-close-handle', done)
this.close()
},
// Dialog 打开的回调
openDialogHandle () {
this.$emit('open-dialog-handle')
},
// Dialog 关闭的回调
closeDialogHandle () {
var self = this
setTimeout(function () {
self.$refs.dialogBody.scrollTo(0, 0)
}, 100)
this.$emit('close-dialog-handle')
this.close()
},
// 自定义方法
clickHandle (fn) {
this.$emit(fn)
}
}
})
Vue.component('kDialog', kDialog)