📝: 更新日志

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

@@ -69,9 +69,7 @@ watch(
     } else {
       allLeftChecked.value = false;
     }
-    if (
+    if (leftSelectedKeys.value.length > 0 && leftDataSource.value.length != 0) {
-      leftSelectedKeys.value.length > 0 && leftDataSource.value.length != 0
-    ) {
       hasLeftChecked.value = true;
     } else {
       hasLeftChecked.value = false;
@@ -103,7 +101,8 @@ watch(
       allRightChecked.value = false;
     }
     if (
-      rightSelectedKeys.value.length > 0 && rightDataSource.value.length != 0
+      rightSelectedKeys.value.length > 0 &&
+      rightDataSource.value.length != 0
     ) {
       hasRightChecked.value = true;
     } else {
@@ -200,16 +199,30 @@ 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 v-model="hasLeftChecked" :is-indeterminate="!allLeftChecked" skin="primary" label="all" @change="allLeftChange">
+          <LayCheckbox
+            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" :style="dataStyle">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
-            <LayCheckbox v-model="leftSelectedKeys" skin="primary" :label="dataSource[id]">
+            <LayCheckbox
+              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>
@@ -217,23 +230,45 @@ const dataStyle = computed(() => {
         </ul>
       </div>
       <div class="layui-transfer-active">
-        <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 class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
-          <LayCheckbox v-model="hasRightChecked" :is-indeterminate="!allRightChecked" skin="primary" label="all" @change="allRightChange">
+          <LayCheckbox
+            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" :style="dataStyle">
           <li v-for="dataSource in rightDataSource" :key="dataSource">
-            <LayCheckbox v-model="rightSelectedKeys" skin="primary" :label="dataSource[id]">
+            <LayCheckbox
+              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>

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

@@ -18,6 +18,7 @@
         <ul>
           <li>[修复] tooltip 组件设置isAutoShow 属性时，宽度设置max-width 时拖动浏览器时出现...时，tooltip不显示问题。 by @dingyongya</li>
           <li>[修复] table 组件设置 ellipsisTooltip 属性时 出现...时，tooltip不显示问题。by @dingyongya</li>
+          <li>[优化] transfer 组件 selectedKeys 选中效果, 加入 checkbox 半选状态。by @Jmysy</li>
         </ul>
       </li>
     </ul>

package/layer/src/utils/index.ts

@@ -344,7 +344,9 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
   // 间隙
   let transOffsetTop = 15;
   // @ts-ignore 删除项的高度
-  let offsetHeight = document.getElementById(layerId)?.firstElementChild?.firstElementChild?.offsetHeight;
+  let offsetHeight =
+    document.getElementById(layerId)?.firstElementChild?.firstElementChild
+      ?.offsetHeight;
   // @ts-ignore
   window.NotifiyQueen = window.NotifiyQueen || [];
   // @ts-ignore
@@ -364,10 +366,14 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
       ?.firstElementChild;
     if (offsetType === "rt" || offsetType === "lt") {
       // @ts-ignore
-      dom.style["top"] = parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
+      dom.style["top"] =
+        parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
     } else {
       // @ts-ignore
-      let bottom = parseFloat(dom.style["top"].split(" - ")[1]) - transOffsetTop - offsetHeight;
+      let bottom =
+        parseFloat(dom.style["top"].split(" - ")[1]) -
+        transOffsetTop -
+        offsetHeight;
       // @ts-ignore
       dom.style["top"] = "calc(100vh - " + bottom + "px)";
     }
@@ -385,4 +391,4 @@ export function getNotifyAnimationClass(offset: any) {
     suffix = "rl";
   }
   return `${prefix}-${suffix}`;
-}
+}