♻️: 使用 flex 重构 transfer 布局

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

@@ -5,6 +5,10 @@
   --transfer-box-border-radius: var(--global-border-radius);
 }
 
+.layui-transfer {
+  display: flex;
+}
+
 .layui-transfer .layui-btn + .layui-btn {
   margin-left: 0;
 }
@@ -22,6 +26,8 @@
   border-width: 1px;
   width: 200px;
   height: 360px;
+  display: flex;
+  flex-direction: column;
   border-radius: var(--transfer-box-border-radius);
   background-color: #fff;
 }
@@ -36,12 +42,14 @@
   line-height: 38px;
   padding: 0 10px;
   border-bottom-width: 1px;
+  flex: 0;
 }
 
 .layui-transfer-search {
   position: relative;
   padding: 10px;
   border-bottom-width: 1px;
+  flex: 0;
 }
 
 .layui-transfer-search .layui-input {
@@ -86,6 +94,7 @@
 .layui-transfer-data {
   padding: 5px 0;
   overflow: auto;
+  flex: 1;
 }
 
 .layui-transfer-data li {
@@ -105,8 +114,14 @@
   color: #999;
 }
 
-.layui-transfer-active,
+.layui-transfer-active {
-.layui-transfer-box {
+  display: flex;
-  display: inline-block;
+  align-items: center;
-  vertical-align: middle;
+  justify-items: center;
+}
+
+.layui-transfer-footer {
+  flex: 0;
+  height: 48px;
+  line-height: 48px;
 }

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

@@ -186,12 +186,6 @@ const boxStyle = computed(() => {
     height: props.height,
   };
 });
-
-const dataStyle = computed(() => {
-  return {
-    height: props.showSearch ? "calc(100% - 97px)" : "calc(100% - 38px)",
-  };
-});
 </script>
 
 <template>
@@ -199,82 +193,56 @@ const dataStyle = computed(() => {
     <div class="layui-transfer layui-form layui-border-box">
       <div class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
-          <LayCheckbox
+          <LayCheckbox v-model="hasLeftChecked" :is-indeterminate="!allLeftChecked" skin="primary" label="all"
-            v-model="hasLeftChecked"
+            @change="allLeftChange">
-            :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
+          <lay-input prefix-icon="layui-icon-search" @input="searchLeft" placeholder="关键词搜索"></lay-input>
-            prefix-icon="layui-icon-search"
-            @input="searchLeft"
-            placeholder="关键词搜索"
-          ></lay-input>
         </div>
-        <ul class="layui-transfer-data" :style="dataStyle">
+        <ul class="layui-transfer-data">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
-            <LayCheckbox
+            <LayCheckbox v-model="leftSelectedKeys" skin="primary" :label="dataSource[id]">
-              v-model="leftSelectedKeys"
-              skin="primary"
-              :label="dataSource[id]"
-            >
               <slot v-if="slot.item" name="item" :data="dataSource"></slot>
               <span v-else>{{ dataSource.title }}</span>
             </LayCheckbox>
           </li>
         </ul>
+        <div class="layui-transfer-footer">
+          底部
+        </div>
       </div>
       <div class="layui-transfer-active">
-        <LayButton
+        <div class="layui-transfer-button-group">
-          type="primary"
+          <LayButton type="primary" :disabled="leftSelectedKeys.length == 0" @click="add"><i
-          :disabled="leftSelectedKeys.length == 0"
+              class="layui-icon layui-icon-next"></i></LayButton>
-          @click="add"
+          <LayButton type="primary" :disabled="rightSelectedKeys.length == 0" @click="remove"><i
-          ><i class="layui-icon layui-icon-next"></i
+              class="layui-icon layui-icon-prev"></i></LayButton>
-        ></LayButton>
+        </div>
-        <LayButton
-          type="primary"
-          :disabled="rightSelectedKeys.length == 0"
-          @click="remove"
-          ><i class="layui-icon layui-icon-prev"></i
-        ></LayButton>
       </div>
       <div class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
-          <LayCheckbox
+          <LayCheckbox v-model="hasRightChecked" :is-indeterminate="!allRightChecked" skin="primary" label="all"
-            v-model="hasRightChecked"
+            @change="allRightChange">
-            :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
+          <lay-input prefix-icon="layui-icon-search" @input="searchRight" placeholder="关键词搜索"></lay-input>
-            prefix-icon="layui-icon-search"
-            @input="searchRight"
-            placeholder="关键词搜索"
-          ></lay-input>
         </div>
-        <ul class="layui-transfer-data" :style="dataStyle">
+        <ul class="layui-transfer-data">
           <li v-for="dataSource in rightDataSource" :key="dataSource">
-            <LayCheckbox
+            <LayCheckbox v-model="rightSelectedKeys" skin="primary" :label="dataSource[id]">
-              v-model="rightSelectedKeys"
-              skin="primary"
-              :label="dataSource[id]"
-            >
               <slot v-if="slot.item" name="item" :data="dataSource"></slot>
               <span v-else>{{ dataSource.title }}</span>
             </LayCheckbox>
           </li>
         </ul>
+        <div class="layui-transfer-footer">
+          底部
+        </div>
       </div>
     </div>
   </div>
-</template>
+</template>