✨(transfer): 新增 width 与 height 属性

更新文档

package/component/src/component/input/index.vue

@@ -16,7 +16,7 @@ export interface LayInputProps {
   value?: string;
   disabled?: boolean;
   readonly?: boolean;
-  modelValue: string;
+  modelValue?: string;
   placeholder?: string;
   allowClear?: boolean;
   autofocus?: boolean;
@@ -30,6 +30,7 @@ const props = withDefaults(defineProps<LayInputProps>(), {
   readonly: false,
   allowClear: false,
   autofocus: false,
+  modelValue: ""
 });
 
 const emit = defineEmits([

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

@@ -45,16 +45,13 @@
 }
 
 .layui-transfer-search .layui-input {
-  height: 32px;
+  height: 35px;
-  padding-left: 30px;
+  padding-left: 2px;
-  font-size: 12px;
+  font-size: 13px;
+  letter-spacing: 1px;
 }
 
 .layui-transfer-search .layui-icon-search {
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  margin-top: -8px;
   color: #666;
 }
 

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

@@ -6,17 +6,22 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import LayScroll from "../scroll";
+import LayInput from "../input/index.vue";
+import LayScroll from "../scroll/index.vue";
 import LayButton from "../button/index.vue";
 import LayCheckbox from "../checkbox/index.vue";
-import { Ref, ref, useSlots, watch } from "vue";
+import { computed, Ref, ref, useSlots, watch } from "vue";
 import { BooleanOrString, Recordable } from "../../types";
+import { computedAsync } from '@vueuse/core';
 
 export interface LayTransferProps {
   id?: string;
   title?: string[];
+  width?: string;
+  height?: string;
   showSearch?: BooleanOrString;
   dataSource: Recordable[];
+  selectedKeys: Recordable[];
 }
 
 const slot = useSlots();
@@ -27,6 +32,8 @@ const props = withDefaults(defineProps<LayTransferProps>(), {
   dataSource: () => [],
   showSearch: false,
   selectedKeys: () => [],
+  width: "200px",
+  height: "360px"
 });
 
 const leftDataSource: Ref<any[]> = ref([...props.dataSource]);
@@ -160,12 +167,20 @@ const searchRight = (e: any) => {
     }
   });
 };
+
+const boxStyle = computed(() => {
+  return {
+    width: props.width,
+    height: props.height
+  }
+})
+
 </script>
 
 <template>
   <div>
     <div class="layui-transfer layui-form layui-border-box">
-      <div class="layui-transfer-box" style="width: 200px; height: 360px">
+      <div class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
           <LayCheckbox
             v-model="allLeftChecked"
@@ -177,15 +192,9 @@ const searchRight = (e: any) => {
           </LayCheckbox>
         </div>
         <div class="layui-transfer-search" v-if="showSearch">
-          <i class="layui-icon layui-icon-search"></i
+          <lay-input prefix-icon="layui-icon-search" @input="searchLeft" placeholder="关键词搜索"></lay-input>
-          ><input
-            type="input"
-            class="layui-input"
-            @input="searchLeft"
-            placeholder="关键词搜索"
-          />
         </div>
-        <ul class="layui-transfer-data" style="height: 320px">
+        <ul class="layui-transfer-data" style="height:320px">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
             <LayCheckbox
               v-model="leftSelectedKeys"
@@ -212,7 +221,7 @@ const searchRight = (e: any) => {
           ><i class="layui-icon layui-icon-prev"></i
         ></LayButton>
       </div>
-      <div class="layui-transfer-box" style="width: 200px; height: 360px">
+      <div class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
           <LayCheckbox
             v-model="allRightChecked"
@@ -224,13 +233,7 @@ const searchRight = (e: any) => {
           </LayCheckbox>
         </div>
         <div class="layui-transfer-search" v-if="showSearch">
-          <i class="layui-icon layui-icon-search"></i
+           <lay-input prefix-icon="layui-icon-search" @input="searchRight" placeholder="关键词搜索"></lay-input>
-          ><input
-            type="input"
-            class="layui-input"
-            @input="searchRight"
-            placeholder="关键词搜索"
-          />
         </div>
         <ul class="layui-transfer-data" style="height: 320px">
           <li v-for="dataSource in rightDataSource" :key="dataSource">

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

@@ -171,6 +171,8 @@ export default {
 | title      | 标题        | --              |
 | id         | 主键        | --              |
 | showSearch | 开启搜索        | --              |
+| width      | 左右盒子宽度        | `200px`              |
+| height     | 左右盒子高度        |  `360px`              |
 
 :::
 

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

@@ -17,7 +17,9 @@
         <h3>1.1.7 <span class="layui-badge-rim">2022-06-13</span></h3> 
         <ul>
           <li>[新增] upload 组件 default 插槽, 允许自定义上传入口</li>
+          <li>[新增] transfer 组件 width 与 height 属性, 允许自定义盒子尺寸</li>
           <li>[新增] table 组件 max-height 与 height 属性, 超出指定高度标题固定</li>
+          <li>[修复] transfer 组件 input 样式, 由原生 input 修改为 lay-input</li> 
           <li>[修复] table 组件 按需加载 时, 内置 checkbox 无法正常解析</li>
         </ul>
       </li>