✨(transfer): 新增 leftFooter 与 rightFooter 底部插槽

package/component/src/component/transfer/index.less

@@ -124,4 +124,5 @@
   flex: 0;
   height: 48px;
   line-height: 48px;
+  padding: 0 10px;
 }

package/component/src/component/transfer/index.vue

@@ -12,7 +12,6 @@ import LayButton from "../button/index.vue";
 import LayCheckbox from "../checkbox/index.vue";
 import { computed, Ref, ref, useSlots, watch } from "vue";
 import { BooleanOrString, Recordable } from "../../types";
-import { computedAsync } from "@vueuse/core";
 
 export interface LayTransferProps {
   id?: string;
@@ -24,7 +23,7 @@ export interface LayTransferProps {
   selectedKeys?: Recordable[];
 }
 
-const slot = useSlots();
+const slots = useSlots();
 
 const props = withDefaults(defineProps<LayTransferProps>(), {
   id: "id",
@@ -193,54 +192,88 @@ const boxStyle = computed(() => {
     <div class="layui-transfer layui-form layui-border-box">
       <div class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
-          <LayCheckbox v-model="hasLeftChecked" :is-indeterminate="!allLeftChecked" skin="primary" label="all"
+          <LayCheckbox
-            @change="allLeftChange">
+            v-model="hasLeftChecked"
+            :is-indeterminate="!allLeftChecked"
+            skin="primary"
+            label="all"
+            @change="allLeftChange"
+          >
             <span>{{ title[0] }}</span>
           </LayCheckbox>
         </div>
         <div class="layui-transfer-search" v-if="showSearch">
-          <lay-input prefix-icon="layui-icon-search" @input="searchLeft" placeholder="关键词搜索"></lay-input>
+          <lay-input
+            prefix-icon="layui-icon-search"
+            @input="searchLeft"
+            placeholder="关键词搜索"
+          ></lay-input>
         </div>
         <ul class="layui-transfer-data">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
-            <LayCheckbox v-model="leftSelectedKeys" skin="primary" :label="dataSource[id]">
+            <LayCheckbox
-              <slot v-if="slot.item" name="item" :data="dataSource"></slot>
+              v-model="leftSelectedKeys"
+              skin="primary"
+              :label="dataSource[id]"
+            >
+              <slot v-if="slots.item" name="item" :data="dataSource"></slot>
               <span v-else>{{ dataSource.title }}</span>
             </LayCheckbox>
           </li>
         </ul>
-        <div class="layui-transfer-footer">
+        <div class="layui-transfer-footer" v-if="slots.leftFooter">
-          底部
+          <slot name="leftFooter"></slot>
         </div>
       </div>
       <div class="layui-transfer-active">
         <div class="layui-transfer-button-group">
-          <LayButton type="primary" :disabled="leftSelectedKeys.length == 0" @click="add"><i
+          <LayButton
-              class="layui-icon layui-icon-next"></i></LayButton>
+            type="primary"
-          <LayButton type="primary" :disabled="rightSelectedKeys.length == 0" @click="remove"><i
+            :disabled="leftSelectedKeys.length == 0"
-              class="layui-icon layui-icon-prev"></i></LayButton>
+            @click="add"
+            ><i class="layui-icon layui-icon-next"></i
+          ></LayButton>
+          <LayButton
+            type="primary"
+            :disabled="rightSelectedKeys.length == 0"
+            @click="remove"
+            ><i class="layui-icon layui-icon-prev"></i
+          ></LayButton>
         </div>
       </div>
       <div class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
-          <LayCheckbox v-model="hasRightChecked" :is-indeterminate="!allRightChecked" skin="primary" label="all"
+          <LayCheckbox
-            @change="allRightChange">
+            v-model="hasRightChecked"
+            :is-indeterminate="!allRightChecked"
+            skin="primary"
+            label="all"
+            @change="allRightChange"
+          >
             <span>{{ title[1] }}</span>
           </LayCheckbox>
         </div>
         <div class="layui-transfer-search" v-if="showSearch">
-          <lay-input prefix-icon="layui-icon-search" @input="searchRight" placeholder="关键词搜索"></lay-input>
+          <lay-input
+            prefix-icon="layui-icon-search"
+            @input="searchRight"
+            placeholder="关键词搜索"
+          ></lay-input>
         </div>
         <ul class="layui-transfer-data">
           <li v-for="dataSource in rightDataSource" :key="dataSource">
-            <LayCheckbox v-model="rightSelectedKeys" skin="primary" :label="dataSource[id]">
+            <LayCheckbox
-              <slot v-if="slot.item" name="item" :data="dataSource"></slot>
+              v-model="rightSelectedKeys"
+              skin="primary"
+              :label="dataSource[id]"
+            >
+              <slot v-if="slots.item" name="item" :data="dataSource"></slot>
               <span v-else>{{ dataSource.title }}</span>
             </LayCheckbox>
           </li>
         </ul>
-        <div class="layui-transfer-footer">
+        <div class="layui-transfer-footer" v-if="slots.rightFooter">
-          底部
+          <slot name="rightFooter"></slot>
         </div>
       </div>
     </div>

package/document-component/src/document/zh-CN/components/transfer.md

@@ -98,7 +98,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-transfer :dataSource="dataSource5" showSearch="true"></lay-transfer>
+  <lay-transfer :dataSource="dataSource5" :showSearch="true"></lay-transfer>
 </template>
 
 <script>
@@ -148,7 +148,24 @@ export default {
       {id:'4', title:'十字斩刀-斗'},
       {id:'5', title:'落炎魔杖'},
       {id:'6', title:'石中剑'},
-      {id:'7', title:'屠戮之刃'}
+      {id:'7', title:'屠戮之刃'},
+      {id:'8', title:'无影剑'},
+      {id:'9', title:'逸龙剑'},
+      {id:'10', title:'精灵之语'},
+      {id:'11', title:'十字斩刀-斗'},
+      {id:'12', title:'落炎魔杖'},
+      {id:'13', title:'石中剑'},
+      {id:'14', title:'屠戮之刃'},
+      {id:'15', title:'落炎魔杖'},
+      {id:'16', title:'石中剑'},
+      {id:'17', title:'屠戮之刃'},
+      {id:'18', title:'无影剑'},
+      {id:'19', title:'逸龙剑'},
+      {id:'20', title:'精灵之语'},
+      {id:'21', title:'十字斩刀-斗'},
+      {id:'22', title:'落炎魔杖'},
+      {id:'23', title:'石中剑'},
+      {id:'24', title:'屠戮之刃'}
     ]
     
     return {
@@ -160,6 +177,43 @@ export default {
 
 :::
 
+::: title 底部插槽
+:::
+
+::: demo
+
+<template>
+  <lay-transfer :dataSource="dataSource5">
+    <template v-slot:leftFooter>左侧底部</template>
+    <template v-slot:rightFooter>右侧底部</template>
+  </lay-transfer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const dataSource5 = [
+      {id:'1', title:'无影剑'},
+      {id:'2', title:'逸龙剑'},
+      {id:'3', title:'精灵之语'},
+      {id:'4', title:'十字斩刀-斗'},
+      {id:'5', title:'落炎魔杖'},
+      {id:'6', title:'石中剑'},
+      {id:'7', title:'屠戮之刃'}
+    ]
+    
+    return {
+      dataSource5
+    }
+  }
+}
+</script>
+
+::: 
+
 ::: title Transfer 属性
 :::
 
@@ -184,6 +238,8 @@ export default {
 | Name | Description | Accepted Values |
 | ---- | ----------- | --------------- |
 | item | 列表项      | { data }        |
+| leftFooter | 左侧盒子底部内容      | --      |
+| rightFooter | 右侧盒子底部内容      | --        |
 
 :::
 

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -16,6 +16,7 @@
       <li> 
         <h3>1.2.6 <span class="layui-badge-rim">2022-07-01</span></h3> 
         <ul>
+          <li>[新增] transfer 组件 leftFooter 与 rightFooter 插槽, 用于自定义穿梭框底部内容。by @Jmysy</li>
           <li>[修复] tooltip 组件设置isAutoShow 属性时，宽度设置max-width 时拖动浏览器时出现...时，tooltip不显示问题。 by @dingyongya</li>
           <li>[修复] table 组件设置 ellipsisTooltip 属性时 出现...时，tooltip不显示问题。by @dingyongya</li>
           <li>[优化] transfer 组件 selectedKeys 选中效果, 加入 checkbox 半选状态。by @Jmysy</li>