alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages 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
18 changed files with 139 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/popup/README.md
+12 -4
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
src/popup/README.zh-CN.md
+13 -5
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
src/popup/demo/index.vue
+25 -22
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
};
}
};
src/popup/index.js
+5 -1
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>
src/popup/index.less
+20 -2
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;
}
}
}
}
src/popup/test/__snapshots__/demo.spec.js.snap
+50 -10
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>
`;
src/popup/test/__snapshots__/index.spec.js.snap
+1 -1
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>
`;