iButton add some func

iButton add some func

src/components/button/button.vue

@@ -2,7 +2,7 @@
     <button :type="htmlType" :class="classes" :disabled="disabled">
         <i :class="loadingIconClasses" v-if="loading"></i>
         <i :class="typeIconClasses" v-if="icon && !loading"></i>
-        <slot></slot>
+        <span v-if="showSlot" v-el:slot><slot></slot></span>
     </button>
 </template>
 <script>
@@ -17,7 +17,7 @@
         props: {
             type: {
                 validator (value) {
-                    return oneOf(value, ['primary', 'ghost']);
+                    return oneOf(value, ['primary', 'ghost', 'dashed', 'text']);
                 }
             },
             shape: {
@@ -40,6 +40,11 @@
             },
             icon: String
         },
+        data () {
+            return {
+                showSlot: true
+            }
+        },
         computed: {
             classes () {
                 return [
@@ -48,7 +53,8 @@
                         [`${prefixCls}-${this.type}`]: !!this.type,
                         [`${prefixCls}-${this.shape}`]: !!this.shape,
                         [`${prefixCls}-${this.size}`]: !!this.size,
-                        [`${prefixCls}-loading`]: this.loading != null && this.loading
+                        [`${prefixCls}-loading`]: this.loading != null && this.loading,
+                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
                     }
                 ]
             },
@@ -63,6 +69,9 @@
                     }
                 ]
             }
+        },
+        ready () {
+            this.showSlot = this.$els.slot.innerHTML !== '';
         }
     }
 </script>

src/styles/components/button.less

@@ -4,6 +4,10 @@
     .btn;
     .btn-default;
 
+    & > .ivu-icon + span, & > span + .ivu-icon{
+        margin-left: 4px;
+    }
+
     &-primary {
         .btn-primary;
 
@@ -34,6 +38,14 @@
         .btn-ghost;
     }
 
+    &-dashed{
+        .btn-dashed;
+    }
+
+    &-text{
+        .btn-text;
+    }
+
     //&-dashed {
     //    .btn-dashed;
     //}

src/styles/mixins/button.less

@@ -93,7 +93,8 @@
     user-select: none;
     .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
     .transform(translate3d(0, 0, 0));
-    .transition(all @transition-time linear);
+    //.transition(all @transition-time linear);
+    .transition3(color @transition-time linear, background-color @transition-time linear, border @transition-time linear);
 
     > .@{css-prefix-iconfont} {
         line-height: 1;
@@ -189,20 +190,60 @@
     }
 }
 
+// Text
+.btn-text() {
+    .button-variant(@link-color, @btn-ghost-bg, transparent);
+
+    // for disabled
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+            .button-color(@btn-disable-color; @btn-ghost-bg; transparent);
+        }
+    }
+
+    &:hover
+        //&:focus
+    {
+        .button-color(tint(@primary-color, 20%); @btn-ghost-bg; transparent);
+    }
+    &:active,
+    &.active {
+        .button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
+    }
+}
+
 // Circle for Icon
 .btn-circle(@btnClassName: ivu-btn) {
+    border-radius: 28px;
+
+    &.@{btnClassName}-large{
+        border-radius: 36px;
+    }
+
+    &.@{btnClassName}-size{
+        border-radius: 24px;
+    }
+
+    &.@{btnClassName}-icon-only{
         .square(@btn-circle-size);
         .button-size(0; @font-size-base + 2; 50%);
 
-    &.@{btnClassName}-large {
+        &.@{btnClassName}-large{
             .square(@btn-circle-size-large);
             .button-size(0; @btn-font-size-large + 2; 50%);
         }
 
-    &.@{btnClassName}-small {
+        &.@{btnClassName}-small{
             .square(@btn-circle-size-small);
             .button-size(0; @font-size-base; 50%);
         }
+    }
 }
 
 // Group

src/styles/themes/default/custom.less

@@ -47,8 +47,8 @@
 // Button
 @btn-font-weight        : 400;
 @btn-padding-base       : 4px 15px;
-@btn-padding-large      : 4px 15px 5px 15px;
+@btn-padding-large      : 6px 15px 7px 15px;
-@btn-padding-small      : 1px 7px;
+@btn-padding-small      : 2px 7px;
 @btn-font-size          : 12px;
 @btn-font-size-large    : 14px;
 @btn-border-radius      : 4px;

test/routers/button.vue

@@ -1,7 +1,17 @@
 <template>
+    <i-button type="primary" icon="ios-search" shape="circle" size="small"></i-button>
+    <i-button type="primary" icon="ios-search" shape="circle"></i-button>
+    <i-button type="primary" icon="ios-search" shape="circle" size="large"></i-button>
+    <i-button type="primary" icon="ios-search" shape="circle" size="small">搜索</i-button>
+    <i-button type="primary" icon="ios-search" shape="circle">搜索</i-button>
+    <i-button type="primary" icon="ios-search" shape="circle" size="large">搜索</i-button>
+    <br><br>
     <i-button>Default</i-button>
     <i-button type="primary">Primary</i-button>
     <i-button type="ghost">Ghost</i-button>
+    <i-button type="dashed">Dashed</i-button>
+    <i-button type="text">文字按钮</i-button>
+    <i-button type="text" disabled>文字按钮</i-button>
     <br><br>
     <i-button type="primary" size="large">Large</i-button>
     <i-button type="primary">Default</i-button>
@@ -16,6 +26,9 @@
     <i-button type="ghost">Ghost</i-button>
     <i-button type="ghost" disabled>Ghost(Disabled)</i-button>
     <br><br>
+    <i-button type="dashed">dashed</i-button>
+    <i-button type="dashed" disabled>dashed(Disabled)</i-button>
+    <br><br>
     <i-button type="primary" shape="circle" icon="ios-search"></i-button>
     <i-button type="primary" icon="ios-search">搜索</i-button>
     <br><br>
@@ -53,6 +66,7 @@
         <i-button type="primary">L</i-button>
         <i-button>M</i-button>
         <i-button type="ghost">R</i-button>
+        <i-button type="dashed">R</i-button>
     </Button-group>
     <h4>配合图标</h4>
     <Button-group>
@@ -69,29 +83,9 @@
         <i-button type="primary" icon="cloud"></i-button>
         <i-button type="primary" icon="upload"></i-button>
     </Button-group>
-    <Modal
-            :visible="true"
-            title="普通的Modal对话框标题">
-        <p>对话框内容</p>
-        <p>对话框内容</p>
-        <p>对话框内容</p>
-        <div style="width: 200px">
-            <i-select :model.sync="model6" >
-                <i-option value="beijing">北京市</i-option>
-                <i-option value="shanghai" disabled>上海市</i-option>
-                <i-option value="shenzhen">深圳市</i-option>
-            </i-select>
-        </div>
-
-    </Modal>
-    <i-select :model.sync="model6" >
-        <i-option value="beijing">北京市</i-option>
-        <i-option value="shanghai" disabled>上海市</i-option>
-        <i-option value="shenzhen">深圳市</i-option>
-    </i-select>
 </template>
 <script>
-    import { Button, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page, Modal, iSelect, iOption } from 'iview';
+    import { Button, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page } from 'iview';
     const ButtonGroup = Button.Group;
     const RadioGroup = Radio.Group;
     const CheckboxGroup = Checkbox.Group;
@@ -110,10 +104,7 @@
             InputNumber,
             Row,
             iCol: Col,
-            Page,
+            Page
-            Modal,
-            iSelect,
-            iOption
         },
         props: {