🐛(transfer): 修复 transfer-data 高度

更新文档

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.1.7-alpha.3",
+  "version": "1.1.7",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

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

@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<LayInputProps>(), {
   readonly: false,
   allowClear: false,
   autofocus: false,
-  modelValue: ""
+  modelValue: "",
 });
 
 const emit = defineEmits([

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

@@ -12,7 +12,7 @@ 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';
+import { computedAsync } from "@vueuse/core";
 
 export interface LayTransferProps {
   id?: string;
@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<LayTransferProps>(), {
   showSearch: false,
   selectedKeys: () => [],
   width: "200px",
-  height: "360px"
+  height: "360px",
 });
 
 const leftDataSource: Ref<any[]> = ref([...props.dataSource]);
@@ -171,10 +171,15 @@ const searchRight = (e: any) => {
 const boxStyle = computed(() => {
   return {
     width: props.width,
-    height: props.height
+    height: props.height,
+  };
+});
+
+const dataStyle = computed(() => {
+  return {
+    height: props.showSearch ? 'calc(100% - 97px)' : 'calc(100% - 38px)'
   }
 })
-
 </script>
 
 <template>
@@ -192,9 +197,13 @@ const boxStyle = computed(() => {
           </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" style="height:320px">
+        <ul class="layui-transfer-data" :style="dataStyle">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
             <LayCheckbox
               v-model="leftSelectedKeys"
@@ -233,9 +242,13 @@ const boxStyle = computed(() => {
           </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" style="height: 320px">
+        <ul class="layui-transfer-data" :style="dataStyle">
           <li v-for="dataSource in rightDataSource" :key="dataSource">
             <LayCheckbox
               v-model="rightSelectedKeys"

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

@@ -19,8 +19,10 @@
           <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>
+          <li>[修复] transfer 组件 input 样式, 由原生 input 修改为 lay-input 组件</li>
+          <li>[修复] transfer 组件 transfer-data 高度超出 transfer-box 的问题</li>  
+          <li>[修复] table 组件 按需加载 时, 内置 checkbox 无法正常显示的问题</li>
+          <li>[优化] input 组件 modelValue 属性非必填, 使用 @input 回调取值</li>
         </ul>
       </li>
     </ul>