feat(Transfer): optimze

- add prop height - add slot param type - remove search when no data Closes #210
heyui · Aug 21, 2019 · d979e99 · d979e99
1 parent e13feb3
commit d979e99
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 22 deletions.
diff --git a/doc/components/component/transfer.vue b/doc/components/component/transfer.vue
@@ -40,6 +40,13 @@
         <td>-</td>
         <td>-</td>
       </tr>
+      <tr>
+        <td>height</td>
+        <td>穿梭器高度, 1.25.0+</td>
+        <td>Number</td>
+        <td>-</td>
+        <td>-</td>
+      </tr>
     </table>
 
     <h3>Transfer 事件</h3>

diff --git a/doc/components/demos/view/transfer3.vue b/doc/components/demos/view/transfer3.vue
@@ -2,11 +2,16 @@
 <template>
   <div>
     <p>值：{{value}}</p>
-    <Transfer v-model="value" :datas="sourceDatas" keyName="code" @transfer="test">
+    <Transfer v-model="value" :datas="sourceDatas" keyName="code" @transfer="test" :height="300">
       <template slot="sourceHeader"><div class="h-transfer-header">一线城市</div></template>
       <template slot="targetHeader"><div class="h-transfer-header">开通城市</div></template>
-      <template slot-scope="{option}" slot="item">
-        {{option.text}}({{option.code}})
+      <template slot-scope="{option, type}" slot="item">
+        <template v-if="type == 'source'">
+          {{option.text}}({{option.code}})
+        </template>
+        <template v-if="type == 'target'">
+          {{option.text}}【{{option.code}}】
+        </template>
       </template>
     </Transfer>
   </div>

diff --git a/doc/components_en/component/transfer.vue b/doc/components_en/component/transfer.vue
@@ -41,6 +41,13 @@
         <td>-</td>
         <td>-</td>
       </tr>
+      <tr>
+        <td>height</td>
+        <td>Transfer height, 1.25.0+</td>
+        <td>Number</td>
+        <td>-</td>
+        <td>-</td>
+      </tr>
     </table>
 
     <h3>Transfer Event</h3>

diff --git a/src/components/transfer/transfer.vue b/src/components/transfer/transfer.vue
@@ -2,18 +2,22 @@
 <template>
   <div class="h-transfer">
     <div class="h-transfer-source">
-      <slot name="sourceHeader"><div class="h-transfer-header" v-if="option&&option.ltHeadText">{{option.ltHeadText}}</div></slot>
-      <div v-if="option.filterable" class="h-transfer-filter"><input type="text" class="h-input" :placeholder="option?option.placeholder:'搜索'" v-model="ltSearchText"/></div>
-      <div class="h-transfer-list">
+      <slot name="sourceHeader">
+        <div class="h-transfer-header" v-if="option&&option.ltHeadText">{{option.ltHeadText}}</div>
+      </slot>
+      <div v-if="option.filterable && ( sources.length || ltSearchText)" class="h-transfer-filter">
+        <Search position="front" :placeholder="option?option.placeholder:'搜索'" v-model="ltSearchText" />
+      </div>
+      <div class="h-transfer-list" :style="transferListStyle">
         <div class="h-transfer-item" v-for="op in sources" :key="op[key]">
-          <Checkbox v-model="ltChecked"  :value="op[key]" :checked="false">
-            <slot name="item" :option="op">
+          <Checkbox v-model="ltChecked" :value="op[key]" :checked="false">
+            <slot name="item" :option="op" type="source">
               <template v-if="option&&option.render">{{option.render(op)}}</template>
               <template v-else>{{op.text}}</template>
             </slot>
           </Checkbox>
         </div>
-        <div class="h-transfer-item text-center"  v-if="sources.length===0">无数据</div>
+        <div class="h-transfer-item text-center" v-if="sources.length===0">无数据</div>
       </div>
     </div>
 
@@ -31,19 +35,25 @@
     </div>
 
     <div class="h-transfer-target">
-      <slot name="targetHeader"><div class="h-transfer-header" v-if="option&&option.rtHeadText">{{option.rtHeadText}}</div></slot>
-      <div v-if="option.filterable" class="h-transfer-filter"><input type="text" class="h-input" :placeholder="option?option.placeholder:'搜索'" v-model="rtSearchText"/></div>
-      <div class="h-transfer-list">
-        <div class="h-transfer-item" v-for="op in targets" :key="op[key]"><label>
-          <Checkbox v-model="rtChecked"  :value="op[key]">
-            <slot name="item" :option="op">
-              <template v-if="option&&option.render">{{option.render(op)}}</template>
-              <template v-else>{{op.text}}</template>
-            </slot>
-          </Checkbox>
-        </label></div>
+      <slot name="targetHeader">
+        <div class="h-transfer-header" v-if="option&&option.rtHeadText">{{option.rtHeadText}}</div>
+      </slot>
+      <div v-if="option.filterable && ( targets.length || rtSearchText)" class="h-transfer-filter">
+        <Search position="front" :placeholder="option?option.placeholder:'搜索'" v-model="rtSearchText" />
+      </div>
+      <div class="h-transfer-list" :style="transferListStyle">
+        <div class="h-transfer-item" v-for="op in targets" :key="op[key]">
+          <label>
+            <Checkbox v-model="rtChecked" :value="op[key]" >
+              <slot name="item" :option="op" type="target">
+                <template v-if="option&&option.render">{{option.render(op)}}</template>
+                <template v-else>{{op.text}}</template>
+              </slot>
+            </Checkbox>
+          </label>
+        </div>
+        <div class="h-transfer-item text-center" v-if="targets.length===0">无数据</div>
       </div>
-      <div class="h-transfer-item text-center"  v-if="targets.length===0">无数据</div>
     </div>
   </div>
 </template>
@@ -67,6 +77,7 @@ export default {
       type: String,
       default: 'key'
     },
+    height: Number,
     option: {
       type: Object,
       default: () => ({})
@@ -104,6 +115,13 @@ export default {
     }
   },
   computed: {
+    transferListStyle() {
+      let param = {};
+      if (this.height) {
+        param['height'] = `${this.height}px`;
+      }
+      return param;
+    },
     sources() {
       let value = this.value || [];
       let key = this.keyName || 'key';

diff --git a/themes/components/transfer.less b/themes/components/transfer.less
@@ -28,7 +28,7 @@
       }
     }
     .@{transfer-prefix}-list {
-      max-height: 240px;
+      height: 240px;
       overflow-y: auto;
       padding: 4px 0;
       .@{transfer-prefix}-item {