blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Popup): add close-icon-position prop (#4507)

Browse Source
This commit is contained in:
neverland 2019-09-19 17:14:14 +08:00 committed by GitHub
parent 68da81a51a
commit 971b218873
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 139 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/action-sheet/README.md
View File

@ -105,7 +105,7 @@ export default {
| lazy-render | Whether to lazy render util appeared | *boolean* | `true` | - |
| lock-scroll | Whether to lock background scroll | *boolean* | `true` | - |
| duration | Transition duration, unit second | *number* | `0.3` | 2.0.3 |
| get-container | Return the mount node for action-sheet | *string \| () => HTMLElement* | - | - |
| get-container | Return the mount node for action-sheet | *string \| () => Element* | - | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | - |
### Events

2
src/action-sheet/README.zh-CN.md
View File

@ -119,7 +119,7 @@ export default {
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | - |
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - |
| duration | 动画时长，单位秒 | *number* | `0.3` | 2.0.3 |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | - | - |
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - |
### Events

4
src/dialog/README.md
View File

@ -133,7 +133,7 @@ export default {
| closeOnClickOverlay | Whether to close when click overlay | *boolean* | `false` | - |
| lockScroll | Whether to lock body scroll | *boolean* | `true` | - |
| beforeClose | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - | - |
| getContainer | Return the mount node for Dialog | *string \| () => HTMLElement* | `body` | - |
| getContainer | Return the mount node for Dialog | *string \| () => Element* | `body` | - |
### Props
@ -154,7 +154,7 @@ export default {
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `false` | - |
| lock-scroll | Whether to lock background scroll | *boolean* | `true` | - |
| before-close | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - | - |
| get-container | Return the mount node for Dialog | *string \| () => HTMLElement* | - | - |
| get-container | Return the mount node for Dialog | *string \| () => Element* | - | - |
### Events

4
src/dialog/README.zh-CN.md
View File

@ -162,7 +162,7 @@ export default {
| closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | *boolean* | `false` | - |
| lockScroll | 是否锁定背景滚动 | *boolean* | `true` | - |
| beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | - |
| getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | `body` | - |
| getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | `body` | - |
### Props
@ -185,7 +185,7 @@ export default {
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `false` | - |
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - |
| before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | - |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | - | - |
### Events

2
src/mixins/popup/type.ts
View File

@ -1,4 +1,4 @@
export type GetContainer = () => HTMLElement;
export type GetContainer = () => Element;
export type PopupMixinProps = {
value: boolean;

16
src/popup/README.md
View File

@ -14,9 +14,7 @@ Vue.use(Popup);
### Basic Usage
```html
<van-button type="primary" @click="showPopup">
Show Popup
</van-button>
<van-cell is-link @click="showPopup">Show Popup</van-cell>
<van-popup v-model="show">Content</van-popup>
```
@ -67,6 +65,15 @@ Use `position` prop to set popup display position
position="bottom"
:style="{ height: '20%' }"
/>
<!-- Icon Position -->
<van-popup
v-model="show"
closeable
close-icon-position="top-left"
position="bottom"
:style="{ height: '20%' }"
/>
```
### Round Corner
@ -132,8 +139,9 @@ export default {
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | - |
| closeable | Whether to show close icon | *boolean* | `false` | 2.2.0 |
| close-icon | Close icon name | *string* | `cross` | 2.2.0 |
| close-icon-position | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` | 2.2.2 |
| transition | Transition | *string* | `popup-slide` | - |
| get-container | Return the mount node for Popup | *string \| () => HTMLElement* | - | - |
| get-container | Return the mount node for Popup | *string \| () => Element* | - | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | 2.2.1 |
### Events

18
src/popup/README.zh-CN.md
View File

@ -20,9 +20,7 @@ Vue.use(Popup);
通过`v-model`控制弹出层是否展示
```html
<van-button type="primary" @click="showPopup">
展示弹出层
</van-button>
<van-cell is-link @click="showPopup">展示弹出层</van-cell>
<van-popup v-model="show">内容</van-popup>
```
@ -57,7 +55,7 @@ export default {
### 关闭图标
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置
```html
<van-popup
@ -75,6 +73,15 @@ export default {
position="bottom"
:style="{ height: '20%' }"
/>
<!-- 图标位置 -->
<van-popup
v-model="show"
closeable
close-icon-position="top-left"
position="bottom"
:style="{ height: '20%' }"
/>
```
### 圆角弹窗
@ -143,8 +150,9 @@ export default {
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | - |
| closeable | 是否显示关闭图标 | *boolean* | `false` | 2.2.0 |
| close-icon | 关闭图标名称或图片链接 | *string* | `cross` | 2.2.0 |
| close-icon-position | 关闭图标位置，可选值为`top-left` `bottom-left` `bottom-right` | *string* | `top-right` | 2.2.2 |
| transition | 动画类名，用法与 Vue 原生`transtion`组件的`name`属性一致 | *string* | - | - |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | - | - |
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | 2.2.1 |
### Events

47
src/popup/demo/index.vue
View File

@ -1,35 +1,28 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-button type="primary" @click="showBasic = true">{{ $t('buttonBasic') }}</van-button>
<van-cell :title="$t('buttonBasic')" is-link @click="showBasic = true" />
<van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">{{ $t('content') }}</van-popup>
</demo-block>
<demo-block :title="$t('position')">
<van-row>
<!-- top -->
<van-button type="primary" @click="showTop = true">{{ $t('buttonTop') }}</van-button>
<van-popup v-model="showTop" position="top" :style="{ height: '20%' }" />
<van-cell :title="$t('buttonTop')" is-link @click="showTop = true" />
<van-cell :title="$t('buttonBottom')" is-link @click="showBottom = true" />
<van-cell :title="$t('buttonLeft')" is-link @click="showLeft = true" />
<van-cell :title="$t('buttonRight')" is-link @click="showRight = true" />
<!-- bottom -->
<van-button type="primary" @click="showBottom = true">{{ $t('buttonBottom') }}</van-button>
<van-popup v-model="showBottom" position="bottom" :style="{ height: '20%' }" />
</van-row>
<!-- left -->
<van-button type="primary" @click="showLeft = true">{{ $t('buttonLeft') }}</van-button>
<van-popup v-model="showTop" position="top" :style="{ height: '20%' }" />
<van-popup v-model="showBottom" position="bottom" :style="{ height: '20%' }" />
<van-popup v-model="showLeft" position="left" :style="{ width: '20%', height: '100%' }" />
<!-- right -->
<van-button type="primary" @click="showRight = true">{{ $t('buttonRight') }}</van-button>
<van-popup v-model="showRight" position="right" :style="{ width: '20%', height: '100%' }" />
</demo-block>
<demo-block v-if="!$attrs.weapp" :title="$t('closeIcon')">
<van-button type="primary" @click="showCloseIcon = true">{{ $t('closeIcon') }}</van-button>
<van-popup v-model="showCloseIcon" closeable position="bottom" :style="{ height: '20%' }" />
<van-cell :title="$t('closeIcon')" is-link @click="showCloseIcon = true" />
<van-cell :title="$t('customCloseIcon')" is-link @click="showCustomCloseIcon = true" />
<van-cell :title="$t('customIconPosition')" is-link @click="showCustomIconPosition = true" />
<van-button type="primary" @click="showCustomCloseIcon = true">{{ $t('customCloseIcon') }}</van-button>
<van-popup v-model="showCloseIcon" closeable position="bottom" :style="{ height: '20%' }" />
<van-popup
v-model="showCustomCloseIcon"
closeable
@ -37,15 +30,22 @@
position="bottom"
:style="{ height: '20%' }"
/>
<van-popup
v-model="showCustomIconPosition"
closeable
close-icon-position="top-left"
position="bottom"
:style="{ height: '20%' }"
/>
</demo-block>
<demo-block v-if="!$attrs.weapp" :title="$t('roundCorner')">
<van-button type="primary" @click="showRoundCorner = true">{{ $t('roundCorner') }}</van-button>
<van-cell :title="$t('roundCorner')" is-link @click="showRoundCorner = true" />
<van-popup v-model="showRoundCorner" round position="bottom" :style="{ height: '20%' }" />
</demo-block>
<demo-block v-if="!$attrs.weapp" :title="$t('getContainer')">
<van-button type="primary" @click="showGetContainer = true">{{ $t('getContainer') }}</van-button>
<van-cell :title="$t('getContainer')" is-link @click="showGetContainer = true" />
<van-popup v-model="showGetContainer" get-container="body" :style="{ padding: '30px 50px' }" />
</demo-block>
</demo-section>
@ -64,7 +64,8 @@ export default {
getContainer: '指定挂载节点',
roundCorner: '圆角弹窗',
closeIcon: '关闭图标',
customCloseIcon: '自定义图标'
customCloseIcon: '自定义图标',
customIconPosition: '图标位置'
},
'en-US': {
position: 'Position',
@ -76,7 +77,8 @@ export default {
getContainer: 'Get Container',
roundCorner: 'Round Corner',
closeIcon: 'Close Icon',
customCloseIcon: 'Custom Icon'
customCloseIcon: 'Custom Icon',
customIconPosition: 'Icon Position'
}
},
@ -91,6 +93,7 @@ export default {
showRoundCorner: false,
showGetContainer: false,
showCustomCloseIcon: false,
showCustomIconPosition: false
};
}
};

6
src/popup/index.js
View File

@ -17,6 +17,10 @@ export default createComponent({
type: String,
default: 'cross'
},
closeIconPosition: {
type: String,
default: 'top-right'
},
position: {
type: String,
default: 'center'
@ -73,7 +77,7 @@ export default createComponent({
>
{this.slots()}
{this.closeable && (
<Icon name={this.closeIcon} class={bem('close-icon')} onClick={this.close} />
<Icon name={this.closeIcon} class={bem('close-icon', this.closeIconPosition)} onClick={this.close} />
)}
</div>
</transition>

22
src/popup/index.less
View File

@ -90,8 +90,6 @@
&__close-icon {
position: absolute;
top: @popup-close-icon-margin;
right: @popup-close-icon-margin;
z-index: @popup-close-icon-z-index;
color: @popup-close-icon-color;
font-size: @popup-close-icon-size;
@ -99,6 +97,26 @@
&:active {
opacity: .6;
}
&--top-left {
top: @popup-close-icon-margin;
left: @popup-close-icon-margin;
}
&--top-right {
top: @popup-close-icon-margin;
right: @popup-close-icon-margin;
}
&--bottom-left {
bottom: @popup-close-icon-margin;
left: @popup-close-icon-margin;
}
&--bottom-right {
right: @popup-close-icon-margin;
bottom: @popup-close-icon-margin;
}
}
}
}

60
src/popup/test/__snapshots__/demo.spec.js.snap
View File

@ -2,24 +2,64 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">展示弹出层</span></button>
<div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>展示弹出层</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<!---->
</div>
<div>
<div class="van-row"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">顶部弹出</span></button>
<!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">底部弹出</span></button>
<!---->
</div> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">左侧弹出</span></button>
<!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">右侧弹出</span></button>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>顶部弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>底部弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>左侧弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>右侧弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<!---->
<!---->
<!---->
<!---->
</div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">关闭图标</span></button>
<!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义图标</span></button>
<div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>关闭图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>自定义图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>图标位置</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<!---->
<!---->
<!---->
</div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">圆角弹窗</span></button>
<div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>圆角弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<!---->
</div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">指定挂载节点</span></button> </div>
<div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>指定挂载节点</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
</div>
</div>
`;

2
src/popup/test/__snapshots__/index.spec.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`close-icon prop 1`] = `
<div class="van-popup van-popup--center" name="van-fade"><i class="van-icon van-icon-success van-popup__close-icon">
<div class="van-popup van-popup--center" name="van-fade"><i class="van-icon van-icon-success van-popup__close-icon van-popup__close-icon--top-right">
<!----></i></div>
`;

2
src/sku/README.md
View File

@ -139,7 +139,7 @@ export default {
| stepper-title | Quantity title | *string* | `Quantity` | - |
| custom-stepper-config | Custom stepper related config | *object* | `{}` | - |
| message-config | Message related config | *object* | `{}` | - |
| get-container | Return the mount node for sku | *string \| () => HTMLElement* | - | - |
| get-container | Return the mount node for sku | *string \| () => Element* | - | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | 2.2.1 |
### Events

2
src/sku/README.zh-CN.md
View File

@ -141,7 +141,7 @@ export default {
| stepper-title | 数量选择组件左侧文案 | *string* | `购买数量` | - |
| custom-stepper-config | 步进器相关自定义配置 | *object* | `{}` | - |
| message-config | 留言相关配置 | *object* | `{}` | - |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | - | - |
| initial-sku | 默认选中的 sku，具体参考高级用法 | *object* | `{}` | - |
| show-soldout-sku | 是否展示售罄的 sku，默认展示并置灰 | *boolean* | `true` | - |
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | 2.2.1 |

2
src/toast/README.md
View File

@ -127,4 +127,4 @@ toast2.clear();
| className | Custom className | *any* | - | - |
| onOpened | Callback function after opened | *Function* | - | - |
| onClose | Callback function after close | *Function* | - | - |
| getContainer | Return the mount node for Toast | *string \| () => HTMLElement* | `body` | - |
| getContainer | Return the mount node for Toast | *string \| () => Element* | `body` | - |

2
src/toast/README.zh-CN.md
View File

@ -127,4 +127,4 @@ toast2.clear();
| className | 自定义类名 | *any* | - | - |
| onOpened | 完全展示后的回调函数 | *Function* | - | - |
| onClose | 关闭时的回调函数 | *Function* | - | - |
| getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | `body` | - |
| getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | `body` | - |

2
types/dialog.d.ts vendored
View File

@ -16,7 +16,7 @@ export type DialogOptions = {
showConfirmButton?: boolean;
showCancelButton?: boolean;
closeOnClickOverlay?: boolean;
getContainer?: string | (() => HTMLElement);
getContainer?: string | (() => Element);
beforeClose?: (action: DialogAction, done: DialogDone) => void;
};

2
types/toast.d.ts vendored
View File

@ -16,7 +16,7 @@ export type ToastOptions = {
closeOnClick?: boolean;
loadingType?: string;
message?: ToastMessage;
getContainer?: string | (() => HTMLElement);
getContainer?: string | (() => Element);
};
export interface VanToast extends Vue, VanPopupMixin {