mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 06:31:45 +08:00
feat(Popover): add default slot
This commit is contained in:
chenjiahan
neverland
parent
ac93092441
commit
cb47f2bbd1
@ -67,6 +67,29 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Placement
|
||||
|
||||
```html
|
||||
<van-popover placement="top" />
|
||||
```
|
||||
|
||||
`placement` supports the following values:
|
||||
|
||||
```bash
|
||||
top # Top middle
|
||||
top-start # Top left
|
||||
top-end # Top right
|
||||
left # Left middle
|
||||
left-start # Left top
|
||||
left-end # Left bottom
|
||||
right # Right middle
|
||||
right-start # Right top
|
||||
right-end # Right bottom
|
||||
bottom # Bottom middle
|
||||
bottom-start # Bottom left
|
||||
bottom-end # Bottom right
|
||||
```
|
||||
|
||||
### Show Icon
|
||||
|
||||
```html
|
||||
@ -123,29 +146,6 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Placement
|
||||
|
||||
```html
|
||||
<van-popover placement="top" />
|
||||
```
|
||||
|
||||
`placement` supports the following values:
|
||||
|
||||
```bash
|
||||
top # Top middle
|
||||
top-start # Top left
|
||||
top-end # Top right
|
||||
left # Left middle
|
||||
left-start # Left top
|
||||
left-end # Left bottom
|
||||
right # Right middle
|
||||
right-start # Right top
|
||||
right-end # Right bottom
|
||||
bottom # Bottom middle
|
||||
bottom-start # Bottom left
|
||||
bottom-end # Bottom right
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -184,4 +184,5 @@ bottom-end # Bottom right
|
||||
|
||||
| Name | Description |
|
||||
| --------- | ----------------- |
|
||||
| default | Custom content |
|
||||
| reference | Reference Element |
|
||||
|
||||
@ -66,6 +66,31 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 弹出位置
|
||||
|
||||
通过 `placement` 属性来控制气泡的弹出位置。
|
||||
|
||||
```html
|
||||
<van-popover placement="top" />
|
||||
```
|
||||
|
||||
`placement` 支持以下值：
|
||||
|
||||
```bash
|
||||
top # 顶部中间位置
|
||||
top-start # 顶部左侧位置
|
||||
top-end # 顶部右侧位置
|
||||
left # 左侧中间位置
|
||||
left-start # 左侧上方位置
|
||||
left-end # 左侧下方位置
|
||||
right # 右侧中间位置
|
||||
right-start # 右侧上方位置
|
||||
right-end # 右侧下方位置
|
||||
bottom # 底部中间位置
|
||||
bottom-start # 底部左侧位置
|
||||
bottom-end # 底部右侧位置
|
||||
```
|
||||
|
||||
### 展示图标
|
||||
|
||||
在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
|
||||
@ -124,29 +149,43 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 弹出位置
|
||||
### 自定义内容
|
||||
|
||||
通过 `placement` 属性来控制气泡的弹出位置。
|
||||
通过默认插槽，可以在 Popover 内部放置任意内容。
|
||||
|
||||
```html
|
||||
<van-popover placement="top" />
|
||||
<van-popover v-model="showPopover">
|
||||
<van-grid
|
||||
square
|
||||
clickable
|
||||
:border="false"
|
||||
column-num="3"
|
||||
style="width: 240px;"
|
||||
>
|
||||
<van-grid-item
|
||||
v-for="i in 6"
|
||||
:key="i"
|
||||
text="选项"
|
||||
icon="photo-o"
|
||||
@click="showPopover = false"
|
||||
/>
|
||||
</van-grid>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
自定义内容
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
```
|
||||
|
||||
`placement` 支持以下值：
|
||||
|
||||
```bash
|
||||
top # 顶部中间位置
|
||||
top-start # 顶部左侧位置
|
||||
top-end # 顶部右侧位置
|
||||
left # 左侧中间位置
|
||||
left-start # 左侧上方位置
|
||||
left-end # 左侧下方位置
|
||||
right # 右侧中间位置
|
||||
right-start # 右侧上方位置
|
||||
right-end # 右侧下方位置
|
||||
bottom # 底部中间位置
|
||||
bottom-start # 底部左侧位置
|
||||
bottom-end # 底部右侧位置
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
@ -189,4 +228,5 @@ bottom-end # 底部右侧位置
|
||||
|
||||
| 名称 | 说明 |
|
||||
| --------- | --------------------------- |
|
||||
| default | 自定义菜单内容 |
|
||||
| reference | 触发 Popover 显示的元素内容 |
|
||||
|
||||
@ -27,6 +27,36 @@
|
||||
</van-popover>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('placement')">
|
||||
<van-field
|
||||
is-link
|
||||
readonly
|
||||
name="picker"
|
||||
:label="t('choosePlacement')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
|
||||
<van-popup
|
||||
v-model="showPicker"
|
||||
round
|
||||
position="bottom"
|
||||
get-container="body"
|
||||
>
|
||||
<div class="demo-popover-box">
|
||||
<van-popover
|
||||
v-model="show.placement"
|
||||
:actions="t('shortActions')"
|
||||
:placement="currentPlacement"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="demo-popover-refer" />
|
||||
</template>
|
||||
</van-popover>
|
||||
</div>
|
||||
<van-picker :columns="placements" @change="onPickerChange" />
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('actionOptions')">
|
||||
<van-popover
|
||||
v-model="show.showIcon"
|
||||
@ -54,42 +84,33 @@
|
||||
</van-popover>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('placement')">
|
||||
<van-field
|
||||
is-link
|
||||
readonly
|
||||
name="picker"
|
||||
:value="currentPlacement"
|
||||
:label="t('choosePlacement')"
|
||||
:placeholder="t('choosePlacement')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
|
||||
<van-popup
|
||||
v-model="showPicker"
|
||||
round
|
||||
position="bottom"
|
||||
get-container="body"
|
||||
<demo-block :title="t('customContent')">
|
||||
<van-popover
|
||||
v-model="show.customContent"
|
||||
placement="top-start"
|
||||
style="margin-left: 16px;"
|
||||
>
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="placements"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<div class="demo-popover-box">
|
||||
<van-popover
|
||||
v-model="show.placement"
|
||||
:actions="t('shortActions')"
|
||||
:placement="currentPlacement"
|
||||
<van-grid
|
||||
square
|
||||
clickable
|
||||
:border="false"
|
||||
column-num="3"
|
||||
style="width: 240px;"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="demo-popover-refer" />
|
||||
</template>
|
||||
</van-popover>
|
||||
</div>
|
||||
<van-grid-item
|
||||
v-for="i in 6"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="t('option')"
|
||||
@click="show.customContent = false"
|
||||
/>
|
||||
</van-grid>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.customContent = true">
|
||||
{{ t('customContent') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -116,6 +137,7 @@ export default {
|
||||
lightTheme: '浅色风格',
|
||||
showPopover: '点击弹出气泡',
|
||||
actionOptions: '选项配置',
|
||||
customContent: '自定义内容',
|
||||
disableAction: '禁用选项',
|
||||
choosePlacement: '选择弹出位置',
|
||||
},
|
||||
@ -142,6 +164,7 @@ export default {
|
||||
lightTheme: 'Light Theme',
|
||||
showPopover: 'Show Popover',
|
||||
actionOptions: 'Action Options',
|
||||
customContent: 'Custom Content',
|
||||
disableAction: 'Disable Action',
|
||||
choosePlacement: 'Placement',
|
||||
},
|
||||
@ -154,6 +177,7 @@ export default {
|
||||
placement: false,
|
||||
darkTheme: false,
|
||||
lightTheme: false,
|
||||
customContent: false,
|
||||
disableAction: false,
|
||||
},
|
||||
showPicker: false,
|
||||
@ -176,13 +200,11 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.showPicker = false;
|
||||
this.currentPlacement = value;
|
||||
|
||||
onPickerChange(picker, value) {
|
||||
setTimeout(() => {
|
||||
this.show.placement = true;
|
||||
}, 300);
|
||||
this.currentPlacement = value;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -209,7 +231,7 @@ export default {
|
||||
&-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 110px 0 80px;
|
||||
margin: 110px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,7 +15,7 @@ const [createComponent, bem] = createNamespace('popover');
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
ClickOutsideMixin({
|
||||
event: 'click',
|
||||
event: 'touchstart',
|
||||
method: 'onClickOutside',
|
||||
}),
|
||||
],
|
||||
@ -129,9 +129,9 @@ export default createComponent({
|
||||
this.$emit('input', value);
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
onTouchstart(event) {
|
||||
event.stopPropagation();
|
||||
this.$emit('click', event);
|
||||
this.$emit('touchstart', event);
|
||||
},
|
||||
|
||||
onClickAction(action, index) {
|
||||
@ -180,14 +180,16 @@ export default createComponent({
|
||||
lockScroll={false}
|
||||
getContainer={this.getContainer}
|
||||
onOpen={this.onOpen}
|
||||
onClick={this.onClick}
|
||||
onClose={this.onClose}
|
||||
onInput={this.onToggle}
|
||||
onOpened={this.onOpened}
|
||||
onClosed={this.onClosed}
|
||||
nativeOnTouchstart={this.onTouchstart}
|
||||
>
|
||||
<div class={bem('arrow')} />
|
||||
{this.actions.map(this.renderAction)}
|
||||
<div class={bem('content')}>
|
||||
{this.slots('default') || this.actions.map(this.renderAction)}
|
||||
</div>
|
||||
</Popup>
|
||||
{this.slots('reference')}
|
||||
</span>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
.van-popover {
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
border-radius: @border-radius-lg;
|
||||
background-color: transparent;
|
||||
transition: opacity 0.15s, transform 0.15s;
|
||||
|
||||
&__wrapper {
|
||||
@ -20,6 +20,11 @@
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
overflow: hidden;
|
||||
border-radius: @border-radius-lg;
|
||||
}
|
||||
|
||||
&__action {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -191,8 +196,11 @@
|
||||
|
||||
&--light {
|
||||
color: @text-color;
|
||||
background-color: @white;
|
||||
box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
|
||||
|
||||
.van-popover__content {
|
||||
background-color: @white;
|
||||
box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
|
||||
}
|
||||
|
||||
.van-popover__arrow {
|
||||
color: @white;
|
||||
@ -215,7 +223,10 @@
|
||||
|
||||
&--dark {
|
||||
color: @white;
|
||||
background-color: #4a4a4a;
|
||||
|
||||
.van-popover__content {
|
||||
background-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.van-popover__arrow {
|
||||
color: #4a4a4a;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user