From 9213839980a44a45d2290beb5d839529407e1636 Mon Sep 17 00:00:00 2001
From: Hex <hex@codeigniter.org.cn>
Date: Tue, 17 Nov 2020 21:56:17 +0800
Subject: [PATCH 01/23] fix(ActionSheet): The height of the flex container is
 lost under iOS 10 (#7578)

---
 src/action-sheet/index.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less
index 9928c7bcb..17b2e124f 100644
--- a/src/action-sheet/index.less
+++ b/src/action-sheet/index.less
@@ -9,7 +9,7 @@
   color: @action-sheet-item-text-color;
 
   &__content {
-    flex: 1;
+    flex: 1 auto;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }

From cd6ce609f5011c74a25d38519a4483d278a03aca Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 17 Nov 2020 22:04:34 +0800
Subject: [PATCH 02/23] docs(theme): update less-loader version tip #5877

---
 docs/markdown/theme.zh-CN.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md
index 2287b65bb..bc62ba87f 100644
--- a/docs/markdown/theme.zh-CN.md
+++ b/docs/markdown/theme.zh-CN.md
@@ -75,7 +75,7 @@ module.exports = {
         {
           loader: 'less-loader',
           options: {
-            // 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
+            // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
             lessOptions: {
               modifyVars: {
                 // 直接覆盖变量
@@ -101,7 +101,7 @@ module.exports = {
   css: {
     loaderOptions: {
       less: {
-        // 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
+        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
         lessOptions: {
           modifyVars: {
             // 直接覆盖变量

From 8f5a84ceecee85ed516b072c359642713f8fce4a Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 16 Nov 2020 20:49:46 +0800
Subject: [PATCH 03/23] feat: add popover component

---
 src/popover/README.md                         | 32 ++++++++
 src/popover/README.zh-CN.md                   | 66 ++++++++++++++++
 src/popover/demo/index.vue                    | 60 +++++++++++++++
 src/popover/index.js                          | 76 +++++++++++++++++++
 src/popover/index.less                        | 61 +++++++++++++++
 .../test/__snapshots__/demo.spec.js.snap      | 58 ++++++++++++++
 .../test/__snapshots__/index.spec.js.snap     | 22 ++++++
 src/popover/test/demo.spec.js                 |  4 +
 src/popover/test/index.spec.js                |  2 +
 vant.config.js                                |  8 ++
 10 files changed, 389 insertions(+)
 create mode 100644 src/popover/README.md
 create mode 100644 src/popover/README.zh-CN.md
 create mode 100644 src/popover/demo/index.vue
 create mode 100644 src/popover/index.js
 create mode 100644 src/popover/index.less
 create mode 100644 src/popover/test/__snapshots__/demo.spec.js.snap
 create mode 100644 src/popover/test/__snapshots__/index.spec.js.snap
 create mode 100644 src/popover/test/demo.spec.js
 create mode 100644 src/popover/test/index.spec.js

diff --git a/src/popover/README.md b/src/popover/README.md
new file mode 100644
index 000000000..5772a8d1b
--- /dev/null
+++ b/src/popover/README.md
@@ -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 |
+| ----- | ----------- | --------- |
+
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
new file mode 100644
index 000000000..e67674d25
--- /dev/null
+++ b/src/popover/README.zh-CN.md
@@ -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 | 自定义菜单的展示内容 |
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
new file mode 100644
index 000000000..98940a1db
--- /dev/null
+++ b/src/popover/demo/index.vue
@@ -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>
diff --git a/src/popover/index.js b/src/popover/index.js
new file mode 100644
index 000000000..93b722a53
--- /dev/null
+++ b/src/popover/index.js
@@ -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>
+    );
+  },
+});
diff --git a/src/popover/index.less b/src/popover/index.less
new file mode 100644
index 000000000..a51896139
--- /dev/null
+++ b/src/popover/index.less
@@ -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;
+  }
+}
diff --git a/src/popover/test/__snapshots__/demo.spec.js.snap b/src/popover/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..7c04f9b40
--- /dev/null
+++ b/src/popover/test/__snapshots__/demo.spec.js.snap
@@ -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>
+`;
diff --git a/src/popover/test/__snapshots__/index.spec.js.snap b/src/popover/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..2d4588095
--- /dev/null
+++ b/src/popover/test/__snapshots__/index.spec.js.snap
@@ -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>
+`;
diff --git a/src/popover/test/demo.spec.js b/src/popover/test/demo.spec.js
new file mode 100644
index 000000000..5c70922b5
--- /dev/null
+++ b/src/popover/test/demo.spec.js
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
diff --git a/src/popover/test/index.spec.js b/src/popover/test/index.spec.js
new file mode 100644
index 000000000..0ccd98fb1
--- /dev/null
+++ b/src/popover/test/index.spec.js
@@ -0,0 +1,2 @@
+// import Popover from '..';
+// import { mount } from '../../../test';
diff --git a/vant.config.js b/vant.config.js
index d025939c2..d7c9046dc 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -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',

From 49a8d87845e553dfff56c2c2cc56973df499f9d9 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 17 Nov 2020 17:00:45 +0800
Subject: [PATCH 04/23] feat(Popover): using popperjs

---
 package.json               |  1 +
 src/popover/demo/index.vue | 14 +++++++---
 src/popover/index.js       | 56 +++++++++++++++++++++++++++++++++++++-
 src/popover/index.less     | 18 +++++++-----
 yarn.lock                  |  5 ++++
 5 files changed, 82 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 35ad5970b..d2f990b5e 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "7.x",
+    "@popperjs/core": "^2.5.4",
     "@vant/icons": "1.4.0",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
     "vue-lazyload": "1.2.3"
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 98940a1db..644a69370 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -4,9 +4,9 @@
       <van-popover
         v-model="show.basic"
         :actions="t('actions')"
-        placement="bottom-left"
+        placement="bottom"
       >
-        <van-button @click="show.basic = true">
+        <van-button type="primary" @click="show.basic = true">
           {{ t('showPopover') }}
         </van-button>
       </van-popover>
@@ -17,9 +17,9 @@
         v-model="show.lightTheme"
         theme="light"
         :actions="t('actions')"
-        placement="bottom-left"
+        placement="bottom"
       >
-        <van-button @click="show.lightTheme = true">
+        <van-button type="primary" @click="show.lightTheme = true">
           {{ t('lightTheme') }}
         </van-button>
       </van-popover>
@@ -57,4 +57,10 @@ export default {
 
 <style lang="less">
 @import '../../style/var';
+
+.demo-popover {
+  .van-popover__wrapper {
+    margin-left: @padding-md;
+  }
+}
 </style>
diff --git a/src/popover/index.js b/src/popover/index.js
index 93b722a53..39dbc01ed 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { createPopper } from '@popperjs/core';
 
 // Mixins
 import { ClickOutsideMixin } from '../mixins/click-outside';
@@ -21,9 +22,12 @@ export default createComponent({
     overlay: Boolean,
     placement: String,
     textColor: String,
-    getContainer: [String, Function],
     backgroundColor: String,
     closeOnClickAction: Boolean,
+    offset: {
+      type: Array,
+      default: [0, 0],
+    },
     theme: {
       type: String,
       default: 'dark',
@@ -32,9 +36,55 @@ export default createComponent({
       type: Array,
       default: () => [],
     },
+    getContainer: {
+      type: [String, Function],
+      default: 'body',
+    },
+  },
+
+  data() {
+    return {
+      location: null,
+    };
+  },
+
+  watch: {
+    value(value) {
+      if (value) {
+        this.updateLocation();
+      }
+    },
+  },
+
+  mounted() {
+    if (this.value) {
+      this.updateLocation();
+    }
   },
 
   methods: {
+    updateLocation() {
+      this.$nextTick(() => {
+        createPopper(this.$refs.wrapper, this.$refs.popover.$el, {
+          placement: this.placement,
+          modifiers: [
+            {
+              name: 'computeStyles',
+              options: {
+                adaptive: false,
+              },
+            },
+            {
+              name: 'offset',
+              options: {
+                offset: this.offset,
+              },
+            },
+          ],
+        });
+      });
+    },
+
     renderAction(action) {
       return <div class={bem('action')}>{action.text}</div>;
     },
@@ -60,10 +110,14 @@ export default createComponent({
     return (
       <span ref="wrapper" class={bem('wrapper')}>
         <Popup
+          ref="popover"
           value={this.value}
+          style={this.location}
           class={bem([this.theme])}
           overlay={this.overlay}
+          position=""
           transition="van-popover-zoom"
+          lockScroll={false}
           getContainer={this.getContainer}
           onInput={this.onToggle}
         >
diff --git a/src/popover/index.less b/src/popover/index.less
index a51896139..f27fe55db 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -4,8 +4,11 @@
 .van-popover {
   position: absolute;
   border-radius: @border-radius-lg;
-  transform: none;
-  transition: all 0.3s;
+  transition-duration: 0s;
+
+  &__wrapper {
+    display: inline-block;
+  }
 
   &__action {
     position: relative;
@@ -53,9 +56,10 @@
     }
   }
 
-  &-zoom-enter,
-  &-zoom-leave-active {
-    transform: scale(0.8);
-    opacity: 0;
-  }
+  // &-zoom-enter,
+  // &-zoom-leave-active {
+  //   transform: scale(0.8);
+  //   opacity: 0;
+  //   transition: all 0.3s;
+  // }
 }
diff --git a/yarn.lock b/yarn.lock
index dfca40127..891acde56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1524,6 +1524,11 @@
   dependencies:
     "@types/node" ">= 8"
 
+"@popperjs/core@^2.5.4":
+  version "2.5.4"
+  resolved "https://registry.npm.taobao.org/@popperjs/core/download/@popperjs/core-2.5.4.tgz#de25b5da9f727985a3757fd59b5d028aba75841a"
+  integrity sha1-3iW12p9yeYWjdX/Vm10Cirp1hBo=
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"

From f58fa0f7465675ecd0e51410714062ef7bace537 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 17 Nov 2020 20:48:08 +0800
Subject: [PATCH 05/23] feat(Popover): add arrow

---
 src/popover/demo/index.vue |   2 +-
 src/popover/index.js       |   5 +-
 src/popover/index.less     | 134 +++++++++++++++++++++++++++++++++++++
 3 files changed, 138 insertions(+), 3 deletions(-)

diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 644a69370..07d4cfea6 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -17,7 +17,7 @@
         v-model="show.lightTheme"
         theme="light"
         :actions="t('actions')"
-        placement="bottom"
+        placement="right-end"
       >
         <van-button type="primary" @click="show.lightTheme = true">
           {{ t('lightTheme') }}
diff --git a/src/popover/index.js b/src/popover/index.js
index 39dbc01ed..ed6e72535 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -26,7 +26,7 @@ export default createComponent({
     closeOnClickAction: Boolean,
     offset: {
       type: Array,
-      default: [0, 0],
+      default: () => [0, 8],
     },
     theme: {
       type: String,
@@ -113,7 +113,7 @@ export default createComponent({
           ref="popover"
           value={this.value}
           style={this.location}
-          class={bem([this.theme])}
+          class={bem([this.theme, `placement-${this.placement}`])}
           overlay={this.overlay}
           position=""
           transition="van-popover-zoom"
@@ -121,6 +121,7 @@ export default createComponent({
           getContainer={this.getContainer}
           onInput={this.onToggle}
         >
+          <div class={bem('arrow')} />
           {this.actions.map(this.renderAction)}
         </Popup>
         {this.slots('default')}
diff --git a/src/popover/index.less b/src/popover/index.less
index f27fe55db..7f8a4fb7a 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -3,6 +3,7 @@
 
 .van-popover {
   position: absolute;
+  overflow: visible;
   border-radius: @border-radius-lg;
   transition-duration: 0s;
 
@@ -10,6 +11,15 @@
     display: inline-block;
   }
 
+  &__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 6px;
+  }
+
   &__action {
     position: relative;
     display: flex;
@@ -28,11 +38,131 @@
     }
   }
 
+  &--placement-top,
+  &--placement-top-start,
+  &--placement-top-end {
+    .van-popover__arrow {
+      bottom: 0;
+      border-top-color: currentColor;
+      border-bottom-width: 0;
+      transform: translate(-50%, 100%);
+    }
+  }
+
+  &--placement-top {
+    .van-popover__arrow {
+      left: 50%;
+    }
+  }
+
+  &--placement-top-start {
+    .van-popover__arrow {
+      left: @padding-md;
+    }
+  }
+
+  &--placement-top-end {
+    .van-popover__arrow {
+      right: @padding-md;
+    }
+  }
+
+  &--placement-left,
+  &--placement-left-start,
+  &--placement-left-end {
+    .van-popover__arrow {
+      right: 0;
+      border-right-width: 0;
+      border-left-color: currentColor;
+      transform: translate(100%, -50%);
+    }
+  }
+
+  &--placement-left {
+    .van-popover__arrow {
+      top: 50%;
+    }
+  }
+
+  &--placement-left-start {
+    .van-popover__arrow {
+      top: @padding-md;
+    }
+  }
+
+  &--placement-left-end {
+    .van-popover__arrow {
+      bottom: @padding-md;
+    }
+  }
+
+  &--placement-right,
+  &--placement-right-start,
+  &--placement-right-end {
+    .van-popover__arrow {
+      left: 0;
+      border-right-color: currentColor;
+      border-left-width: 0;
+      transform: translate(-100%, -50%);
+    }
+  }
+
+  &--placement-right {
+    .van-popover__arrow {
+      top: 50%;
+    }
+  }
+
+  &--placement-right-start {
+    .van-popover__arrow {
+      top: @padding-md;
+    }
+  }
+
+  &--placement-right-end {
+    .van-popover__arrow {
+      bottom: @padding-md;
+    }
+  }
+
+  &--placement-bottom,
+  &--placement-bottom-start,
+  &--placement-bottom-end {
+    .van-popover__arrow {
+      top: 0;
+      border-top-width: 0;
+      border-bottom-color: currentColor;
+      transform: translate(-50%, -100%);
+    }
+  }
+
+  &--placement-bottom {
+    .van-popover__arrow {
+      left: 50%;
+    }
+  }
+
+  &--placement-bottom-start {
+    .van-popover__arrow {
+      left: @padding-md;
+    }
+  }
+
+  &--placement-bottom-end {
+    .van-popover__arrow {
+      right: @padding-md;
+    }
+  }
+
   &--light {
     color: @text-color;
     background-color: @white;
     box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
 
+    .van-popover__arrow {
+      color: @white;
+    }
+
     .van-popover__action {
       &:active {
         background-color: @active-color;
@@ -45,6 +175,10 @@
     background-color: @gray-8;
     opacity: 0.9;
 
+    .van-popover__arrow {
+      color: @gray-8;
+    }
+
     .van-popover__action {
       &::after {
         border-color: @gray-7;

From 03fd1f297d0c325160eb9116783f9f291f7b3557 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 18 Nov 2020 10:05:34 +0800
Subject: [PATCH 06/23] docs(Popover): add choose placement demo

---
 src/popover/README.zh-CN.md |   2 +-
 src/popover/demo/index.vue  | 115 ++++++++++++++++++++++++++++++------
 src/popover/index.js        |  12 +++-
 src/style/demo/index.vue    |   2 +-
 4 files changed, 109 insertions(+), 22 deletions(-)

diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index e67674d25..3b582b61f 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -28,7 +28,7 @@ Vue.use(Popover);
 | v-model | 是否展示气泡弹出层 | _boolean_ | `false` |
 | actions | 选项列表 | _Action[]_ | `[]` |
 | placement | 弹出位置 | _string_ | - |
-| theme | 主题风格，可选值为 `light` | _string_ | `dark` |
+| theme | 主题风格，可选值为 `dark` | _string_ | `light` |
 | text-color | 自定义文字颜色 | _string_ | - |
 | background-color | 自定义背景颜色 | _string_ | - |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 07d4cfea6..fa57dfdad 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -2,27 +2,62 @@
   <demo-section>
     <demo-block :title="t('basicUsage')">
       <van-popover
-        v-model="show.basic"
+        v-model="show.lightTheme"
         :actions="t('actions')"
         placement="bottom"
-      >
-        <van-button type="primary" @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="right-end"
+        style="margin-left: 16px;"
       >
         <van-button type="primary" @click="show.lightTheme = true">
           {{ t('lightTheme') }}
         </van-button>
       </van-popover>
+      <van-popover
+        v-model="show.darkTheme"
+        theme="dark"
+        :actions="t('actions')"
+        placement="bottom"
+        style="margin-left: 16px;"
+      >
+        <van-button type="primary" @click="show.darkTheme = true">
+          {{ t('darkTheme') }}
+        </van-button>
+      </van-popover>
+    </demo-block>
+
+    <demo-block :title="t('placement')">
+      <van-field
+        is-link
+        readonly
+        name="picker"
+        :value="currentPlacement"
+        :label="t('choosePlacement')"
+        :placeholder="t('placeholder')"
+        @click="showPicker = true"
+      />
+
+      <van-popup
+        v-model="showPicker"
+        round
+        position="bottom"
+        get-container="body"
+      >
+        <van-picker
+          show-toolbar
+          :columns="placements"
+          @confirm="onConfirm"
+          @cancel="showPicker = false"
+        />
+      </van-popup>
+
+      <div class="demo-popover-box">
+        <van-popover
+          :value="true"
+          :actions="t('actions')"
+          :placement="currentPlacement"
+        >
+          <div class="demo-popover-refer" />
+        </van-popover>
+      </div>
     </demo-block>
   </demo-section>
 </template>
@@ -32,26 +67,54 @@ export default {
   i18n: {
     'zh-CN': {
       actions: [{ text: '文本' }, { text: '文本' }, { text: '文本' }],
+      placement: '弹出位置',
+      darkTheme: '深色风格',
       lightTheme: '浅色风格',
       showPopover: '点击弹出气泡',
+      choosePlacement: '选择弹出位置',
     },
     'en-US': {
       actions: [{ text: 'Text' }, { text: 'Text' }, { text: 'Text' }],
+      placement: 'Placement',
+      darkTheme: 'Dark Theme',
       lightTheme: 'Light Theme',
       showPopover: 'Show Popover',
+      choosePlacement: 'Choose Placement',
     },
   },
 
   data() {
     return {
       show: {
-        basic: false,
+        placement: false,
+        darkTheme: false,
         lightTheme: false,
       },
+      showPicker: false,
+      currentPlacement: 'top',
+      placements: [
+        'top',
+        'top-start',
+        'top-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+      ],
     };
   },
 
-  methods: {},
+  methods: {
+    onConfirm(value) {
+      this.showPicker = false;
+      this.currentPlacement = value;
+    },
+  },
 };
 </script>
 
@@ -59,8 +122,24 @@ export default {
 @import '../../style/var';
 
 .demo-popover {
-  .van-popover__wrapper {
-    margin-left: @padding-md;
+  &-refer {
+    width: 60px;
+    height: 60px;
+    background-color: @blue;
+    border-radius: 8px;
+  }
+
+  .van-field {
+    width: auto;
+    margin: 0 12px;
+    overflow: hidden;
+    border-radius: 8px;
+  }
+
+  &-box {
+    display: flex;
+    justify-content: center;
+    margin-top: 160px;
   }
 }
 </style>
diff --git a/src/popover/index.js b/src/popover/index.js
index ed6e72535..981b89862 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -30,7 +30,7 @@ export default createComponent({
     },
     theme: {
       type: String,
-      default: 'dark',
+      default: 'light',
     },
     actions: {
       type: Array,
@@ -49,6 +49,8 @@ export default createComponent({
   },
 
   watch: {
+    placement: 'updateLocation',
+
     value(value) {
       if (value) {
         this.updateLocation();
@@ -93,6 +95,11 @@ export default createComponent({
       this.$emit('input', value);
     },
 
+    onClick(event) {
+      event.stopPropagation();
+      this.$emit('click', event);
+    },
+
     onClickAction(action, index) {
       this.$emit('select', action, index);
 
@@ -115,11 +122,12 @@ export default createComponent({
           style={this.location}
           class={bem([this.theme, `placement-${this.placement}`])}
           overlay={this.overlay}
-          position=""
+          position={null}
           transition="van-popover-zoom"
           lockScroll={false}
           getContainer={this.getContainer}
           onInput={this.onToggle}
+          onClick={this.onClick}
         >
           <div class={bem('arrow')} />
           {this.actions.map(this.renderAction)}
diff --git a/src/style/demo/index.vue b/src/style/demo/index.vue
index df01ad4a7..7ca53cfed 100644
--- a/src/style/demo/index.vue
+++ b/src/style/demo/index.vue
@@ -104,7 +104,7 @@ export default {
     height: 100px;
     margin: -50px 0 0 -50px;
     background-color: @blue;
-    border-radius: 3px;
+    border-radius: 8px;
   }
 }
 </style>

From 7b51efa5726ab9bd32022f5aaf67609b1012b739 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 18 Nov 2020 15:04:23 +0800
Subject: [PATCH 07/23] feat(Popover): support add icon

---
 src/popover/README.zh-CN.md | 13 ++++---
 src/popover/demo/index.vue  | 40 ++++++++++++++++++---
 src/popover/index.js        | 69 ++++++++++++++++++++++++-----------
 src/popover/index.less      | 71 ++++++++++++++++++++-----------------
 4 files changed, 129 insertions(+), 64 deletions(-)

diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 3b582b61f..cbdb6af8f 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -29,10 +29,8 @@ Vue.use(Popover);
 | actions | 选项列表 | _Action[]_ | `[]` |
 | placement | 弹出位置 | _string_ | - |
 | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
-| text-color | 自定义文字颜色 | _string_ | - |
-| background-color | 自定义背景颜色 | _string_ | - |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
-| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `false` |
+| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
 | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
 | get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
 
@@ -40,10 +38,11 @@ Vue.use(Popover);
 
 `actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
 
-| 键名      | 说明                     | 类型     |
-| --------- | ------------------------ | -------- |
-| text      | 文字内容                 | _string_ |
-| className | 为对应选项添加额外的类名 | _any_    |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| text | 文字内容 | _string_ |
+| icon | 文字左侧的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接 | _string_ |
+| className | 为对应选项添加额外的类名 | _any_ |
 
 ### placement 可选值
 
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index fa57dfdad..2f4ea5762 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -52,13 +52,26 @@
       <div class="demo-popover-box">
         <van-popover
           :value="true"
-          :actions="t('actions')"
+          :actions="t('shortActions')"
           :placement="currentPlacement"
         >
           <div class="demo-popover-refer" />
         </van-popover>
       </div>
     </demo-block>
+
+    <demo-block :title="t('showIcon')">
+      <van-popover
+        v-model="show.showIcon"
+        :actions="t('actionsWithIcon')"
+        placement="bottom"
+        style="margin-left: 16px;"
+      >
+        <van-button type="primary" @click="show.showIcon = true">
+          {{ t('showPopover') }}
+        </van-button>
+      </van-popover>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -66,7 +79,14 @@
 export default {
   i18n: {
     'zh-CN': {
-      actions: [{ text: '文本' }, { text: '文本' }, { text: '文本' }],
+      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+      shortActions: [{ text: '选项一' }, { text: '选项二' }],
+      actionsWithIcon: [
+        { text: '选项一', icon: 'add-o' },
+        { text: '选项二', icon: 'music-o' },
+        { text: '选项三', icon: 'more-o' },
+      ],
+      showIcon: '展示图标',
       placement: '弹出位置',
       darkTheme: '深色风格',
       lightTheme: '浅色风格',
@@ -74,7 +94,18 @@ export default {
       choosePlacement: '选择弹出位置',
     },
     'en-US': {
-      actions: [{ text: 'Text' }, { text: 'Text' }, { text: 'Text' }],
+      actions: [
+        { text: 'Option 1' },
+        { text: 'Option 2' },
+        { text: 'Option 3' },
+      ],
+      shortActions: [{ text: 'Option 1' }, { text: 'Option 2' }],
+      actionsWithIcon: [
+        { text: 'Option 1', icon: 'add-o' },
+        { text: 'Option 2', icon: 'music-o' },
+        { text: 'Option 3', icon: 'more-o' },
+      ],
+      showIcon: 'Show Icon',
       placement: 'Placement',
       darkTheme: 'Dark Theme',
       lightTheme: 'Light Theme',
@@ -86,6 +117,7 @@ export default {
   data() {
     return {
       show: {
+        showIcon: false,
         placement: false,
         darkTheme: false,
         lightTheme: false,
@@ -139,7 +171,7 @@ export default {
   &-box {
     display: flex;
     justify-content: center;
-    margin-top: 160px;
+    margin: 110px 0 80px;
   }
 }
 </style>
diff --git a/src/popover/index.js b/src/popover/index.js
index 981b89862..775cc1b3c 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -1,10 +1,12 @@
-import { createNamespace } from '../utils';
 import { createPopper } from '@popperjs/core';
+import { createNamespace } from '../utils';
+import { BORDER_BOTTOM } from '../utils/constant';
 
 // Mixins
 import { ClickOutsideMixin } from '../mixins/click-outside';
 
 // Components
+import Icon from '../icon';
 import Popup from '../popup';
 
 const [createComponent, bem] = createNamespace('popover');
@@ -23,7 +25,6 @@ export default createComponent({
     placement: String,
     textColor: String,
     backgroundColor: String,
-    closeOnClickAction: Boolean,
     offset: {
       type: Array,
       default: () => [0, 8],
@@ -40,6 +41,10 @@ export default createComponent({
       type: [String, Function],
       default: 'body',
     },
+    closeOnClickAction: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -64,31 +69,55 @@ export default createComponent({
     }
   },
 
+  beforeDestroy() {
+    if (this.popper) {
+      this.popper.destroy();
+      this.popper = null;
+    }
+  },
+
   methods: {
+    createPopper() {
+      return createPopper(this.$refs.wrapper, this.$refs.popover.$el, {
+        placement: this.placement,
+        modifiers: [
+          {
+            name: 'computeStyles',
+            options: {
+              adaptive: false,
+            },
+          },
+          {
+            name: 'offset',
+            options: {
+              offset: this.offset,
+            },
+          },
+        ],
+      });
+    },
+
     updateLocation() {
       this.$nextTick(() => {
-        createPopper(this.$refs.wrapper, this.$refs.popover.$el, {
-          placement: this.placement,
-          modifiers: [
-            {
-              name: 'computeStyles',
-              options: {
-                adaptive: false,
-              },
-            },
-            {
-              name: 'offset',
-              options: {
-                offset: this.offset,
-              },
-            },
-          ],
-        });
+        if (!this.popper) {
+          this.popper = this.createPopper();
+        } else {
+          this.popper.setOptions({
+            placement: this.placement,
+          });
+        }
       });
     },
 
     renderAction(action) {
-      return <div class={bem('action')}>{action.text}</div>;
+      return (
+        <div class={bem('action')} onClick={this.onClickAction}>
+          {action.icon && (
+            <Icon name={action.icon} class={bem('action-icon')} />
+          )}
+          <div class={[bem('action-text'), BORDER_BOTTOM]}>{action.text}</div>
+        </div>
+      );
     },
 
     onToggle(value) {
diff --git a/src/popover/index.less b/src/popover/index.less
index 7f8a4fb7a..5ef0cc9c4 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -24,23 +24,32 @@
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: center;
+    box-sizing: border-box;
     width: 128px;
     height: 44px;
+    padding: 0 @padding-md;
     font-size: @font-size-md;
 
-    &::after {
-      .hairline-bottom(@cell-border-color, @padding-md, @padding-md);
+    &:last-child {
+      .van-popover__action-text::after {
+        display: none;
+      }
     }
 
-    &:last-child::after {
-      display: none;
+    &-text {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
+    &-icon {
+      font-size: 16px;
     }
   }
 
-  &--placement-top,
-  &--placement-top-start,
-  &--placement-top-end {
+  &[data-popper-placement^='top'] {
     .van-popover__arrow {
       bottom: 0;
       border-top-color: currentColor;
@@ -49,27 +58,25 @@
     }
   }
 
-  &--placement-top {
+  &[data-popper-placement='top'] {
     .van-popover__arrow {
       left: 50%;
     }
   }
 
-  &--placement-top-start {
+  &[data-popper-placement='top-start'] {
     .van-popover__arrow {
       left: @padding-md;
     }
   }
 
-  &--placement-top-end {
+  &[data-popper-placement='top-end'] {
     .van-popover__arrow {
       right: @padding-md;
     }
   }
 
-  &--placement-left,
-  &--placement-left-start,
-  &--placement-left-end {
+  &[data-popper-placement^='left'] {
     .van-popover__arrow {
       right: 0;
       border-right-width: 0;
@@ -78,27 +85,25 @@
     }
   }
 
-  &--placement-left {
+  &[data-popper-placement='left'] {
     .van-popover__arrow {
       top: 50%;
     }
   }
 
-  &--placement-left-start {
+  &[data-popper-placement='left-start'] {
     .van-popover__arrow {
       top: @padding-md;
     }
   }
 
-  &--placement-left-end {
+  &[data-popper-placement='left-end'] {
     .van-popover__arrow {
       bottom: @padding-md;
     }
   }
 
-  &--placement-right,
-  &--placement-right-start,
-  &--placement-right-end {
+  &[data-popper-placement^='right'] {
     .van-popover__arrow {
       left: 0;
       border-right-color: currentColor;
@@ -107,27 +112,25 @@
     }
   }
 
-  &--placement-right {
+  &[data-popper-placement='right'] {
     .van-popover__arrow {
       top: 50%;
     }
   }
 
-  &--placement-right-start {
+  &[data-popper-placement='right-start'] {
     .van-popover__arrow {
       top: @padding-md;
     }
   }
 
-  &--placement-right-end {
+  &[data-popper-placement='right-end'] {
     .van-popover__arrow {
       bottom: @padding-md;
     }
   }
 
-  &--placement-bottom,
-  &--placement-bottom-start,
-  &--placement-bottom-end {
+  &[data-popper-placement^='bottom'] {
     .van-popover__arrow {
       top: 0;
       border-top-width: 0;
@@ -136,19 +139,19 @@
     }
   }
 
-  &--placement-bottom {
+  &[data-popper-placement='bottom'] {
     .van-popover__arrow {
       left: 50%;
     }
   }
 
-  &--placement-bottom-start {
+  &[data-popper-placement='bottom-start'] {
     .van-popover__arrow {
       left: @padding-md;
     }
   }
 
-  &--placement-bottom-end {
+  &[data-popper-placement='bottom-end'] {
     .van-popover__arrow {
       right: @padding-md;
     }
@@ -180,14 +183,16 @@
     }
 
     .van-popover__action {
-      &::after {
-        border-color: @gray-7;
-      }
-
       &:active {
         opacity: @active-opacity;
       }
     }
+
+    .van-popover__action-text {
+      &::after {
+        border-color: @gray-7;
+      }
+    }
   }
 
   // &-zoom-enter,

From ae29b095206c0848131ef8a63d7d227915fa03b4 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 18 Nov 2020 15:19:10 +0800
Subject: [PATCH 08/23] perf(Popover): using popper lite

---
 src/popover/index.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/popover/index.js b/src/popover/index.js
index 775cc1b3c..be194ab56 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -1,4 +1,5 @@
-import { createPopper } from '@popperjs/core';
+import { createPopper } from '@popperjs/core/lib/popper-lite';
+import offsetModifier from '@popperjs/core/lib/modifiers/offset';
 import { createNamespace } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
@@ -88,7 +89,7 @@ export default createComponent({
             },
           },
           {
-            name: 'offset',
+            ...offsetModifier,
             options: {
               offset: this.offset,
             },
@@ -110,12 +111,14 @@ export default createComponent({
     },
 
     renderAction(action) {
+      const { icon, text, disabled, className } = action;
       return (
-        <div class={bem('action')} onClick={this.onClickAction}>
-          {action.icon && (
-            <Icon name={action.icon} class={bem('action-icon')} />
-          )}
-          <div class={[bem('action-text'), BORDER_BOTTOM]}>{action.text}</div>
+        <div
+          class={[bem('action', { disabled }), className]}
+          onClick={this.onClickAction}
+        >
+          {icon && <Icon name={icon} class={bem('action-icon')} />}
+          <div class={[bem('action-text'), BORDER_BOTTOM]}>{text}</div>
         </div>
       );
     },

From 699a5ebe51b2448e04d8aaef58eb833ce27d3dbb Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 18 Nov 2020 15:29:24 +0800
Subject: [PATCH 09/23] feat(Popover): add disabled option

---
 src/popover/README.zh-CN.md |  9 +++------
 src/popover/demo/index.vue  | 32 +++++++++++++++++++++++++++++---
 src/popover/index.js        |  8 ++++++--
 src/popover/index.less      | 19 ++++++++++++++++++-
 4 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index cbdb6af8f..c57c34be8 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -32,7 +32,7 @@ Vue.use(Popover);
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
 | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
-| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
+| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
 
 ### Action 数据结构
 
@@ -40,14 +40,11 @@ Vue.use(Popover);
 
 | 键名 | 说明 | 类型 |
 | --- | --- | --- |
-| text | 文字内容 | _string_ |
+| text | 选项文字 | _string_ |
 | icon | 文字左侧的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接 | _string_ |
+| disabled | 是否为禁用状态 | _boolean_ |
 | className | 为对应选项添加额外的类名 | _any_ |
 
-### placement 可选值
-
-top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom
-
 ### Events
 
 | 事件名 | 说明                     | 回调参数                        |
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 2f4ea5762..3d470819c 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -60,15 +60,26 @@
       </div>
     </demo-block>
 
-    <demo-block :title="t('showIcon')">
+    <demo-block :title="t('actionOptions')">
       <van-popover
         v-model="show.showIcon"
         :actions="t('actionsWithIcon')"
-        placement="bottom"
+        placement="top"
         style="margin-left: 16px;"
       >
         <van-button type="primary" @click="show.showIcon = true">
-          {{ t('showPopover') }}
+          {{ t('showIcon') }}
+        </van-button>
+      </van-popover>
+
+      <van-popover
+        v-model="show.disabled"
+        :actions="t('actionsDisabled')"
+        placement="top"
+        style="margin-left: 16px;"
+      >
+        <van-button type="primary" @click="show.disabled = true">
+          {{ t('disabled') }}
         </van-button>
       </van-popover>
     </demo-block>
@@ -86,11 +97,17 @@ export default {
         { text: '选项二', icon: 'music-o' },
         { text: '选项三', icon: 'more-o' },
       ],
+      actionsDisabled: [
+        { text: '选项一', disabled: true },
+        { text: '选项二', disabled: true },
+        { text: '选项三' },
+      ],
       showIcon: '展示图标',
       placement: '弹出位置',
       darkTheme: '深色风格',
       lightTheme: '浅色风格',
       showPopover: '点击弹出气泡',
+      actionOptions: '选项配置',
       choosePlacement: '选择弹出位置',
     },
     'en-US': {
@@ -105,11 +122,17 @@ export default {
         { text: 'Option 2', icon: 'music-o' },
         { text: 'Option 3', icon: 'more-o' },
       ],
+      actionsDisabled: [
+        { text: 'Option 1', disabled: true },
+        { text: 'Option 2', disabled: true },
+        { text: 'Option 3' },
+      ],
       showIcon: 'Show Icon',
       placement: 'Placement',
       darkTheme: 'Dark Theme',
       lightTheme: 'Light Theme',
       showPopover: 'Show Popover',
+      actionOptions: 'Action Options',
       choosePlacement: 'Choose Placement',
     },
   },
@@ -117,6 +140,7 @@ export default {
   data() {
     return {
       show: {
+        disabled: false,
         showIcon: false,
         placement: false,
         darkTheme: false,
@@ -154,6 +178,8 @@ export default {
 @import '../../style/var';
 
 .demo-popover {
+  min-height: 200vh;
+
   &-refer {
     width: 60px;
     height: 60px;
diff --git a/src/popover/index.js b/src/popover/index.js
index be194ab56..7c362c14d 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -110,12 +110,12 @@ export default createComponent({
       });
     },
 
-    renderAction(action) {
+    renderAction(action, index) {
       const { icon, text, disabled, className } = action;
       return (
         <div
           class={[bem('action', { disabled }), className]}
-          onClick={this.onClickAction}
+          onClick={() => this.onClickAction(action, index)}
         >
           {icon && <Icon name={icon} class={bem('action-icon')} />}
           <div class={[bem('action-text'), BORDER_BOTTOM]}>{text}</div>
@@ -133,6 +133,10 @@ export default createComponent({
     },
 
     onClickAction(action, index) {
+      if (action.disabled) {
+        return;
+      }
+
       this.$emit('select', action, index);
 
       if (this.closeOnClickAction) {
diff --git a/src/popover/index.less b/src/popover/index.less
index 5ef0cc9c4..01d6b8677 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -29,6 +29,7 @@
     height: 44px;
     padding: 0 @padding-md;
     font-size: @font-size-md;
+    line-height: @line-height-md;
 
     &:last-child {
       .van-popover__action-text::after {
@@ -170,6 +171,14 @@
       &:active {
         background-color: @active-color;
       }
+
+      &--disabled {
+        color: @gray-5;
+
+        &:active {
+          background-color: transparent;
+        }
+      }
     }
   }
 
@@ -184,7 +193,15 @@
 
     .van-popover__action {
       &:active {
-        opacity: @active-opacity;
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+
+      &--disabled {
+        color: @gray-7;
+
+        &:active {
+          background-color: transparent;
+        }
       }
     }
 

From 64e17bcd082cebc630bbdbb337caee0bd40d4369 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 18 Nov 2020 15:32:56 +0800
Subject: [PATCH 10/23] chore(Popover): change name of default slot to
 reference

---
 src/popover/README.zh-CN.md |  6 +++---
 src/popover/demo/index.vue  | 36 +++++++++++++++++++++++-------------
 src/popover/index.js        |  2 +-
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index c57c34be8..40abfde06 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -57,6 +57,6 @@ Vue.use(Popover);
 
 ### Slots
 
-| 名称    | 说明                 |
-| ------- | -------------------- |
-| default | 自定义菜单的展示内容 |
+| 名称      | 说明                        |
+| --------- | --------------------------- |
+| reference | 触发 Popover 显示的元素内容 |
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 3d470819c..2f7260536 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -7,9 +7,11 @@
         placement="bottom"
         style="margin-left: 16px;"
       >
-        <van-button type="primary" @click="show.lightTheme = true">
-          {{ t('lightTheme') }}
-        </van-button>
+        <template #reference>
+          <van-button type="primary" @click="show.lightTheme = true">
+            {{ t('lightTheme') }}
+          </van-button>
+        </template>
       </van-popover>
       <van-popover
         v-model="show.darkTheme"
@@ -18,9 +20,11 @@
         placement="bottom"
         style="margin-left: 16px;"
       >
-        <van-button type="primary" @click="show.darkTheme = true">
-          {{ t('darkTheme') }}
-        </van-button>
+        <template #reference>
+          <van-button type="primary" @click="show.darkTheme = true">
+            {{ t('darkTheme') }}
+          </van-button>
+        </template>
       </van-popover>
     </demo-block>
 
@@ -55,7 +59,9 @@
           :actions="t('shortActions')"
           :placement="currentPlacement"
         >
-          <div class="demo-popover-refer" />
+          <template #reference>
+            <div class="demo-popover-refer" />
+          </template>
         </van-popover>
       </div>
     </demo-block>
@@ -67,9 +73,11 @@
         placement="top"
         style="margin-left: 16px;"
       >
-        <van-button type="primary" @click="show.showIcon = true">
-          {{ t('showIcon') }}
-        </van-button>
+        <template #reference>
+          <van-button type="primary" @click="show.showIcon = true">
+            {{ t('showIcon') }}
+          </van-button>
+        </template>
       </van-popover>
 
       <van-popover
@@ -78,9 +86,11 @@
         placement="top"
         style="margin-left: 16px;"
       >
-        <van-button type="primary" @click="show.disabled = true">
-          {{ t('disabled') }}
-        </van-button>
+        <template #reference>
+          <van-button type="primary" @click="show.disabled = true">
+            {{ t('disabled') }}
+          </van-button>
+        </template>
       </van-popover>
     </demo-block>
   </demo-section>
diff --git a/src/popover/index.js b/src/popover/index.js
index 7c362c14d..b1a977526 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -168,7 +168,7 @@ export default createComponent({
           <div class={bem('arrow')} />
           {this.actions.map(this.renderAction)}
         </Popup>
-        {this.slots('default')}
+        {this.slots('reference')}
       </span>
     );
   },

From 1302f13e7228ab3993f5d42f65b6b6e7322a4b66 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 18 Nov 2020 15:38:02 +0800
Subject: [PATCH 11/23] feat(Popover): add more event

---
 src/popover/index.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/popover/index.js b/src/popover/index.js
index b1a977526..6731b1713 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -147,6 +147,22 @@ export default createComponent({
     onClickOutside() {
       this.$emit('input', false);
     },
+
+    onOpen() {
+      this.$emit('open');
+    },
+
+    onOpened() {
+      this.$emit('opened');
+    },
+
+    onClose() {
+      this.$emit('close');
+    },
+
+    onClosed() {
+      this.$emit('closed');
+    },
   },
 
   render() {
@@ -162,8 +178,12 @@ export default createComponent({
           transition="van-popover-zoom"
           lockScroll={false}
           getContainer={this.getContainer}
-          onInput={this.onToggle}
+          onOpen={this.onOpen}
           onClick={this.onClick}
+          onClose={this.onClose}
+          onInput={this.onToggle}
+          onOpened={this.onOpened}
+          onClosed={this.onClosed}
         >
           <div class={bem('arrow')} />
           {this.actions.map(this.renderAction)}

From 6d670935897830041776c80b900c068e9804c460 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 18 Nov 2020 15:49:11 +0800
Subject: [PATCH 12/23] style(Popover): adjust dark theme background color

---
 src/popover/index.js   | 2 +-
 src/popover/index.less | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/popover/index.js b/src/popover/index.js
index 6731b1713..5a1ed6bd4 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -172,7 +172,7 @@ export default createComponent({
           ref="popover"
           value={this.value}
           style={this.location}
-          class={bem([this.theme, `placement-${this.placement}`])}
+          class={bem([this.theme])}
           overlay={this.overlay}
           position={null}
           transition="van-popover-zoom"
diff --git a/src/popover/index.less b/src/popover/index.less
index 01d6b8677..99b4e2fb1 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -184,8 +184,7 @@
 
   &--dark {
     color: @white;
-    background-color: @gray-8;
-    opacity: 0.9;
+    background-color: #4a4a4a;
 
     .van-popover__arrow {
       color: @gray-8;

From acf92e1fea55b9539b00ae20ab77f72aee27e416 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 19 Nov 2020 14:26:37 +0800
Subject: [PATCH 13/23] feat(Popover): add animation

---
 src/popover/demo/index.vue | 14 +++++----
 src/popover/index.js       | 14 ++++-----
 src/popover/index.less     | 58 +++++++++++++++++++++++++++++++-------
 3 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 2f7260536..a5710dbbf 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -4,7 +4,7 @@
       <van-popover
         v-model="show.lightTheme"
         :actions="t('actions')"
-        placement="bottom"
+        placement="bottom-start"
         style="margin-left: 16px;"
       >
         <template #reference>
@@ -35,7 +35,7 @@
         name="picker"
         :value="currentPlacement"
         :label="t('choosePlacement')"
-        :placeholder="t('placeholder')"
+        :placeholder="t('choosePlacement')"
         @click="showPicker = true"
       />
 
@@ -55,7 +55,7 @@
 
       <div class="demo-popover-box">
         <van-popover
-          :value="true"
+          v-model="show.placement"
           :actions="t('shortActions')"
           :placement="currentPlacement"
         >
@@ -70,7 +70,7 @@
       <van-popover
         v-model="show.showIcon"
         :actions="t('actionsWithIcon')"
-        placement="top"
+        placement="top-start"
         style="margin-left: 16px;"
       >
         <template #reference>
@@ -157,7 +157,7 @@ export default {
         lightTheme: false,
       },
       showPicker: false,
-      currentPlacement: 'top',
+      currentPlacement: '',
       placements: [
         'top',
         'top-start',
@@ -179,6 +179,10 @@ export default {
     onConfirm(value) {
       this.showPicker = false;
       this.currentPlacement = value;
+
+      setTimeout(() => {
+        this.show.placement = true;
+      }, 300);
     },
   },
 };
diff --git a/src/popover/index.js b/src/popover/index.js
index 5a1ed6bd4..facc4eb6c 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -48,12 +48,6 @@ export default createComponent({
     },
   },
 
-  data() {
-    return {
-      location: null,
-    };
-  },
-
   watch: {
     placement: 'updateLocation',
 
@@ -86,6 +80,7 @@ export default createComponent({
             name: 'computeStyles',
             options: {
               adaptive: false,
+              gpuAcceleration: false,
             },
           },
           {
@@ -100,6 +95,10 @@ export default createComponent({
 
     updateLocation() {
       this.$nextTick(() => {
+        if (!this.value) {
+          return;
+        }
+
         if (!this.popper) {
           this.popper = this.createPopper();
         } else {
@@ -114,7 +113,7 @@ export default createComponent({
       const { icon, text, disabled, className } = action;
       return (
         <div
-          class={[bem('action', { disabled }), className]}
+          class={[bem('action', { disabled, 'with-icon': icon }), className]}
           onClick={() => this.onClickAction(action, index)}
         >
           {icon && <Icon name={icon} class={bem('action-icon')} />}
@@ -171,7 +170,6 @@ export default createComponent({
         <Popup
           ref="popover"
           value={this.value}
-          style={this.location}
           class={bem([this.theme])}
           overlay={this.overlay}
           position={null}
diff --git a/src/popover/index.less b/src/popover/index.less
index 99b4e2fb1..59a4a1685 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -5,7 +5,7 @@
   position: absolute;
   overflow: visible;
   border-radius: @border-radius-lg;
-  transition-duration: 0s;
+  transition: opacity 0.15s, transform 0.15s;
 
   &__wrapper {
     display: inline-block;
@@ -46,7 +46,14 @@
     }
 
     &-icon {
-      font-size: 16px;
+      margin-right: @padding-xs;
+      font-size: 20px;
+    }
+
+    &--with-icon {
+      .van-popover__action-text {
+        justify-content: flex-start;
+      }
     }
   }
 
@@ -60,18 +67,24 @@
   }
 
   &[data-popper-placement='top'] {
+    transform-origin: 50% 100%;
+
     .van-popover__arrow {
       left: 50%;
     }
   }
 
   &[data-popper-placement='top-start'] {
+    transform-origin: 0 100%;
+
     .van-popover__arrow {
       left: @padding-md;
     }
   }
 
   &[data-popper-placement='top-end'] {
+    transform-origin: 100% 100%;
+
     .van-popover__arrow {
       right: @padding-md;
     }
@@ -87,18 +100,24 @@
   }
 
   &[data-popper-placement='left'] {
+    transform-origin: 100% 50%;
+
     .van-popover__arrow {
       top: 50%;
     }
   }
 
   &[data-popper-placement='left-start'] {
+    transform-origin: 100% 0;
+
     .van-popover__arrow {
       top: @padding-md;
     }
   }
 
   &[data-popper-placement='left-end'] {
+    transform-origin: 100% 100%;
+
     .van-popover__arrow {
       bottom: @padding-md;
     }
@@ -114,18 +133,24 @@
   }
 
   &[data-popper-placement='right'] {
+    transform-origin: 0 50%;
+
     .van-popover__arrow {
       top: 50%;
     }
   }
 
   &[data-popper-placement='right-start'] {
+    transform-origin: 0 0;
+
     .van-popover__arrow {
       top: @padding-md;
     }
   }
 
   &[data-popper-placement='right-end'] {
+    transform-origin: 0 100%;
+
     .van-popover__arrow {
       bottom: @padding-md;
     }
@@ -141,18 +166,24 @@
   }
 
   &[data-popper-placement='bottom'] {
+    transform-origin: 50% 0;
+
     .van-popover__arrow {
       left: 50%;
     }
   }
 
   &[data-popper-placement='bottom-start'] {
+    transform-origin: 0 0;
+
     .van-popover__arrow {
       left: @padding-md;
     }
   }
 
   &[data-popper-placement='bottom-end'] {
+    transform-origin: 100% 0;
+
     .van-popover__arrow {
       right: @padding-md;
     }
@@ -187,7 +218,7 @@
     background-color: #4a4a4a;
 
     .van-popover__arrow {
-      color: @gray-8;
+      color: #4a4a4a;
     }
 
     .van-popover__action {
@@ -196,7 +227,7 @@
       }
 
       &--disabled {
-        color: @gray-7;
+        color: @gray-6;
 
         &:active {
           background-color: transparent;
@@ -211,10 +242,17 @@
     }
   }
 
-  // &-zoom-enter,
-  // &-zoom-leave-active {
-  //   transform: scale(0.8);
-  //   opacity: 0;
-  //   transition: all 0.3s;
-  // }
+  &-zoom-enter,
+  &-zoom-leave-active {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+
+  &-zoom-enter-active {
+    transition-timing-function: @animation-timing-function-enter;
+  }
+
+  &-zoom-leave-active {
+    transition-timing-function: @animation-timing-function-leave;
+  }
 }

From f917e99562c515abf729544aada4b49d4a6b050a Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 19 Nov 2020 19:32:53 +0800
Subject: [PATCH 14/23] docs(Popover): add zh-CN document

---
 src/popover/README.zh-CN.md | 136 +++++++++++++++++++++++++++++++++++-
 src/popover/demo/index.vue  |  62 ++++++++--------
 src/popover/index.js        |   5 +-
 3 files changed, 167 insertions(+), 36 deletions(-)

diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 40abfde06..8916ac483 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -2,6 +2,8 @@
 
 ### 介绍
 
+弹出式的气泡菜单。
+
 ### 引入
 
 ```js
@@ -15,8 +17,136 @@ Vue.use(Popover);
 
 ### 基础用法
 
-```html
+当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。
 
+```html
+<van-popover v-model="showPopover" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      浅色风格
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      // 通过 actions 属性来定义菜单选项
+      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+    };
+  },
+};
+```
+
+### 深色风格
+
+Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。
+
+```html
+<van-popover v-model="showPopover" theme="dark" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      深色风格
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+    };
+  },
+};
+```
+
+### 展示图标
+
+在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
+
+```html
+<van-popover v-model="showPopover" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      展示图标
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      actions: [
+        { text: '选项一', icon: 'add-o' },
+        { text: '选项二', icon: 'music-o' },
+        { text: '选项三', icon: 'more-o' },
+      ],
+    };
+  },
+};
+```
+
+### 禁用选项
+
+在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。
+
+```html
+<van-popover v-model="showPopover" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      禁用选项
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      actions: [
+        { text: '选项一', disabled: true },
+        { text: '选项二', disabled: true },
+        { text: '选项三' },
+      ],
+    };
+  },
+};
+```
+
+### 弹出位置
+
+通过 `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    # 底部右侧位置
 ```
 
 ## API
@@ -27,12 +157,12 @@ Vue.use(Popover);
 | --- | --- | --- | --- |
 | v-model | 是否展示气泡弹出层 | _boolean_ | `false` |
 | actions | 选项列表 | _Action[]_ | `[]` |
-| placement | 弹出位置 | _string_ | - |
+| placement | 弹出位置 | _string_ | `bottom` |
 | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
 | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
-| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
+| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
 
 ### Action 数据结构
 
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index a5710dbbf..0d52daa8d 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -17,7 +17,6 @@
         v-model="show.darkTheme"
         theme="dark"
         :actions="t('actions')"
-        placement="bottom"
         style="margin-left: 16px;"
       >
         <template #reference>
@@ -28,6 +27,33 @@
       </van-popover>
     </demo-block>
 
+    <demo-block :title="t('actionOptions')">
+      <van-popover
+        v-model="show.showIcon"
+        :actions="t('actionsWithIcon')"
+        placement="bottom-start"
+        style="margin-left: 16px;"
+      >
+        <template #reference>
+          <van-button type="primary" @click="show.showIcon = true">
+            {{ t('showIcon') }}
+          </van-button>
+        </template>
+      </van-popover>
+
+      <van-popover
+        v-model="show.disableAction"
+        :actions="t('actionsDisabled')"
+        style="margin-left: 16px;"
+      >
+        <template #reference>
+          <van-button type="primary" @click="show.disableAction = true">
+            {{ t('disableAction') }}
+          </van-button>
+        </template>
+      </van-popover>
+    </demo-block>
+
     <demo-block :title="t('placement')">
       <van-field
         is-link
@@ -65,34 +91,6 @@
         </van-popover>
       </div>
     </demo-block>
-
-    <demo-block :title="t('actionOptions')">
-      <van-popover
-        v-model="show.showIcon"
-        :actions="t('actionsWithIcon')"
-        placement="top-start"
-        style="margin-left: 16px;"
-      >
-        <template #reference>
-          <van-button type="primary" @click="show.showIcon = true">
-            {{ t('showIcon') }}
-          </van-button>
-        </template>
-      </van-popover>
-
-      <van-popover
-        v-model="show.disabled"
-        :actions="t('actionsDisabled')"
-        placement="top"
-        style="margin-left: 16px;"
-      >
-        <template #reference>
-          <van-button type="primary" @click="show.disabled = true">
-            {{ t('disabled') }}
-          </van-button>
-        </template>
-      </van-popover>
-    </demo-block>
   </demo-section>
 </template>
 
@@ -118,6 +116,7 @@ export default {
       lightTheme: '浅色风格',
       showPopover: '点击弹出气泡',
       actionOptions: '选项配置',
+      disableAction: '禁用选项',
       choosePlacement: '选择弹出位置',
     },
     'en-US': {
@@ -143,6 +142,7 @@ export default {
       lightTheme: 'Light Theme',
       showPopover: 'Show Popover',
       actionOptions: 'Action Options',
+      disableAction: 'Disable Action',
       choosePlacement: 'Choose Placement',
     },
   },
@@ -150,11 +150,11 @@ export default {
   data() {
     return {
       show: {
-        disabled: false,
         showIcon: false,
         placement: false,
         darkTheme: false,
         lightTheme: false,
+        disableAction: false,
       },
       showPicker: false,
       currentPlacement: '',
@@ -192,8 +192,6 @@ export default {
 @import '../../style/var';
 
 .demo-popover {
-  min-height: 200vh;
-
   &-refer {
     width: 60px;
     height: 60px;
diff --git a/src/popover/index.js b/src/popover/index.js
index facc4eb6c..d07482f1f 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -23,7 +23,6 @@ export default createComponent({
   props: {
     value: Boolean,
     overlay: Boolean,
-    placement: String,
     textColor: String,
     backgroundColor: String,
     offset: {
@@ -38,6 +37,10 @@ export default createComponent({
       type: Array,
       default: () => [],
     },
+    placement: {
+      type: String,
+      default: 'bottom',
+    },
     getContainer: {
       type: [String, Function],
       default: 'body',

From ac93092441b9dd0ac75f2b2172633fa9c46541e7 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 19 Nov 2020 19:57:57 +0800
Subject: [PATCH 15/23] docs(Popover): add en-US document

---
 src/popover/README.md      | 161 ++++++++++++++++++++++++++++++++++++-
 src/popover/demo/index.vue |   2 +-
 2 files changed, 159 insertions(+), 4 deletions(-)

diff --git a/src/popover/README.md b/src/popover/README.md
index 5772a8d1b..27ea687f2 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -14,7 +14,136 @@ Vue.use(Popover);
 ### Basic Usage
 
 ```html
+<van-popover v-model="showPopover" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      Light Theme
+    </van-button>
+  </template>
+</van-popover>
+```
 
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      actions: [
+        { text: 'Option 1' },
+        { text: 'Option 2' },
+        { text: 'Option 3' },
+      ],
+    };
+  },
+};
+```
+
+### Dark theme
+
+Using the `theme` prop to change the style of Popover.
+
+```html
+<van-popover v-model="showPopover" theme="dark" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      Dark Theme
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      actions: [
+        { text: 'Option 1' },
+        { text: 'Option 2' },
+        { text: 'Option 3' },
+      ],
+    };
+  },
+};
+```
+
+### Show Icon
+
+```html
+<van-popover v-model="showPopover" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      Show Icon
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      actions: [
+        { text: 'Option 1', icon: 'add-o' },
+        { text: 'Option 2', icon: 'music-o' },
+        { text: 'Option 3', icon: 'more-o' },
+      ],
+    };
+  },
+};
+```
+
+### Disable Action
+
+Using the `disabled` option to disable an action.
+
+```html
+<van-popover v-model="showPopover" :actions="actions">
+  <template #reference>
+    <van-button type="primary" @click="showPopover = true">
+      Disable Action
+    </van-button>
+  </template>
+</van-popover>
+```
+
+```js
+export default {
+  data() {
+    return {
+      showPopover: false,
+      actions: [
+        { text: 'Option 1', disabled: true },
+        { text: 'Option 2', disabled: true },
+        { text: 'Option 3' },
+      ],
+    };
+  },
+};
+```
+
+### 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
@@ -22,11 +151,37 @@ Vue.use(Popover);
 ### Props
 
 | Attribute | Description | Type | Default |
-| --------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
+| v-model | Whether to show Popover | _boolean_ | `false` |
+| actions | Actions | _Action[]_ | `[]` |
+| placement | Placement | _string_ | `bottom` |
+| theme | Theme，can be set to `dark` | _string_ | `light` |
+| overlay | Whether to show overlay | _boolean_ | `false` |
+| close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
+| close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` |
+| get-container | Return the mount node for Popover | _string \| () => Element_ | `body` |
 
+### Data Structure of Action
+
+| Key       | Description             | Type      |
+| --------- | ----------------------- | --------- |
+| text      | Action Text             | _string_  |
+| icon      | Icon                    | _string_  |
+| disabled  | Whether to be disabled  | _boolean_ |
+| className | className of the option | _any_     |
 
 ### Events
 
-| Event | Description | Arguments |
-| ----- | ----------- | --------- |
+| Event  | Description                      | Arguments                       |
+| ------ | -------------------------------- | ------------------------------- |
+| select | Triggered when clicking action   | _action: Action, index: number_ |
+| open   | Triggered when opening Popover   | -                               |
+| close  | Triggered when closing Popover   | -                               |
+| opened | Triggered when Popover is opened | -                               |
+| closed | Triggered when Popover is closed | -                               |
 
+### Slots
+
+| Name      | Description       |
+| --------- | ----------------- |
+| reference | Reference Element |
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 0d52daa8d..69ce4f1c6 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -143,7 +143,7 @@ export default {
       showPopover: 'Show Popover',
       actionOptions: 'Action Options',
       disableAction: 'Disable Action',
-      choosePlacement: 'Choose Placement',
+      choosePlacement: 'Placement',
     },
   },
 

From cb47f2bbd120fd464410dc4275492cf23f5a53e6 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 19 Nov 2020 20:54:25 +0800
Subject: [PATCH 16/23] feat(Popover): add default slot

---
 src/popover/README.md       |  47 +++++++++--------
 src/popover/README.zh-CN.md |  76 ++++++++++++++++++++-------
 src/popover/demo/index.vue  | 102 ++++++++++++++++++++++--------------
 src/popover/index.js        |  12 +++--
 src/popover/index.less      |  19 +++++--
 5 files changed, 166 insertions(+), 90 deletions(-)

diff --git a/src/popover/README.md b/src/popover/README.md
index 27ea687f2..284dda82b 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -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 |
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 8916ac483..6b92d0d4a 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -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 显示的元素内容 |
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 69ce4f1c6..c279f6af0 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -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>
diff --git a/src/popover/index.js b/src/popover/index.js
index d07482f1f..3b5c35f67 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -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>
diff --git a/src/popover/index.less b/src/popover/index.less
index 59a4a1685..7c81be84d 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -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;

From 27ed9d1fb7978df6b09c9ceca2cfa938813fee89 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 19 Nov 2020 22:18:31 +0800
Subject: [PATCH 17/23] fix(Popover): add Object.assign polyfill

---
 src/popover/demo/index.vue | 1 +
 src/popover/index.js       | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index c279f6af0..2ff184a6f 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -45,6 +45,7 @@
         <div class="demo-popover-box">
           <van-popover
             v-model="show.placement"
+            theme="dark"
             :actions="t('shortActions')"
             :placement="currentPlacement"
           >
diff --git a/src/popover/index.js b/src/popover/index.js
index 3b5c35f67..a06ea3522 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -1,5 +1,6 @@
 import { createPopper } from '@popperjs/core/lib/popper-lite';
 import offsetModifier from '@popperjs/core/lib/modifiers/offset';
+import extendsHelper from '@babel/runtime/helpers/esm/extends';
 import { createNamespace } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
@@ -10,6 +11,12 @@ import { ClickOutsideMixin } from '../mixins/click-outside';
 import Icon from '../icon';
 import Popup from '../popup';
 
+// add Object.assign polyfill for popper.js
+// see: https://popper.js.org/docs/v2/browser-support/
+if (!Object.assign) {
+  Object.assign = extendsHelper;
+}
+
 const [createComponent, bem] = createNamespace('popover');
 
 export default createComponent({

From 1999195c4617011f18e42b30d8a7dbb8f6893659 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 20 Nov 2020 11:08:02 +0800
Subject: [PATCH 18/23] docs(Popover): add select event demo

---
 src/popover/README.md       |  9 ++++++++-
 src/popover/README.zh-CN.md |  9 ++++++++-
 src/popover/demo/index.vue  | 11 +++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/popover/README.md b/src/popover/README.md
index 284dda82b..4d9499ece 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -14,7 +14,7 @@ Vue.use(Popover);
 ### Basic Usage
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       Light Theme
@@ -24,6 +24,8 @@ Vue.use(Popover);
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -35,6 +37,11 @@ export default {
       ],
     };
   },
+  methods: {
+    onSelect(action) {
+      Toast(action.text);
+    },
+  },
 };
 ```
 
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 6b92d0d4a..12ade4c26 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -20,7 +20,7 @@ Vue.use(Popover);
 当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       浅色风格
@@ -30,6 +30,8 @@ Vue.use(Popover);
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -38,6 +40,11 @@ export default {
       actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
     };
   },
+  methods: {
+    onSelect(action) {
+      Toast(action.text);
+    },
+  },
 };
 ```
 
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 2ff184a6f..b23669027 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -6,6 +6,7 @@
         :actions="t('actions')"
         placement="bottom-start"
         style="margin-left: 16px;"
+        @select="onSelect"
       >
         <template #reference>
           <van-button type="primary" @click="show.lightTheme = true">
@@ -18,6 +19,7 @@
         theme="dark"
         :actions="t('actions')"
         style="margin-left: 16px;"
+        @select="onSelect"
       >
         <template #reference>
           <van-button type="primary" @click="show.darkTheme = true">
@@ -48,6 +50,7 @@
             theme="dark"
             :actions="t('shortActions')"
             :placement="currentPlacement"
+            @select="onSelect"
           >
             <template #reference>
               <div class="demo-popover-refer" />
@@ -64,6 +67,7 @@
         :actions="t('actionsWithIcon')"
         placement="bottom-start"
         style="margin-left: 16px;"
+        @select="onSelect"
       >
         <template #reference>
           <van-button type="primary" @click="show.showIcon = true">
@@ -76,6 +80,7 @@
         v-model="show.disableAction"
         :actions="t('actionsDisabled')"
         style="margin-left: 16px;"
+        @select="onSelect"
       >
         <template #reference>
           <van-button type="primary" @click="show.disableAction = true">
@@ -90,6 +95,7 @@
         v-model="show.customContent"
         placement="top-start"
         style="margin-left: 16px;"
+        @select="onSelect"
       >
         <van-grid
           square
@@ -117,6 +123,8 @@
 </template>
 
 <script>
+import Toast from '../../toast';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -207,6 +215,9 @@ export default {
         this.currentPlacement = value;
       });
     },
+    onSelect(action) {
+      Toast(action.text);
+    },
   },
 };
 </script>

From 99b52726b642b6514dea8196fbe6007dde735836 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 20 Nov 2020 11:54:17 +0800
Subject: [PATCH 19/23] test(Popover): add test cases

---
 src/popover/index.js                          |  14 +-
 .../test/__snapshots__/demo.spec.js.snap      |  73 ++++-------
 .../test/__snapshots__/index.spec.js.snap     |  38 +++---
 src/popover/test/index.spec.js                | 122 +++++++++++++++++-
 4 files changed, 167 insertions(+), 80 deletions(-)

diff --git a/src/popover/index.js b/src/popover/index.js
index a06ea3522..943fda9f9 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -13,6 +13,7 @@ import Popup from '../popup';
 
 // add Object.assign polyfill for popper.js
 // see: https://popper.js.org/docs/v2/browser-support/
+/* istanbul ignore if */
 if (!Object.assign) {
   Object.assign = extendsHelper;
 }
@@ -59,19 +60,12 @@ export default createComponent({
   },
 
   watch: {
+    value: 'updateLocation',
     placement: 'updateLocation',
-
-    value(value) {
-      if (value) {
-        this.updateLocation();
-      }
-    },
   },
 
   mounted() {
-    if (this.value) {
-      this.updateLocation();
-    }
+    this.updateLocation();
   },
 
   beforeDestroy() {
@@ -161,6 +155,7 @@ export default createComponent({
       this.$emit('open');
     },
 
+    /* istanbul ignore next */
     onOpened() {
       this.$emit('opened');
     },
@@ -169,6 +164,7 @@ export default createComponent({
       this.$emit('close');
     },
 
+    /* istanbul ignore next */
     onClosed() {
       this.$emit('closed');
     },
diff --git a/src/popover/test/__snapshots__/demo.spec.js.snap b/src/popover/test/__snapshots__/demo.spec.js.snap
index 7c04f9b40..643cfa927 100644
--- a/src/popover/test/__snapshots__/demo.spec.js.snap
+++ b/src/popover/test/__snapshots__/demo.spec.js.snap
@@ -2,57 +2,28 @@
 
 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><span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
+          浅色风格
+        </span></div></button></span> <span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
+          深色风格
+        </span>
+</div></button></span></div>
+<div>
+  <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+    <div class="van-cell__title van-field__label"><span>选择弹出位置</span></div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" name="picker" readonly="readonly" class="van-field__control"></div>
+    </div><i class="van-icon van-icon-arrow van-cell__right-icon">
+      <!----></i>
   </div>
 </div>
+<div><span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
+          展示图标
+        </span></div></button></span> <span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
+          禁用选项
+        </span></div></button></span></div>
+<div><span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
+          自定义内容
+        </span></div></button></span></div>
+</div>
 `;
diff --git a/src/popover/test/__snapshots__/index.spec.js.snap b/src/popover/test/__snapshots__/index.spec.js.snap
index 2d4588095..08e911b9a 100644
--- a/src/popover/test/__snapshots__/index.spec.js.snap
+++ b/src/popover/test/__snapshots__/index.spec.js.snap
@@ -1,22 +1,24 @@
 // 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>
+exports[`should locate to reference element when showed 1`] = `<!---->`;
+
+exports[`should locate to reference element when showed 2`] = `
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2005;" data-popper-placement="bottom">
+  <div class="van-popover__arrow"></div>
+  <div class="van-popover__content"></div>
+</div>
+`;
+
+exports[`should locate to reference element when showed 3`] = `
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2005; display: none;" data-popper-placement="bottom">
+  <div class="van-popover__arrow"></div>
+  <div class="van-popover__content"></div>
+</div>
+`;
+
+exports[`should watch placement prop and update location 1`] = `
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="z-index: 2006; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top">
+  <div class="van-popover__arrow"></div>
+  <div class="van-popover__content"></div>
 </div>
 `;
diff --git a/src/popover/test/index.spec.js b/src/popover/test/index.spec.js
index 0ccd98fb1..cca008089 100644
--- a/src/popover/test/index.spec.js
+++ b/src/popover/test/index.spec.js
@@ -1,2 +1,120 @@
-// import Popover from '..';
-// import { mount } from '../../../test';
+import Popover from '..';
+import { later, mount, trigger } from '../../../test';
+
+const baseActions = [
+  { text: 'Option 1' },
+  { text: 'Option 2' },
+  { text: 'Option 3' },
+];
+
+test('should emit select event when clicking the action', () => {
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      actions: baseActions,
+    },
+  });
+
+  wrapper.find('.van-popover__action').trigger('click');
+  expect(wrapper.emitted('select')[0]).toEqual([baseActions[0], 0]);
+});
+
+test('should not emit select event when the action is disabled', () => {
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      actions: [{ text: 'Option', disabled: true }],
+    },
+  });
+
+  wrapper.find('.van-popover__action').trigger('click');
+  expect(wrapper.emitted('select')).toBeFalsy();
+});
+
+test('should close popover when clicking the action', () => {
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      actions: baseActions,
+    },
+  });
+
+  wrapper.find('.van-popover__action').trigger('click');
+  expect(wrapper.emitted('input')[0][0]).toEqual(false);
+
+  wrapper.setProps({ closeOnClickAction: false });
+  wrapper.find('.van-popover__action').trigger('click');
+  expect(wrapper.emitted('input').length).toEqual(1);
+});
+
+test('should not init popper.js instance before showed', async () => {
+  const wrapper = mount(Popover);
+  expect(wrapper.vm.popper).toBeFalsy();
+  wrapper.destroy();
+});
+
+test('should destroy popper.js instance when unmouted', async () => {
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+    },
+  });
+
+  await later();
+  expect(wrapper.vm.popper).toBeTruthy();
+  wrapper.destroy();
+  expect(wrapper.vm.popper).toEqual(null);
+});
+
+test('should locate to reference element when showed', async () => {
+  const root = document.createElement('div');
+  const wrapper = mount(Popover, {
+    propsData: {
+      getContainer: () => root,
+    },
+  });
+
+  expect(root.innerHTML).toMatchSnapshot();
+
+  wrapper.setProps({ value: true });
+  await later();
+  expect(root.innerHTML).toMatchSnapshot();
+
+  wrapper.setProps({ value: false });
+  expect(root.innerHTML).toMatchSnapshot();
+});
+
+test('should watch placement prop and update location', async () => {
+  const root = document.createElement('div');
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      getContainer: () => root,
+    },
+  });
+
+  wrapper.setProps({
+    placement: 'top',
+  });
+
+  await later();
+  expect(root.innerHTML).toMatchSnapshot();
+});
+
+test('should close popover when touch outside content', async () => {
+  const root = document.createElement('div');
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      getContainer: () => root,
+    },
+  });
+
+  const popover = root.querySelector('.van-popover');
+  trigger(popover, 'touchstart');
+  expect(wrapper.emitted('input')).toBeFalsy();
+
+  document.body.appendChild(root);
+  trigger(document.body, 'touchstart');
+  expect(wrapper.emitted('input')[0][0]).toEqual(false);
+});

From 178a41a8b032ef5aa4ac43a5b84b0e633ec4f6d7 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 20 Nov 2020 11:55:56 +0800
Subject: [PATCH 20/23] test(Popover): add className test case

---
 src/popover/test/__snapshots__/index.spec.js.snap | 12 +++++++++---
 src/popover/test/index.spec.js                    | 11 +++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/popover/test/__snapshots__/index.spec.js.snap b/src/popover/test/__snapshots__/index.spec.js.snap
index 08e911b9a..5cb3f0706 100644
--- a/src/popover/test/__snapshots__/index.spec.js.snap
+++ b/src/popover/test/__snapshots__/index.spec.js.snap
@@ -1,23 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should allow to custom the className of action 1`] = `
+<div class="van-popover__action foo">
+  <div class="van-popover__action-text van-hairline--bottom">Option</div>
+</div>
+`;
+
 exports[`should locate to reference element when showed 1`] = `<!---->`;
 
 exports[`should locate to reference element when showed 2`] = `
-<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2005;" data-popper-placement="bottom">
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2006;" data-popper-placement="bottom">
   <div class="van-popover__arrow"></div>
   <div class="van-popover__content"></div>
 </div>
 `;
 
 exports[`should locate to reference element when showed 3`] = `
-<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2005; display: none;" data-popper-placement="bottom">
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2006; display: none;" data-popper-placement="bottom">
   <div class="van-popover__arrow"></div>
   <div class="van-popover__content"></div>
 </div>
 `;
 
 exports[`should watch placement prop and update location 1`] = `
-<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="z-index: 2006; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top">
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="z-index: 2007; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top">
   <div class="van-popover__arrow"></div>
   <div class="van-popover__content"></div>
 </div>
diff --git a/src/popover/test/index.spec.js b/src/popover/test/index.spec.js
index cca008089..3a64d5e6d 100644
--- a/src/popover/test/index.spec.js
+++ b/src/popover/test/index.spec.js
@@ -47,6 +47,17 @@ test('should close popover when clicking the action', () => {
   expect(wrapper.emitted('input').length).toEqual(1);
 });
 
+test('should allow to custom the className of action', () => {
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+      actions: [{ text: 'Option', className: 'foo' }],
+    },
+  });
+
+  expect(wrapper.find('.van-popover__action').html()).toMatchSnapshot();
+});
+
 test('should not init popper.js instance before showed', async () => {
   const wrapper = mount(Popover);
   expect(wrapper.vm.popper).toBeFalsy();

From cac791fd1378ad87171f448bbf272b0d36191659 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 20 Nov 2020 14:05:15 +0800
Subject: [PATCH 21/23] types: add Popover typing

---
 types/index.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/types/index.d.ts b/types/index.d.ts
index 3e6a93bd3..f7141356e 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -65,6 +65,7 @@ export class Overlay extends VanComponent {}
 export class Pagination extends VanComponent {}
 export class Panel extends VanComponent {}
 export class PasswordInput extends VanComponent {}
+export class Popover extends VanComponent {}
 export class Popup extends VanComponent {}
 export class PullRefresh extends VanComponent {}
 export class Radio extends VanComponent {}

From 85202c76764cc645b0e2a4c630d3fd3cb7ad25c7 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 20 Nov 2020 14:19:54 +0800
Subject: [PATCH 22/23] style(Popover): add less vars

---
 src/popover/index.less | 28 ++++++++++++++--------------
 src/style/var.less     | 15 +++++++++++++++
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/popover/index.less b/src/popover/index.less
index 7c81be84d..a97e0ec6a 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -17,12 +17,12 @@
     height: 0;
     border-color: transparent;
     border-style: solid;
-    border-width: 6px;
+    border-width: @popover-arrow-size;
   }
 
   &__content {
     overflow: hidden;
-    border-radius: @border-radius-lg;
+    border-radius: @popover-border-radius;
   }
 
   &__action {
@@ -30,10 +30,10 @@
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    width: 128px;
-    height: 44px;
+    width: @popover-action-width;
+    height: @popover-action-height;
     padding: 0 @padding-md;
-    font-size: @font-size-md;
+    font-size: @popover-action-font-size;
     line-height: @line-height-md;
 
     &:last-child {
@@ -52,7 +52,7 @@
 
     &-icon {
       margin-right: @padding-xs;
-      font-size: 20px;
+      font-size: @popover-action-icon-size;
     }
 
     &--with-icon {
@@ -195,15 +195,15 @@
   }
 
   &--light {
-    color: @text-color;
+    color: @popover-light-text-color;
 
     .van-popover__content {
-      background-color: @white;
+      background-color: @popover-light-background-color;
       box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
     }
 
     .van-popover__arrow {
-      color: @white;
+      color: @popover-light-background-color;
     }
 
     .van-popover__action {
@@ -212,7 +212,7 @@
       }
 
       &--disabled {
-        color: @gray-5;
+        color: @popover-light-action-disabled-text-color;
 
         &:active {
           background-color: transparent;
@@ -222,14 +222,14 @@
   }
 
   &--dark {
-    color: @white;
+    color: @popover-dark-text-color;
 
     .van-popover__content {
-      background-color: #4a4a4a;
+      background-color: @popover-dark-background-color;
     }
 
     .van-popover__arrow {
-      color: #4a4a4a;
+      color: @popover-dark-background-color;
     }
 
     .van-popover__action {
@@ -238,7 +238,7 @@
       }
 
       &--disabled {
-        color: @gray-6;
+        color: @popover-dark-action-disabled-text-color;
 
         &:active {
           background-color: transparent;
diff --git a/src/style/var.less b/src/style/var.less
index df5fe7ffb..9443f69a3 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -555,6 +555,21 @@
 @picker-loading-icon-color: @blue;
 @picker-loading-mask-color: rgba(255, 255, 255, 0.9);
 
+// Popover
+@popover-arrow-size: 6px;
+@popover-border-radius: @border-radius-lg;
+@popover-action-width: 128px;
+@popover-action-height: 44px;
+@popover-action-font-size: @font-size-md;
+@popover-action-line-height: @line-height-md;
+@popover-action-icon-size: 20px;
+@popover-light-text-color: @text-color;
+@popover-light-background-color: @white;
+@popover-light-action-disabled-text-color: @gray-5;
+@popover-dark-text-color: @white;
+@popover-dark-background-color: #4a4a4a;
+@popover-dark-action-disabled-text-color: @gray-6;
+
 // Popup
 @popup-background-color: @white;
 @popup-transition: transform @animation-duration-base;

From 50f0023e9bbffa52cadf1131ccae006ae3b982a5 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 20 Nov 2020 14:36:15 +0800
Subject: [PATCH 23/23] style(Popup): use animation timing function less var

---
 src/popup/index.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/popup/index.less b/src/popup/index.less
index 9a9234ab7..f94a1702f 100644
--- a/src/popup/index.less
+++ b/src/popup/index.less
@@ -72,14 +72,14 @@
     &-slide-left-enter-active,
     &-slide-right-enter-active,
     &-slide-bottom-enter-active {
-      transition-timing-function: ease-out;
+      transition-timing-function: @animation-timing-function-enter;
     }
 
     &-slide-top-leave-active,
     &-slide-left-leave-active,
     &-slide-right-leave-active,
     &-slide-bottom-leave-active {
-      transition-timing-function: ease-in;
+      transition-timing-function: @animation-timing-function-leave;
     }
 
     &-slide-top-enter,