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] 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;
+        }
       }
     }