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: add popover component

Browse Source
This commit is contained in:
chenjiahan 2020-11-16 20:49:46 +08:00 committed by neverland
parent cd6ce609f5
commit 8f5a84ceec
10 changed files with 389 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/popover/README.md Normal file
View File

@ -0,0 +1,32 @@
# Popover
### Install
```js
import Vue from 'vue';
import { Popover } from 'vant';
Vue.use(Popover);
```
## Usage
### Basic Usage
```html
```
## API
### Props
| Attribute | Description | Type | Default |
| --------- | ----------- | ---- | ------- |
### Events
| Event | Description | Arguments |
| ----- | ----------- | --------- |

66
src/popover/README.zh-CN.md Normal file
View File

@ -0,0 +1,66 @@
# Popover 气泡弹出框
### 介绍
### 引入
```js
import Vue from 'vue';
import { Popover } from 'vant';
Vue.use(Popover);
```
## 代码演示
### 基础用法
```html
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 是否展示气泡弹出层 | _boolean_ | `false` |
| actions | 选项列表 | _Action[]_ | `[]` |
| placement | 弹出位置 | _string_ | - |
| theme | 主题风格，可选值为 `light` | _string_ | `dark` |
| text-color | 自定义文字颜色 | _string_ | - |
| background-color | 自定义背景颜色 | _string_ | - |
| overlay | 是否显示遮罩层 | _boolean_ | `false` |
| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `false` |
| close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
### Action 数据结构
`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
| 键名 | 说明 | 类型 |
| --------- | ------------------------ | -------- |
| text | 文字内容 | _string_ |
| className | 为对应选项添加额外的类名 | _any_ |
### placement 可选值
top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom
### Events
| 事件名 | 说明 | 回调参数 |
| ------ | ------------------------ | ------------------------------- |
| select | 点击选项时触发 | _action: Action, index: number_ |
| open | 打开菜单时触发 | - |
| close | 关闭菜单时触发 | - |
| opened | 打开菜单且动画结束后触发 | - |
| closed | 关闭菜单且动画结束后触发 | - |
### Slots
| 名称 | 说明 |
| ------- | -------------------- |
| default | 自定义菜单的展示内容 |

60
src/popover/demo/index.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-popover
v-model="show.basic"
:actions="t('actions')"
placement="bottom-left"
>
<van-button @click="show.basic = true">
{{ t('showPopover') }}
</van-button>
</van-popover>
</demo-block>
<demo-block :title="t('lightTheme')">
<van-popover
v-model="show.lightTheme"
theme="light"
:actions="t('actions')"
placement="bottom-left"
>
<van-button @click="show.lightTheme = true">
{{ t('lightTheme') }}
</van-button>
</van-popover>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
actions: [{ text: '文本' }, { text: '文本' }, { text: '文本' }],
lightTheme: '浅色风格',
showPopover: '点击弹出气泡',
},
'en-US': {
actions: [{ text: 'Text' }, { text: 'Text' }, { text: 'Text' }],
lightTheme: 'Light Theme',
showPopover: 'Show Popover',
},
},
data() {
return {
show: {
basic: false,
lightTheme: false,
},
};
},
methods: {},
};
</script>
<style lang="less">
@import '../../style/var';
</style>

76
src/popover/index.js Normal file
View File

@ -0,0 +1,76 @@
import { createNamespace } from '../utils';
// Mixins
import { ClickOutsideMixin } from '../mixins/click-outside';
// Components
import Popup from '../popup';
const [createComponent, bem] = createNamespace('popover');
export default createComponent({
mixins: [
ClickOutsideMixin({
event: 'click',
method: 'onClickOutside',
}),
],
props: {
value: Boolean,
overlay: Boolean,
placement: String,
textColor: String,
getContainer: [String, Function],
backgroundColor: String,
closeOnClickAction: Boolean,
theme: {
type: String,
default: 'dark',
},
actions: {
type: Array,
default: () => [],
},
},
methods: {
renderAction(action) {
return <div class={bem('action')}>{action.text}</div>;
},
onToggle(value) {
this.$emit('input', value);
},
onClickAction(action, index) {
this.$emit('select', action, index);
if (this.closeOnClickAction) {
this.$emit('input', false);
}
},
onClickOutside() {
this.$emit('input', false);
},
},
render() {
return (
<span ref="wrapper" class={bem('wrapper')}>
<Popup
value={this.value}
class={bem([this.theme])}
overlay={this.overlay}
transition="van-popover-zoom"
getContainer={this.getContainer}
onInput={this.onToggle}
>
{this.actions.map(this.renderAction)}
</Popup>
{this.slots('default')}
</span>
);
},
});

61
src/popover/index.less Normal file
View File

@ -0,0 +1,61 @@
@import '../style/var';
@import '../style/mixins/hairline';
.van-popover {
position: absolute;
border-radius: @border-radius-lg;
transform: none;
transition: all 0.3s;
&__action {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 128px;
height: 44px;
font-size: @font-size-md;
&::after {
.hairline-bottom(@cell-border-color, @padding-md, @padding-md);
}
&:last-child::after {
display: none;
}
}
&--light {
color: @text-color;
background-color: @white;
box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
.van-popover__action {
&:active {
background-color: @active-color;
}
}
}
&--dark {
color: @white;
background-color: @gray-8;
opacity: 0.9;
.van-popover__action {
&::after {
border-color: @gray-7;
}
&:active {
opacity: @active-opacity;
}
}
}
&-zoom-enter,
&-zoom-leave-active {
transform: scale(0.8);
opacity: 0;
}
}

58
src/popover/test/__snapshots__/demo.spec.js.snap Normal file
View File

@ -0,0 +1,58 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-row">
<div class="van-col van-col--8">span: 8</div>
<div class="van-col van-col--8">span: 8</div>
<div class="van-col van-col--8">span: 8</div>
</div>
<div class="van-row">
<div class="van-col van-col--4">span: 4</div>
<div class="van-col van-col--10 van-col--offset-4">
offset: 4, span: 10
</div>
</div>
<div class="van-row">
<div class="van-col van-col--12 van-col--offset-12">
offset: 12, span: 12
</div>
</div>
</div>
<div>
<div class="van-row">
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
</div>
</div>
<div>
<div class="van-row van-row--flex">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-center">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-end">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-space-between">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-space-around">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
</div>
</div>
`;

22
src/popover/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`gutter prop 1`] = `
<div class="van-row">
<div class="van-col van-col--24">24</div>
<div class="van-col van-col--12" style="padding-right: 12px;">12</div>
<div class="van-col van-col--12" style="padding-left: 12px;">12</div>
<div class="van-col van-col--8" style="padding-right: 16px;">8</div>
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">8</div>
<div class="van-col van-col--8" style="padding-left: 16px;">8</div>
<div class="van-col van-col--6" style="padding-right: 18px;">6</div>
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
<div class="van-col van-col--6" style="padding-left: 12px; padding-right: 6px;">6</div>
<div class="van-col van-col--6" style="padding-left: 18px;">6</div>
<div class="van-col van-col--7" style="padding-right: 18px;">7</div>
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
<div class="van-col van-col--5" style="padding-left: 12px; padding-right: 6px;">5</div>
<div class="van-col van-col--4" style="padding-left: 18px;">4</div>
<div class="van-col van-col--3" style="padding-right: 12px;">3</div>
<div class="van-col van-col--2" style="padding-left: 12px;">2</div>
</div>
`;

4
src/popover/test/demo.spec.js Normal file
View File

@ -0,0 +1,4 @@
import Demo from '../demo';
import { snapshotDemo } from '../../../test/demo';
snapshotDemo(Demo);

2
src/popover/test/index.spec.js Normal file
View File

@ -0,0 +1,2 @@
// import Popover from '..';
// import { mount } from '../../../test';

8
vant.config.js
View File

@ -275,6 +275,10 @@ module.exports = {
path: 'notice-bar',
title: 'NoticeBar 通知栏',
},
{
path: 'popover',
title: 'Popover 气泡弹出框',
},
{
path: 'progress',
title: 'Progress 进度条',
@ -638,6 +642,10 @@ module.exports = {
path: 'notice-bar',
title: 'NoticeBar',
},
{
path: 'popover',
title: 'Popover',
},
{
path: 'progress',
title: 'Progress',