fix(Dropdown): add button dropdown

heyui · Dec 7, 2018 · 491cf86 · 491cf86
1 parent bd4687c
commit 491cf86
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 31 deletions.
diff --git a/doc/components/component/plugin/dropdowncustom.vue b/doc/components/component/plugin/dropdowncustom.vue
@@ -103,6 +103,13 @@
           <div>'-10px + 5vh, 5px - 6%'</div>
         </td>
       </tr>
+      <tr>
+        <td>button</td>
+        <td>使用按钮的样式调用</td>
+        <td>Boolean</td>
+        <td>-</td>
+        <td>false</td>
+      </tr>
     </table>
 
 

diff --git a/doc/components/component/plugin/dropdownmenu.vue b/doc/components/component/plugin/dropdownmenu.vue
@@ -162,6 +162,13 @@
         <td>-</td>
         <td>全局config <code>dict.titleName</code></td>
       </tr>
+      <tr>
+        <td>button</td>
+        <td>使用按钮的样式调用</td>
+        <td>Boolean</td>
+        <td>-</td>
+        <td>false</td>
+      </tr>
     </table>
 
 

diff --git a/doc/components/demos/plugins/dropdownmenu2.vue b/doc/components/demos/plugins/dropdownmenu2.vue
@@ -1,21 +1,18 @@
 
 <style lang="less">
-.button-dropdown.h-dropdowncustom-show-toggle{
-  &:hover, &.@{pop-ref-prefix}{
-    color: @primary-color;
-  }
-  .h-dropdowncustom-show-content{
-    padding: 0;
-  }
-  .h-btn {
-    padding-right: 26px;
-  }
-}
 </style>
 <template>
-  <DropdownMenu @click="trigger" :datas="param" class-name="button-dropdown">
-    <Button>菜单menu</Button>
-  </DropdownMenu>
+  <div>
+    <ButtonGroup>
+      <Button icon="h-icon-inbox">Create</Button>
+      <DropdownMenu button @click="trigger" :datas="param">Edit</DropdownMenu>
+    </ButtonGroup>
+    <ButtonGroup>
+      <Button color="primary" icon="h-icon-inbox">Create</Button>
+      <DropdownMenu class="h-btn-primary" button @click="trigger" :datas="param"></DropdownMenu>
+    </ButtonGroup>
+    <DropdownMenu button class="h-btn-primary" @click="trigger" :datas="param">开始</DropdownMenu>
+  </div>
 </template>
 <script>
 

diff --git a/doc/components_en/component/plugin/dropdowncustom.vue b/doc/components_en/component/plugin/dropdowncustom.vue
@@ -103,6 +103,13 @@
           <div>'-10px + 5vh, 5px - 6%'</div>
         </td>
       </tr>
+      <tr>
+        <td>button</td>
+        <td>Use button style</td>
+        <td>Boolean</td>
+        <td>-</td>
+        <td>false</td>
+      </tr>
     </table>
 
 

diff --git a/doc/components_en/component/plugin/dropdownmenu.vue b/doc/components_en/component/plugin/dropdownmenu.vue
@@ -162,6 +162,13 @@
         <td>-</td>
         <td>config <code>dict.titleName</code></td>
       </tr>
+      <tr>
+        <td>button</td>
+        <td>Use button style</td>
+        <td>Boolean</td>
+        <td>-</td>
+        <td>false</td>
+      </tr>
     </table>
 
     <h3>DropdownMenu Method</h3>

diff --git a/src/components/dropdowncustom/dropdowncustom.vue b/src/components/dropdowncustom/dropdowncustom.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="dropdowncustomCls">
     <div :class="showCls">
-      <div class="h-dropdowncustom-show-content"><slot></slot></div>
+      <div class="h-dropdowncustom-show-content" :class="{'h-dropdowncustom-show-empty': !$slots.default}"><slot></slot></div>
       <i class="h-icon-down" v-if="toggleIcon"></i>
     </div>
     <div :class="groupCls">
@@ -45,7 +45,11 @@ export default {
       default: 'h-dropdownmenu-default'
     },
     offset: [String, Number],
-    showClass: String
+    showClass: String,
+    button: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -102,7 +106,8 @@ export default {
   computed: {
     dropdowncustomCls() {
       return {
-        [`${prefix}`]: true
+        [`${prefix}`]: true,
+        'h-btn': this.button,
       }
     },
     showCls() {

diff --git a/src/components/dropdownmenu/dropdownmenu.vue b/src/components/dropdownmenu/dropdownmenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <DropdownCustom ref="dropdown" @show="$emit('show')" :delay="delay" @hide="$emit('hide')" :class="dropdownmenuCls" :trigger="trigger" :equalWidth="equalWidth" :toggleIcon="toggleIcon"
+  <DropdownCustom :button="button" ref="dropdown" @show="$emit('show')" :delay="delay" @hide="$emit('hide')" :class="dropdownmenuCls" :trigger="trigger" :equalWidth="equalWidth" :toggleIcon="toggleIcon"
   :placement="placement" :disabled="disabled" :className="className" :offset="offset" showClass="h-dropdownmenu-show">
     <slot></slot>
     <ul slot="content" :class="groupCls" :style="groupStyle">
@@ -80,7 +80,11 @@ export default {
       type: String,
       default: () => config.getOption('dict', 'titleName')
     },
-    offset: [String, Number]
+    offset: [String, Number],
+    button: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {

diff --git a/themes/common/mixins.less b/themes/common/mixins.less
@@ -208,17 +208,16 @@
     top: 50%;
     height: 10px;
     line-height: 12px;
-    transform: translate(0, -50%);
-    transition: all @transition-time;
+    transform: translate(0, -50%) scale(0.8);
+    transition: transform @transition-time;
   }
   &:hover when (@hasColor){
     >.h-icon-down {
       color: @primary-color;
     }
   }
   &.@{pop-ref-prefix}>.h-icon-down {
-    transform: rotate(-180deg) translate(0, 50%);
-
+    transform: rotate(-180deg) translate(0, 50%) scale(0.8);
     & when (@hasColor){
       color: @primary-color;
     }

diff --git a/themes/components/dropdowncustom.less b/themes/components/dropdowncustom.less
@@ -11,7 +11,10 @@
     &-content {
       display: inline-block;
       // padding-right: 26px;
-      transition: all 0.2s;
+      // transition: all 0.2s;
+      &.h-dropdowncustom-show-empty {
+        padding-right: 0 !important;
+      }
     }
   }
 
@@ -22,12 +25,24 @@
       color: @disabled-color !important;
     }
   }
+
+  &.h-btn {
+    padding: 0;
+    .h-dropdowncustom-show-content {
+      padding-right: 12px;
+    }
+    .h-dropdowncustom-show {
+      padding: 8px 15px;
+      padding-bottom: 9px;
+      margin-bottom: -1px;
+    }
+  }
 }
 
 .h-text-dropdown{
   cursor: pointer;
   &>span{
-    transition: @transition-time;
+    // transition: @transition-time;
     vertical-align: middle;
   }
   &:hover, &.@{pop-ref-prefix}{

diff --git a/themes/native/button.less b/themes/native/button.less
@@ -161,20 +161,23 @@
       &:hover {
         z-index: 2;
       }
-      &:first-of-type {
-        border-radius: @border-radius 0 0 @border-radius;
+      &:first-child {
+        border-top-left-radius: @border-radius;
+        border-bottom-left-radius: @border-radius;
       }
-      &:last-of-type {
-        border-radius: 0 @border-radius @border-radius 0;
+      &:last-child {
+        border-top-right-radius: @border-radius;
+        border-bottom-right-radius: @border-radius;
       }
     }
     &.@{btn-prefix}-group {
       &-circle {
         >:first-of-type {
-          border-radius: 50% 0 0 50%;
+          border-top-left-radius: 50%;
+          border-bottom-left-radius: 50%;
         }
         >:last-of-type {
-          border-radius: 0 50% 50% 0;
+          border-bottom-right-radius: 50%;
         }
       }
       .@{btn-prefix}[disabled]{