feat(dao-dropdown): dao-dropdown 支持外部控制显示与否

DaoCloud · Aug 14, 2018 · 6c504f5 · 6c504f5
1 parent c040bae
commit 6c504f5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/docs/dao-dropdown.md b/docs/dao-dropdown.md
@@ -33,6 +33,7 @@ dropdown 是一个下拉菜单组件。代码请参照目录：[src/components/d
 参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必填
 -|-|-|-|-|-
 trigger | 触发方式 | String | click, hover, custom | hover | 否
+show | 是否打开 dropdown(仅在 trigger 为 custom 时生效) | Boolean | true, false | false | 否
 append-to-body | 是否将下拉菜单挂 DOM 元素载到 body | Boolean | true, false | true |否
 placement | 设置下拉菜单的相对位置 | String | (top\|bottom\|left\|right\|auto)(-start\|-end) | bottom |否
 

diff --git a/examples/routers/dropdown.vue b/examples/routers/dropdown.vue
@@ -57,10 +57,10 @@
 
     <dao-dropdown
       trigger="custom"
-      :append-to-body="false"
-      :visible="true"
+      :append-to-body="true"
+      :show="show"
       :placement="placement">
-      <button class="dao-btn blue">
+      <button class="dao-btn blue" @click="show = !show">
         下拉菜单
       </button>
       <dao-dropdown-menu slot="list">
@@ -100,6 +100,7 @@
     data() {
       return {
         placement: 'bottom-start',
+        show: true,
       };
     },
     methods: {

diff --git a/src/components/dao-dropdown/dao-dropdown.vue b/src/components/dao-dropdown/dao-dropdown.vue
@@ -1,10 +1,21 @@
 <template>
-  <div :class="[prefixCls, {'dao-dropdown-is-open': visible}]" v-clickoutside:dao-select-dropdown="handleClose" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
-    <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick">
+  <div
+    :class="[prefixCls, {'dao-dropdown-is-open': visible}]"
+    v-clickoutside:dao-select-dropdown="handleClose"
+    @mouseenter="handleMouseenter"
+    @mouseleave="handleMouseleave">
+    <div
+      :class="[prefixCls + '-rel']"
+      ref="reference"
+      @click="handleClick">
       <slot></slot>
     </div>
-    <div :class="[prefixCls + '-popper', 'dao-select-dropdown']" v-show="visible" ref="popper">
-      <div :class="[prefixCls + '-inner']">
+    <div
+      :class="[prefixCls + '-popper', 'dao-select-dropdown']"
+      v-show="visible"
+      ref="popper">
+      <div
+        :class="[prefixCls + '-inner']">
         <slot name="list"></slot>
       </div>
     </div>
@@ -29,10 +40,15 @@
         },
         default: 'hover',
       },
+      show: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
         prefixCls,
+        unwatch: null,
       };
     },
     methods: {
@@ -105,6 +121,15 @@
           li.addEventListener('click', this.handleClose);
         });
       }
+      if (this.trigger === 'custom') {
+        this.unwatch = this.$watch('show', () => {
+          setTimeout(() => {
+            this.visible = !!this.show;
+          }, 0);
+        }, {
+          immediate: true,
+        });
+      }
     },
     beforeDestroy() {
       if (this.appendToBody) {
@@ -114,6 +139,9 @@
           li.removeEventListener('click', this.handleClose);
         });
       }
+      if (this.unwatch) {
+        this.unwatch();
+      }
     },
   };
 </script>