alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'dev' into next

Browse Source
This commit is contained in:
chenjiahan
2020-08-07 06:33:04 +08:00
parent 49206598fc db94fa3193
commit 17c64b24e7
84 changed files with 898 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dialog/Dialog.js
+41 -3
View File
@@ -2,6 +2,8 @@ import { createNamespace, addUnit } from '../utils';
import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
import Popup from '../popup';
import Button from '../button';
import GoodsAction from '../goods-action';
import GoodsActionButton from '../goods-action-button';
const [createComponent, bem, t] = createNamespace('dialog');
@@ -9,6 +11,7 @@ export default createComponent({
props: {
show: Boolean,
title: String,
theme: String,
width: [Number, String],
message: String,
className: null,
@@ -102,11 +105,44 @@ export default createComponent({
this.$emit('closed');
},
genRoundButtons() {
return (
<GoodsAction class={bem('footer')}>
{this.showCancelButton && (
<GoodsActionButton
size="large"
type="warning"
text={this.cancelButtonText || t('cancel')}
class={bem('cancel')}
color={this.cancelButtonColor}
loading={this.loading.cancel}
onClick={() => {
this.handleAction('cancel');
}}
/>
)}
{this.showConfirmButton && (
<GoodsActionButton
size="large"
type="danger"
text={this.confirmButtonText || t('confirm')}
class={bem('confirm')}
color={this.confirmButtonColor}
loading={this.loading.confirm}
onClick={() => {
this.handleAction('confirm');
}}
/>
)}
</GoodsAction>
);
},
genButtons() {
const multiple = this.showCancelButton && this.showConfirmButton;
return (
<div class={[BORDER_TOP, bem('footer', { buttons: multiple })]}>
<div class={[BORDER_TOP, bem('footer')]}>
{this.showCancelButton && (
<Button
size="large"
@@ -174,7 +210,7 @@ export default createComponent({
<Popup
show={this.show}
role="dialog"
class={[bem(), this.className]}
class={[bem([this.theme]), this.className]}
style={{ width: addUnit(this.width) }}
transition={this.transition}
lazyRender={this.lazyRender}
@@ -184,7 +220,9 @@ export default createComponent({
>
{Title}
{this.genContent(title)}
{this.genButtons()}
{this.theme === 'round-button'
? this.genRoundButtons()
: this.genButtons()}
</Popup>
);
},
src/dialog/README.md
+25 -2
View File
@@ -30,6 +30,27 @@ Dialog.alert({
});
```
### Round Button Style
Use round button style.
```js
Dialog.alert({
title: 'Title',
message: 'Content',
theme: 'round-button',
}).then(() => {
// on close
});
Dialog.alert({
message: 'Content',
theme: 'round-button',
}).then(() => {
// on close
});
```
### Confirm dialog
Used to confirm some messages, including a confirm button and a cancel button.
@@ -120,13 +141,14 @@ export default {
| width `v2.2.7` | Width | _number \| string_ | `320px` |
| message | Message | _string_ | - |
| messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` |
| theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` |
| className | Custom className | _any_ | - |
| showConfirmButton | Whether to show confirm button | _boolean_ | `true` |
| showCancelButton | Whether to show cancel button | _boolean_ | `false` |
| cancelButtonText | Cancel button text | _string_ | `Cancel` |
| cancelButtonColor | Cancel button color | _string_ | `black` |
| confirmButtonText | Confirm button text | _string_ | `Confirm` |
| confirmButtonColor | Confirm button color | _string_ | `#1989fa` |
| confirmButtonColor | Confirm button color | _string_ | `#ee0a24` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| overlayClass `v2.2.7` | Custom overlay class | _string_ | - |
| overlayStyle `v2.2.7` | Custom overlay style | _object_ | - |
@@ -147,12 +169,13 @@ export default {
| width `v2.2.7` | Width | _number \| string_ | `320px` |
| message | Message | _string_ | - |
| message-align | Message align，can be set to `left` `right` | _string_ | `center` |
| theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` |
| show-confirm-button | Whether to show confirm button | _boolean_ | `true` |
| show-cancel-button | Whether to show cancel button | _boolean_ | `false` |
| cancel-button-text | Cancel button text | _string_ | `Cancel` |
| cancel-button-color | Cancel button color | _string_ | `black` |
| confirm-button-text | Confirm button text | _string_ | `Confirm` |
| confirm-button-color | Confirm button color | _string_ | `#1989fa` |
| confirm-button-color | Confirm button color | _string_ | `#ee0a24` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| overlay-class `v2.2.7` | Custom overlay class | _string_ | - |
| overlay-style `v2.2.7` | Custom overlay style | _object_ | - |
src/dialog/README.zh-CN.md
+243
View File
@@ -0,0 +1,243 @@
# Dialog 弹出框
### 介绍
弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。
弹出框组件支持函数调用和组件调用两种方式。
### 函数调用
Dialog 是一个函数，调用后会直接在页面中弹出相应的模态框。
```js
import { Dialog } from 'vant';
Dialog({ message: '提示' });
```
### 组件调用
通过组件调用 Dialog 时，可以通过下面的方式进行注册：
```js
import Vue from 'vue';
import { Dialog } from 'vant';
// 全局注册
Vue.use(Dialog);
// 局部注册
export default {
components: {
[Dialog.Component.name]: Dialog.Component,
},
};
```
## 代码演示
### 消息提示
用于提示一些消息，只包含一个确认按钮。
```js
Dialog.alert({
title: '标题',
message: '弹窗内容',
}).then(() => {
// on close
});
Dialog.alert({
message: '弹窗内容',
}).then(() => {
// on close
});
```
### 圆角按钮风格
将 theme 选项设置为 `round-button` 可以展示圆角按钮风格的弹窗，该选项从 2.10.0 版本开始支持。
```js
Dialog.alert({
title: '标题',
message: '弹窗内容',
theme: 'round-button',
}).then(() => {
// on close
});
Dialog.alert({
message: '弹窗内容',
theme: 'round-button',
}).then(() => {
// on close
});
```
### 消息确认
用于确认消息，包含取消和确认按钮。
```js
Dialog.confirm({
title: '标题',
message: '弹窗内容',
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
```
### 异步关闭
通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。
```js
function beforeClose(action, done) {
if (action === 'confirm') {
setTimeout(done, 1000);
} else {
done();
}
}
Dialog.confirm({
title: '标题',
message: '弹窗内容',
beforeClose,
});
```
### 全局方法
引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 `$dialog` 方法，在所有组件内部都可以直接调用此方法。
```js
export default {
mounted() {
this.$dialog.alert({
message: '弹窗内容',
});
},
};
```
### 组件调用
如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。
```html
<van-dialog v-model="show" title="标题" show-cancel-button>
<img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog>
```
```js
export default {
data() {
return {
show: false,
};
},
};
```
## API
### 方法
| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
| Dialog | 展示弹窗 | `options` | `Promise` |
| Dialog.alert | 展示消息提示弹窗 | `options` | `Promise` |
| Dialog.confirm | 展示消息确认弹窗 | `options` | `Promise` |
| Dialog.setDefaultOptions | 修改默认配置，对所有 Dialog 生效 | `options` | `void` |
| Dialog.resetDefaultOptions | 重置默认配置，对所有 Dialog 生效 | - | `void` |
| Dialog.close | 关闭弹窗 | - | `void` |
### Options
通过函数调用 `Dialog` 时，支持传入以下选项：
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 标题 | _string_ | - |
| width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
| message | 文本内容，支持通过`\n`换行 | _string_ | - |
| messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
| theme | 样式风格，可选值为`round` | _string_ | `default` |
| className | 自定义类名 | _any_ | - |
| showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` |
| showCancelButton | 是否展示取消按钮 | _boolean_ | `false` |
| confirmButtonText | 确认按钮文案 | _string_ | `确认` |
| confirmButtonColor | 确认按钮颜色 | _string_ | `#ee0a24` |
| cancelButtonText | 取消按钮文案 | _string_ | `取消` |
| cancelButtonColor | 取消按钮颜色 | _string_ | `black` |
| overlay | 是否展示遮罩层 | _boolean_ | `true` |
| overlayClass `v2.2.7` | 自定义遮罩层类名 | _string_ | - |
| overlayStyle `v2.2.7` | 自定义遮罩层样式 | _object_ | - |
| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `true` |
| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
| lockScroll | 是否锁定背景滚动 | _boolean_ | `true` |
| allowHtml `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `true` |
| beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
### Props
通过组件调用 `Dialog` 时，支持以下 Props：
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 是否显示弹窗 | _boolean_ | - |
| title | 标题 | _string_ | - |
| width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
| message | 文本内容，支持通过`\n`换行 | _string_ | - |
| message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
| theme | 样式风格，可选值为`round` | _string_ | `default` |
| show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
| show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
| confirm-button-text | 确认按钮文案 | _string_ | `确认` |
| confirm-button-color | 确认按钮颜色 | _string_ | `#ee0a24` |
| cancel-button-text | 取消按钮文案 | _string_ | `取消` |
| cancel-button-color | 取消按钮颜色 | _string_ | `black` |
| overlay | 是否展示遮罩层 | _boolean_ | `true` |
| overlay-class `v2.2.7` | 自定义遮罩层类名 | _string_ | - |
| overlay-style `v2.2.7` | 自定义遮罩层样式 | _object_ | - |
| close-on-popstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `true` |
| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
| allow-html `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `true` |
| before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
### Events
通过组件调用 `Dialog` 时，支持以下事件：
| 事件 | 说明 | 回调参数 |
| ------- | ------------------------ | -------- |
| confirm | 点击确认按钮时触发 | - |
| cancel | 点击取消按钮时触发 | - |
| open | 打开弹窗时触发 | - |
| close | 关闭弹窗时触发 | - |
| opened | 打开弹窗且动画结束后触发 | - |
| closed | 关闭弹窗且动画结束后触发 | - |
### Slots
通过组件调用 `Dialog` 时，支持以下插槽：
| 名称 | 说明 |
| ------- | ---------- |
| default | 自定义内容 |
| title | 自定义标题 |
src/dialog/demo/index.vue
+26
View File
@@ -9,6 +9,15 @@
</van-button>
</demo-block>
<demo-block :title="t('roundButton')">
<van-button type="primary" @click="onClickRound">
{{ t('alert1') }}
</van-button>
<van-button type="primary" @click="onClickRound2">
{{ t('alert2') }}
</van-button>
</demo-block>
<demo-block :title="t('confirm')">
<van-button type="primary" @click="onClickConfirm">
{{ t('confirm') }}
@@ -45,6 +54,7 @@ export default {
alert2: '提示弹窗（无标题）',
confirm: '确认弹窗',
asyncClose: '异步关闭',
roundButton: '圆角按钮样式',
componentCall: '组件调用',
content: '代码是写出来给人看的，附带能在机器上运行',
},
@@ -53,6 +63,7 @@ export default {
alert2: 'Alert without title',
confirm: 'Confirm dialog',
asyncClose: 'Async Close',
roundButton: 'Round Button Style',
componentCall: 'Component Call',
},
},
@@ -79,6 +90,21 @@ export default {
});
},
onClickRound() {
this.$dialog.alert({
theme: 'round-button',
title: this.t('title'),
message: this.t('content'),
});
},
onClickRound2() {
this.$dialog.alert({
theme: 'round-button',
message: this.t('content'),
});
},
onClickConfirm() {
this.$dialog.confirm({
title: this.t('title'),
src/dialog/index.js
+1
View File
@@ -66,6 +66,7 @@ function Dialog(options) {
Dialog.defaultOptions = {
title: '',
width: '',
theme: null,
message: '',
overlay: true,
callback: null,
src/dialog/index.less
+22 -9
View File
@@ -55,19 +55,15 @@
}
&__footer {
display: flex;
overflow: hidden;
user-select: none;
&--buttons {
display: flex;
.van-button {
flex: 1;
}
}
}
.van-button {
&__confirm,
&__cancel {
flex: 1;
margin: 0;
border: 0;
}
@@ -78,6 +74,23 @@
}
}
&--round-button {
.van-dialog__footer {
position: relative;
height: auto;
padding: @padding-xs @padding-lg @padding-md;
}
.van-dialog__message {
padding-bottom: @padding-md;
color: @text-color;
}
.van-dialog__confirm {
color: @white;
}
}
&-bounce-enter-from {
transform: translate3d(-50%, -50%, 0) scale(0.7);
opacity: 0;
src/dialog/test/__snapshots__/demo.spec.js.snap
+10 -1
View File
@@ -11,6 +11,15 @@ exports[`renders demo correctly 1`] = `
提示弹窗（无标题）
</span></div>
</button></div>
<div><button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><span class="van-button__text">
提示弹窗
</span></div>
</button> <button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><span class="van-button__text">
提示弹窗（无标题）
</span></div>
</button></div>
<div><button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><span class="van-button__text">
确认弹窗
@@ -29,7 +38,7 @@ exports[`renders demo correctly 1`] = `
<div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
<div class="van-dialog__header">标题</div>
<div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
<div class="van-button__content"><span class="van-button__text">取消</span></div>
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
<div class="van-button__content"><span class="van-button__text">确认弹窗</span></div>
src/dialog/test/__snapshots__/index.spec.js.snap
+2 -2
View File
@@ -4,7 +4,7 @@ exports[`allow-html prop 1`] = `<div class="van-dialog__message">&lt;span&gt;tex
exports[`button color 1`] = `
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
<div class="van-button__content"><span class="van-button__text">取消</span></div>
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;">
<div class="van-button__content"><span class="van-button__text">确认</span></div>
@@ -14,7 +14,7 @@ exports[`button color 1`] = `
exports[`button text 1`] = `
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
<div class="van-button__content"><span class="van-button__text">Custom cancel</span></div>
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
<div class="van-button__content"><span class="van-button__text">Custom confirm</span></div>