Skip to content

Commit 6bbbf08

Browse files
febobofebobo
authored
Merge pull request #29 from lzy1043/dev
update modal component
2 parents 3b809d8 + 5f3a12c commit 6bbbf08

File tree

6 files changed

+133
-55
lines changed

6 files changed

+133
-55
lines changed

‎docs/examples-docs/zh-CN/modal.md

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<style>
22
.demo-modal {
3-
.vm-modal {
4-
margin: 10px 0;
5-
user-select: none;
6-
}
73
.demo-block{
84
padding:0 15px;
95
}
@@ -14,7 +10,7 @@
1410
</style>
1511

1612
<script>
17-
import { Modal, Input } from 'packages';
13+
import { Modal, Input, List } from 'packages';
1814

1915
export default {
2016
data () {
@@ -80,10 +76,22 @@
8076
}, {
8177
text: '按钮三',
8278
click: function () {
83-
console.log(按钮三)
79+
console.log('按钮三')
8480
}
8581
}]
8682
})
83+
},
84+
popup () {
85+
Modal.popup({
86+
title: '详细信息',
87+
popupRender: h => h('v-list', [
88+
h('v-list-item', ['名称']),
89+
h('v-list-item', ['代码']),
90+
h('v-list-item', ['价格'])
91+
])
92+
}).then(function () {
93+
console.log('confirm')
94+
})
8795
}
8896
},
8997
components: {
@@ -107,15 +115,17 @@ import { Modal } from 'milk-vue';
107115

108116
:::demo
109117
``` html
110-
<div>
118+
<div class="demo-block">
111119
<p class="m15">Alert</p>
112120
<v-button @click="modal('basic Modal', '这是内容')">Alert</v-button>
113121
<p class="m15">Confirm</p>
114122
<v-button @click="modal('关闭', '确认关闭？', 'confirm')">Confirm</v-button>
115-
<p class="m15">自定义按钮文字</p>
116-
<v-button @click="modalDiy">自定义按钮文字</v-button>
117123
<p class="m15">propmt</p>
118124
<v-button @click="modalPropmt">Propmt</v-button>
125+
<p class="m15">Popup</p>
126+
<v-button @click="popup">Popup</v-button>
127+
<p class="m15">自定义按钮文字</p>
128+
<v-button @click="modalDiy">自定义按钮文字</v-button>
119129
<p class="m15">多个按钮</p>
120130
<v-button @click="modalBtns">多个按钮</v-button>
121131
</div>
@@ -140,15 +150,6 @@ Modal.confirm({
140150
message: '确认关闭？'
141151
})
142152
```
143-
### 自定义按钮文字
144-
145-
``` js
146-
Modal.confirm({
147-
title: '关闭',
148-
message: '确认关闭？',
149-
confirmText: '关闭'
150-
})
151-
```
152153

153154
### Propmt
154155

@@ -161,6 +162,31 @@ Modal.confirm({
161162
})
162163
```
163164

165+
### Popup
166+
167+
``` js
168+
Modal.popup({
169+
title: '详细信息',
170+
popupRender: h => h('v-list', [
171+
h('v-list-item', ['名称']),
172+
h('v-list-item', ['代码']),
173+
h('v-list-item', ['价格'])
174+
])
175+
}).then(function () {
176+
console.log('confirm')
177+
})
178+
```
179+
180+
### 自定义按钮文字
181+
182+
``` js
183+
Modal.confirm({
184+
title: '关闭',
185+
message: '确认关闭？',
186+
confirmText: '关闭'
187+
})
188+
```
189+
164190
### 多个按钮
165191

166192
``` js
@@ -209,18 +235,20 @@ Modal.confirm({
209235
| 方法名 | 参数 | 返回值 | 介绍 |
210236
|-----------|-----------|-----------|-------------|
211237
| Modal | `options` | Modal 实例 | 展示提示信息 |
212-
| Modal.confirm | `options` | Modal 实例 | 展示提示信息 |
238+
| Modal.confirm | `options` | Modal 实例 | 展示confirm提示信息 |
239+
| Modal.popup | `options` | Modal 实例 | 展示popup提示信息 |
213240
| Modal.clear | | | 关闭提示 |
214241

215242

216243
### API
217244

218245
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
219246
|-----------|-----------|-----------|-------------|-------------|
220-
| type | 提示类型 | `String` | `basic` | `basic` `confirm` |
247+
| type | 提示类型 | `String` | `basic` | `basic` `confirm` `popup` |
221248
| title | 标题 | `String` | `''` | - |
222249
| message | 内容 | `String` | `''` | - |
223-
| promptRender | 渲染Propmt对话框 | `Function` | - | - |
250+
| promptRender | 渲染Propmt对话框，只在Modal.confirm中使用 | `Function` | - | - |
251+
| popupRender | 渲染Popup对话框，只在Modal.popup中使用 | `Function` | - | - |
224252
| confirmText | 确认按钮文字 | `String` | `确定` | - |
225253
| cancleText | 取消按钮文字 | `String` | `取消` | - |
226254
| btns | 按钮组,用来创建多按钮 Modal | `Array` | - | - |

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/modal/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const defaultOptions = {
1313
promptRender: null,
1414
btns: null,
1515
forbidClick: true,
16+
popupRender: null,
1617
callback: action => {
1718
instance[action === 'confirm' ? 'resolve' : 'reject'](action);
1819
},
@@ -54,6 +55,11 @@ Modal.confirm = options => createModal({
5455
type: 'confirm'
5556
});
5657

58+
Modal.popup = options => createModal({
59+
...options,
60+
type: 'popup'
61+
});
62+
5763
export default Modal;
5864
export {
5965
VModal

‎packages/modal/modal.vue

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,53 @@
11
<template>
2-
<transition name="vm-modal-fade">
2+
<transition :name="'vm-modal-' + transitionName">
33
<div class="vm-modal" v-if="value">
44
<div class="vm-modal-wrapper">
55
<div class="vm-modal-mask" v-if="mask" @click="!forbidClick && handleAction('cancle')"></div>
6-
<div class="vm-modal-content">
7-
<div class="vm-modal-header">
8-
<div class="vm-modal-title" v-html="title"></div>
9-
<!-- type="basic" -->
10-
<template v-if="type === 'basic'">
11-
<div class="vm-modal-close" @click="handleAction('cancle')">
12-
<v-icon type="cross" size="lg" />
6+
<div :class="[`vm-modal-content vm-modal-content-${type}`]">
7+
<div class="vm-modal-header">
8+
<div :class="[`vm-modal-title vm-modal-title-${type}`]" v-html="title"></div>
9+
<!-- type="basic" -->
10+
<template v-if="type === 'basic'">
11+
<div class="vm-modal-close" @click="handleAction('cancle')">
12+
<v-icon type="cross" size="lg" />
13+
</div>
14+
</template>
15+
</div>
16+
<div :class="['vm-modal-body', `vm-modal-body-${type}`]">
17+
<div class="vm-modal-message" v-html="message"></div>
18+
<!-- prompt -->
19+
<template v-if="promptRender">
20+
<div class="vm-modal-propmt">
21+
<render :render="promptRender"></render>
22+
</div>
23+
</template>
24+
<template v-if="popupRender">
25+
<render :render="popupRender"></render>
26+
</template>
27+
</div>
28+
<!-- 多个按钮 -->
29+
<template v-if="btns && btns.length > 0">
30+
<div class="vm-modal-footer-btns">
31+
<v-button v-for="(btn, index) in btns" :key="index" :class="['vm-modal-btn', `vm-modal-btn-mult`,'btn-confirm']" @click="handleMultipleBtns(btn)">{{btn.text}}</v-button>
1332
</div>
1433
</template>
15-
</div>
16-
<div :class="['vm-modal-body', `vm-modal-body-${type}`]">
17-
<div class="vm-modal-message" v-html="message"></div>
18-
<!-- prompt -->
19-
<template v-if="promptRender">
20-
<div class="vm-modal-propmt">
21-
<render :render="promptRender"></render>
34+
<template v-else>
35+
<div :class="['vm-modal-footer', `vm-modal-footer-${type}`]">
36+
<template v-if="type === 'basic'">
37+
<v-button :class="['vm-modal-btn', `vm-modal-btn-${type}`,'btn-confirm']" @click="handleAction('confirm')">{{confirmText || '确定'}}</v-button>
38+
</template>
39+
40+
<template v-else-if="type === 'popup'">
41+
<v-button type="primary" class="vm-modal-btn-popup" @click="handleAction('confirm')">{{confirmText || '确定'}}</v-button>
42+
</template>
43+
44+
<template v-else>
45+
<v-button :class="['vm-modal-btn', `vm-modal-btn-${type}`,'btn-close']" @click="handleAction('cancle')">{{cancleText || '取消' }}</v-button>
46+
<v-button :class="['vm-modal-btn', `vm-modal-btn-${type}`,'btn-confirm']" @click="handleAction('confirm')">{{confirmText || '确定'}}</v-button>
47+
</template>
2248
</div>
2349
</template>
24-
2550
</div>
26-
<!-- 多个按钮 -->
27-
<template v-if="btns && btns.length > 0">
28-
<div class="vm-modal-footer-btns">
29-
<v-button v-for="(btn, index) in btns" :key="index" :class="['vm-modal-btn', `vm-modal-btn-mult`,'btn-confirm']" @click="handleMultipleBtns(btn)">{{btn.text}}</v-button>
30-
</div>
31-
</template>
32-
33-
<template v-else>
34-
<div :class="['vm-modal-footer', `vm-modal-footer-${type}`]">
35-
<v-button v-if="type !== 'basic'" :class="['vm-modal-btn', `vm-modal-btn-${type}`,'btn-close']" @click="handleAction('cancle')">{{cancleText || '取消' }}</v-button>
36-
<v-button :class="['vm-modal-btn', `vm-modal-btn-${type}`,'btn-confirm']" @click="handleAction('confirm')">{{confirmText || '确定'}}</v-button>
37-
</div>
38-
</template>
39-
</div>
4051
</div>
4152
</div>
4253
</transition>
@@ -70,10 +81,11 @@
7081
callback: {
7182
type: Function
7283
},
73-
promptRender: null,
84+
promptRender: Function,
7485
confirmText: String,
7586
cancleText: String,
76-
btns: Array
87+
btns: Array,
88+
popupRender: Function
7789
},
7890
methods: {
7991
handleAction(action) {
@@ -90,6 +102,11 @@
90102
render,
91103
[Icon.name]: Icon,
92104
[Button.name]: Button
105+
},
106+
computed: {
107+
transitionName() {
108+
return this.type === 'popup' ? 'slideup' : 'fade';
109+
}
93110
}
94111
};
95112
</script>

‎packages/modal/render.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
name: 'propmt',
2+
name: 'render',
33
functional: true,
44
props: {
55
render: Function

‎style/mixins/modal.less

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,32 @@
9191
border-radius: 0 0 7px 7px;
9292
}
9393
}
94+
&-body-popup {
95+
padding: 0;
96+
}
97+
&-content-popup {
98+
position: fixed;
99+
bottom: 0;
100+
width: 100%;
101+
border-radius: 0;
102+
transition: bottom .2s;
103+
}
104+
&-btn-popup {
105+
border-radius: 0;
106+
}
94107
}
95108
.vm-modal-fade-enter-active, .vm-modal-fade-leave-active {
96109
transition: opacity .2s;
97110
}
98111
.vm-modal-fade-enter, .vm-modal-fade-leave-to {
99112
opacity: 0;
100-
}
113+
}
114+
.vm-modal-slideup-enter-active, .vm-modal-slideup-leave-active {
115+
transition: all .2s;
116+
}
117+
.vm-modal-slideup-enter, .vm-modal-slideup-leave-to {
118+
opacity: 0;
119+
}
120+
.vm-modal-slideup-enter .vm-modal-content-popup, .vm-modal-slideup-leave-to .vm-modal-content-popup {
121+
bottom: -100%;
122+
}

0 commit comments

Comments
 (0)