update Transfer

update Transfer

src/components/checkbox/checkbox.vue

@@ -18,7 +18,7 @@
                 v-model="checked"
                 @change="change">
         </span>
-        <slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
+        <slot v-if="showSlot"><span v-el:slot style="display:none">{{ value }}</span></slot>
     </label>
 </template>
 <script>
@@ -78,6 +78,8 @@
                 this.updateModel();
                 if (this.$els.slot && this.$els.slot.innerHTML === '') {
                     this.showSlot = false;
+                } else {
+                    this.$els.slot.style.display = 'inline';
                 }
             }
         },

src/components/transfer/list.vue

@@ -1,7 +1,8 @@
 <template>
     <div :class="prefixCls" :style="style">
         <div :class="prefixCls + '-header'">
-            <Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll">{{ title }}</Checkbox>
+            <Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
+            <span>{{ title }}</span>
             <span :class="prefixCls + '-header-count'">{{ count }}</span>
         </div>
         <div :class="bodyClasses">
@@ -15,7 +16,10 @@
                 <li
                     v-for="item in showItems | filterBy filterData"
                     :class="[prefixCls + '-content-item', {[prefixCls + '-content-item-disabled']: item.disabled}]"
-                    @click.prevent="select(item)"><Checkbox :checked="isCheck(item)" :disabled="item.disabled">{{ showLabel(item) }}</Checkbox></li>
+                    @click.prevent="select(item)">
+                    <Checkbox :checked="isCheck(item)" :disabled="item.disabled"></Checkbox>
+                    <span>{{ showLabel(item) }}</span>
+                </li>
                 <li :class="prefixCls + '-content-not-found'">{{ notFoundText }}</li>
             </ul>
         </div>
@@ -82,9 +86,7 @@
                 index > -1 ? this.checkedKeys.splice(index, 1) : this.checkedKeys.push(item.key);
             },
             updateFilteredData () {
-                this.showItems = this.data.map(item => {
-                    return item;
-                })
+                this.showItems = this.data;
             },
             toggleSelectAll (status) {
                 this.checkedKeys = status ?

src/styles/components/transfer.less

@@ -12,14 +12,14 @@
         font-size: @font-size-small;
         vertical-align: middle;
         border: 1px solid @border-color-base;
-        border-radius: @border-radius-base;
+        border-radius: @border-radius-base @border-radius-base 0 0;
         position: relative;
         padding-top: 35px;
 
         &-header {
             padding: 8px 16px;
             border-radius: @border-radius-base @border-radius-base 0 0;
-            background: #fff;
+            background: @head-bg;
             color: @text-color;
             border-bottom: 1px solid @border-color-split;
             overflow: hidden;
@@ -28,6 +28,10 @@
             left: 0;
             width: 100%;
 
+            & > span{
+                padding-left: 4px;
+            }
+
             &-count {
                 margin: 0 !important;
                 float: right;
@@ -39,7 +43,7 @@
             position: relative;
 
             &-with-search{
-                padding-top: 40px;
+                padding-top: 34px;
             }
         }
 
@@ -52,6 +56,10 @@
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
+
+                & > span{
+                    padding-left: 4px;
+                }
             }
 
             &-not-found{
@@ -64,11 +72,11 @@
             }
         }
         &-body-with-search &-content{
-            padding: 0;
+            padding: 6px 0 0;
         }
 
         &-body-search-wrapper{
-            padding: 8px;
+            padding: 8px 8px 0;
             position: absolute;
             top: 0;
             left: 0;
@@ -78,6 +86,15 @@
         &-search{
             position: relative;
         }
+
+        &-footer{
+            margin: 0 -1px;
+            border: 1px solid @border-color-base;
+            border-top: none;
+            border-radius: 0 0 @border-radius-base @border-radius-base;
+
+            .clearfix();
+        }
     }
     &-operation {
         display: inline-block;

src/styles/themes/default/custom.less

@@ -37,6 +37,7 @@
 @background-color-base        : #f7f7f7;  // base
 @background-color-select-hover: @input-disabled-bg;
 @tooltip-bg                   : rgba(70, 76, 91, .9);
+@head-bg                      : #f9fafc;
 
 // Shadow
 @shadow-color           : rgba(0, 0, 0, .2);

test/routers/radio.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        <Checkbox>hello</Checkbox>
         <Radio-group :model.sync="phone">
             <Radio value="apple">
                 <Icon type="social-apple"></Icon>

test/routers/transfer.vue

@@ -10,11 +10,16 @@
             filterable
             :target-keys.sync="targetKeys"
             :operations="['向左移动','向右移动']"
-            @on-change="change"></Transfer>
+            :filter-method="filterMethod"
+            @on-change="change">
+            <div :style="{float: 'right', margin: '5px'}">
+                <i-button type="ghost" size="small" @click="getMock">刷新</i-button>
+            </div>
+        </Transfer>
     </div>
 </template>
 <script>
-    import { Transfer } from 'iview';
+    import { Transfer, iButton } from 'iview';
 
     export default {
         props: {
@@ -38,6 +43,9 @@
             filterMethod (data, query) {
                 if (query === '') return true;
                 return data.label === query;
+            },
+            getMock () {
+
             }
         }
     }