[增强] checkbox 组件, v-model 支持 array 数据类型

docs/docs/zh-CN/guide/changelog.md

@@ -11,11 +11,13 @@
 <template>
 <lay-timeline>
 <lay-timeline-item title="0.2.4">
-[重构] row col 栅格组件, 支持 24 栅格。<br>
+[增强] checkbox 组件, v-model 支持 array 数据类型。<br>
+[重构] row col 栅格组件, 支持 24 粒度布局。<br>
 [重构] layui.css 样式, 集成 less 编译器。<br>
 [重构] button, button-group, button-container 非破坏性改进代码。<br>
 [修复] themeline 时间线，因 mackdown 造成的样式污染。<br>
 [新增] layer 弹层出场动画, 允许使用 isOutAmin 关闭。<br>
+[新增] checkbox-group 复选框组, 更方便的复选方式。<br>
 [删除] rate 评分 theme 属性默认值。<br>
 </lay-timeline-item>
 <lay-timeline-item title="0.2.3">

src/module/checkbox/index.vue

@@ -11,13 +11,14 @@ import "./index.less";
 export interface LayCheckboxProps {
   name?: string;
   skin?: string;
-  label?: string;
+  label: string;
-  modelValue?: boolean;
+  modelValue: boolean | Array<string>;
   disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<LayCheckboxProps>(), {
   modelValue: false,
+  disabled: false,
 });
 
 const checkboxGroup: any = inject("checkboxGroup", {});
@@ -34,20 +35,37 @@ const isChecked = computed({
   get() {
     if (isGroup.value) {
       return checkboxGroup.modelValue.value.includes(props.label);
+    } else {
+      if (Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(props.label);
       } else {
         return props.modelValue;
       }
+    }
   },
   set(val) {
     if (isGroup.value) {
-      setModelValue(val);
+      setGroupModelValue(val);
-    }
+    } else {
+      if (Array.isArray(props.modelValue)) {
+        setArrayModelValue(val);
+      } else {
         emit("change", val);
         emit("update:modelValue", val);
+      }
+    }
   },
 });
 
-const setModelValue = function (checked: any) {
+const arrayModelValue = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return [...props.modelValue];
+  } else {
+    return [];
+  }
+});
+
+const setGroupModelValue = function (checked: any) {
   let groupModelValue = [...checkboxGroup.modelValue.value];
   if (!checked) {
     groupModelValue.splice(groupModelValue.indexOf(props.label), 1);
@@ -57,6 +75,17 @@ const setModelValue = function (checked: any) {
   checkboxGroup.modelValue.value = groupModelValue;
 };
 
+const setArrayModelValue = function (checked: any) {
+  let arr = [...arrayModelValue.value];
+  if (!checked) {
+    arr.splice(arr.indexOf(props.label), 1);
+  } else {
+    arr.push(props.label);
+  }
+  emit("change", arr);
+  emit("update:modelValue", arr);
+};
+
 const handleClick = function () {
   if (!props.disabled) {
     isChecked.value = !isChecked.value;

src/module/table/index.vue

@@ -1,3 +1,98 @@
+<script lang="ts">
+export default {
+  name: 'LayTable',
+}
+</script>
+
+<script setup lang="ts">
+import {
+  ref,
+  watch,
+  useSlots,
+  defineProps,
+  withDefaults,
+  defineEmits,
+} from 'vue'
+import { Recordable } from '../type'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    skin?: string
+    size?: string
+    page?: Recordable
+    checkbox?: boolean
+    columns: Recordable[]
+    dataSource: Recordable[]
+    defaultToolbar?: boolean
+    selectedKeys?: Array<string>
+  }>(),
+  {
+    id: 'id',
+    size: 'md',
+    dataSource: () => [],
+    selectedKeys: () => [],
+  }
+)
+
+const emit = defineEmits(['change', 'row', 'row-double', 'update:selectedKeys'])
+
+const slot = useSlots()
+const slots = slot.default && slot.default()
+
+const allChecked = ref(false)
+const tableSelectedKeys = ref([...props.selectedKeys])
+const tableColumns = ref([...props.columns])
+
+const changeAll = function ( checked : any) {
+  const ids = props.dataSource.map((item: any) => {
+    return item[props.id];
+  });
+  tableSelectedKeys.value.splice(0, ids.length);
+  if (checked) {
+    ids.forEach((id) => {
+      tableSelectedKeys.value.push(id);
+    });
+  }
+  emit("update:selectedKeys", tableSelectedKeys.value);
+}
+
+watch(
+  tableSelectedKeys,
+  function () {
+    if (tableSelectedKeys.value.length === props.dataSource.length) {
+      allChecked.value = true
+    } else {
+      allChecked.value = false
+    }
+    emit('update:selectedKeys', tableSelectedKeys.value)
+  },
+  { deep: true }
+)
+
+const change = function (page: any) {
+  emit('change', page)
+}
+
+const rowClick = function (data: any) {
+  emit('row', data)
+}
+
+const rowDoubleClick = function (data: any) {
+  emit('row-double', data)
+}
+
+const print = function () {
+  let subOutputRankPrint = document.getElementById('lay-table') as HTMLElement
+  let newContent = subOutputRankPrint.innerHTML
+  let oldContent = document.body.innerHTML
+  document.body.innerHTML = newContent
+  window.print()
+  window.location.reload()
+  document.body.innerHTML = oldContent
+}
+</script>
+
 <template>
   <div id="lay-table">
     <table class="layui-hide" lay-filter="test" />
@@ -15,13 +110,13 @@
             </div>
             <template #content>
               <div style="padding: 10px">
-                <table-item-checkbox
+                <lay-checkbox
                   v-for="column in columns"
                   :key="column"
                   v-model="tableColumns"
                   skin="primary"
                   :label="column"
-                  >{{ column.title }}</table-item-checkbox
+                  >{{ column.title }}</lay-checkbox
                 >
               </div>
             </template>
@@ -46,7 +141,7 @@
                 <th v-if="checkbox" class="layui-table-col-special">
                   <div class="layui-table-cell laytable-cell-checkbox">
                     <lay-checkbox
-                      v-model:checked="allChecked"
+                      v-model="allChecked"
                       skin="primary"
                       label="all"
                       @change="changeAll"
@@ -78,12 +173,12 @@
                 >
                   <td v-if="checkbox" class="layui-table-col-special">
                     <div class="layui-table-cell laytable-cell-checkbox">
-                      <table-item-checkbox
+                      <lay-checkbox
                         v-model="tableSelectedKeys"
                         skin="primary"
                         :label="data[id]"
                       >
-                      </table-item-checkbox>
+                      </lay-checkbox>
                     </div>
                   </td>
 
@@ -140,106 +235,6 @@
   </div>
 </template>
 
-<script lang="ts">
-export default {
-  name: 'LayTable',
-}
-</script>
-
-<script setup lang="ts">
-import tableItemCheckbox from './component/checkbox.vue'
-import {
-  defineProps,
-  ref,
-  useSlots,
-  watch,
-  withDefaults,
-  defineEmits,
-} from 'vue'
-import { Recordable } from '/@src/module/type'
-
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    skin?: string
-    size?: string
-    page?: Recordable
-    checkbox?: boolean
-    columns?: Recordable[]
-    dataSource: Recordable[]
-    defaultToolbar?: boolean
-    selectedKeys?: Array<string>
-  }>(),
-  {
-    id: 'id',
-    dataSource: function () {
-      return []
-    },
-    selectedKeys: function () {
-      return []
-    },
-    size: 'md',
-  }
-)
-
-const emit = defineEmits(['change', 'row', 'row-double', 'update:selectedKeys'])
-
-const slot = useSlots()
-const slots = slot.default && slot.default()
-
-const allChecked = ref(false)
-const tableSelectedKeys = ref([...props.selectedKeys])
-const tableColumns = ref([...props.columns])
-
-const changeAll = function ({ checked, value }: any) {
-  const ids = props.dataSource.map((item: any) => {
-    return item[props.id]
-  })
-  tableSelectedKeys.value.splice(0, ids.length)
-  if (checked) {
-    ids.forEach((id) => {
-      tableSelectedKeys.value.push(id)
-    })
-  }
-  emit('update:selectedKeys', tableSelectedKeys.value)
-}
-
-watch(
-  tableSelectedKeys,
-  function () {
-    if (tableSelectedKeys.value.length === props.dataSource.length) {
-      allChecked.value = true
-    } else {
-      allChecked.value = false
-    }
-    emit('update:selectedKeys', tableSelectedKeys.value)
-  },
-  { deep: true }
-)
-
-const change = function (page: any) {
-  emit('change', page)
-}
-
-const rowClick = function (data: any) {
-  emit('row', data)
-}
-
-const rowDoubleClick = function (data: any) {
-  emit('row-double', data)
-}
-
-const print = function () {
-  let subOutputRankPrint = document.getElementById('lay-table') as HTMLElement
-  let newContent = subOutputRankPrint.innerHTML
-  let oldContent = document.body.innerHTML
-  document.body.innerHTML = newContent
-  window.print()
-  window.location.reload()
-  document.body.innerHTML = oldContent
-}
-</script>
-
 <style scoped>
 .laytable-cell-checkbox {
   width: 34px;

src/module/transfer/component/checkbox.vue

@@ -1,47 +0,0 @@
-<template>
-  <span @click="handleClick">
-    <input type="checkbox" :name="name" :value="label" />
-    <div
-      class="layui-unselect"
-      :class="[
-        {
-          'layui-checkbox-disbaled layui-disabled': disabled,
-        },
-        'layui-form-checkbox',
-        modelValue.includes(label) ? 'layui-form-checked' : '',
-      ]"
-      :lay-skin="skin"
-    >
-      <span><slot /></span>
-      <i class="layui-icon layui-icon-ok" />
-    </div>
-  </span>
-</template>
-
-<script setup name="LayCheckbox" lang="ts">
-import { defineProps, ref } from 'vue'
-
-const props = defineProps<{
-  modelValue: string[]
-  label: string
-  disabled?: boolean
-  name?: string
-  skin?: string
-}>()
-
-const hasValue = ref(false)
-
-const emit = defineEmits(['update:modelValue'])
-
-const handleClick = function () {
-  if (!props.disabled) {
-    if (!props.modelValue.includes(props.label)) {
-      props.modelValue.push(props.label)
-    } else {
-      let index = props.modelValue.indexOf(props.label)
-      props.modelValue.splice(index, 1)
-    }
-    emit('update:modelValue', props.modelValue)
-  }
-}
-</script>

src/module/transfer/index.vue

@@ -4,7 +4,7 @@
       <div class="layui-transfer-box" style="width: 200px; height: 360px">
         <div class="layui-transfer-header">
           <lay-checkbox
-            v-model:checked="allLeftChecked"
+            v-model="allLeftChecked"
             skin="primary"
             label="all"
             @change="allLeftChange"
@@ -14,14 +14,14 @@
         </div>
         <ul class="layui-transfer-data" style="height: 320px">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
-            <transfer-checkbox
+            <lay-checkbox
               v-model="leftSelectedKeys"
               skin="primary"
               :label="dataSource[id]"
             >
               <slot v-if="slot.item" name="item" :data="dataSource" />
               <span v-else>{{ dataSource.title }}</span>
-            </transfer-checkbox>
+            </lay-checkbox>
           </li>
         </ul>
       </div>
@@ -42,7 +42,7 @@
       <div class="layui-transfer-box" style="width: 200px; height: 360px">
         <div class="layui-transfer-header">
           <lay-checkbox
-            v-model:checked="allRightChecked"
+            v-model="allRightChecked"
             skin="primary"
             label="all"
             @change="allRightChange"
@@ -52,131 +52,139 @@
         </div>
         <ul class="layui-transfer-data" style="height: 320px">
           <li v-for="dataSource in rightDataSource" :key="dataSource">
-            <transfer-checkbox
+            <lay-checkbox
               v-model="rightSelectedKeys"
               skin="primary"
               :label="dataSource[id]"
             >
               <slot v-if="slot.item" name="item" :data="dataSource" />
               <span v-else>{{ dataSource.title }}</span>
-            </transfer-checkbox>
+            </lay-checkbox>
           </li>
         </ul>
       </div>
     </div>
   </div>
 </template>
-<script setup name="LayTransfer"></script>
+<script lang="ts">
+export default {
+  name: "LayTransfer",
+};
+</script>
 <script setup lang="ts">
-import { computed, defineProps, Ref, ref, useSlots, watch } from 'vue'
+import { defineProps, Ref, ref, useSlots, watch } from "vue";
-import { Recordable } from '/@src/module/type'
+import { Recordable } from "../type";
-import transferCheckbox from './component/checkbox.vue'
 
-const slot = useSlots()
+const slot = useSlots();
 
 const props = withDefaults(
   defineProps<{
-    id?: string
+    id?: string;
-    title?: string[]
+    title?: string[];
-    dataSource: Recordable[]
+    dataSource: Recordable[];
   }>(),
   {
-    id: 'id',
+    id: "id",
     title: function () {
-      return ['主列表', '副列表']
+      return ["主列表", "副列表"];
     },
     dataSource: function () {
-      return []
+      return [];
     },
     selectedKeys: function () {
-      return []
+      return [];
     },
   }
-)
+);
 
-const leftDataSource: Ref<any[]> = ref([...props.dataSource])
+const leftDataSource: Ref<any[]> = ref([...props.dataSource]);
-const rightDataSource: Ref<any[]> = ref([])
+const rightDataSource: Ref<any[]> = ref([]);
 
-const leftSelectedKeys: Ref<string[]> = ref([])
+const leftSelectedKeys: Ref<string[]> = ref([]);
-const rightSelectedKeys: Ref<string[]> = ref([])
+const rightSelectedKeys: Ref<string[]> = ref([]);
 
-const allLeftChecked = ref(false)
+const allLeftChecked = ref(false);
-const allRightChecked = ref(false)
+const allRightChecked = ref(false);
 
-const allLeftChange = function ({ checked }: any) {
+const allLeftChange = function (checked: any) {
   if (checked) {
     const ids = leftDataSource.value.map((item: any) => {
-      return item[props.id]
+      return item[props.id];
-    })
+    });
-    leftSelectedKeys.value = ids
+    leftSelectedKeys.value = ids;
   } else {
-    leftSelectedKeys.value = []
+    leftSelectedKeys.value = [];
-  }
   }
+};
 
 watch(
   leftSelectedKeys,
   function () {
-    if (leftDataSource.value.length === leftSelectedKeys.value.length && leftDataSource.value.length != 0) {
+    if (
-      allLeftChecked.value = true
+      leftDataSource.value.length === leftSelectedKeys.value.length &&
+      leftDataSource.value.length != 0
+    ) {
+      allLeftChecked.value = true;
     } else {
-      allLeftChecked.value = false
+      allLeftChecked.value = false;
     }
   },
   { deep: true }
-)
+);
 
-const allRightChange = function ({ checked }: any) {
+const allRightChange = function (checked: any) {
   if (checked) {
     const ids = rightDataSource.value.map((item: any) => {
-      return item[props.id]
+      return item[props.id];
-    })
+    });
-    rightSelectedKeys.value = ids
+    rightSelectedKeys.value = ids;
   } else {
-    rightSelectedKeys.value = []
+    rightSelectedKeys.value = [];
-  }
   }
+};
 
 watch(
   rightSelectedKeys,
   function () {
-    if (rightDataSource.value.length === rightSelectedKeys.value.length && rightDataSource.value.length != 0) {
+    if (
-      allRightChecked.value = true
+      rightDataSource.value.length === rightSelectedKeys.value.length &&
+      rightDataSource.value.length != 0
+    ) {
+      allRightChecked.value = true;
     } else {
-      allRightChecked.value = false
+      allRightChecked.value = false;
     }
   },
   { deep: true }
-)
+);
 
 const add = function () {
-
   if (leftSelectedKeys.value.length === 0) {
-    return
+    return;
   }
-  leftDataSource.value.forEach(item => {
+  leftDataSource.value.forEach((item) => {
     if (leftSelectedKeys.value.indexOf(item.id) != -1) {
-      rightDataSource.value.push(item)
+      rightDataSource.value.push(item);
     }
-  })
+  });
   leftDataSource.value = leftDataSource.value.filter(
     (item) => leftSelectedKeys.value.indexOf(item.id) === -1
-  ) 
+  );
-  leftSelectedKeys.value = []
+  leftSelectedKeys.value = [];
-}
+};
 
 const remove = function () {
   if (rightSelectedKeys.value.length === 0) {
-    return
+    return;
   }
-  rightDataSource.value.forEach(item => {
+  rightDataSource.value.forEach((item) => {
     if (rightSelectedKeys.value.indexOf(item.id) != -1) {
-      leftDataSource.value.push(item)
+      leftDataSource.value.push(item);
     }
-  })
+  });
   rightDataSource.value = rightDataSource.value.filter(
     (item) => rightSelectedKeys.value.indexOf(item.id) === -1
-  ) 
+  );
-  rightSelectedKeys.value = []
+  rightSelectedKeys.value = [];
-}
+};
 </script>