theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
就眠儀式 2021-11-19 01:57:13 +08:00
parent 5c0055719a
commit 88c38dddf0
5 changed files with 211 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs/zh-CN/guide/changelog.md
View File

@ -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">

43
src/module/checkbox/index.vue
View File

@ -11,13 +11,14 @@ import "./index.less";
export interface LayCheckboxProps {
name?: string;
skin?: string;
label?: string;
modelValue?: boolean;
label: string;
modelValue: boolean | Array<string>;
disabled?: boolean;
}
const props = withDefaults(defineProps<LayCheckboxProps>(), {
modelValue: false,
disabled: false,
});
const checkboxGroup: any = inject("checkboxGroup", {});
@ -35,19 +36,36 @@ const isChecked = computed({
if (isGroup.value) {
return checkboxGroup.modelValue.value.includes(props.label);
} else {
return props.modelValue;
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);
}
}
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;

205
src/module/table/index.vue
View File

@ -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;

47
src/module/transfer/component/checkbox.vue
View File

@ -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>

136
src/module/transfer/index.vue
View File

@ -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 { Recordable } from '/@src/module/type'
import transferCheckbox from './component/checkbox.vue'
import { defineProps, Ref, ref, useSlots, watch } from "vue";
import { Recordable } from "../type";
const slot = useSlots()
const slot = useSlots();
const props = withDefaults(
defineProps<{
id?: string
title?: string[]
dataSource: Recordable[]
id?: string;
title?: string[];
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 rightDataSource: Ref<any[]> = ref([])
const leftDataSource: Ref<any[]> = ref([...props.dataSource]);
const rightDataSource: Ref<any[]> = ref([]);
const leftSelectedKeys: Ref<string[]> = ref([])
const rightSelectedKeys: Ref<string[]> = ref([])
const leftSelectedKeys: Ref<string[]> = ref([]);
const rightSelectedKeys: Ref<string[]> = ref([]);
const allLeftChecked = ref(false)
const allRightChecked = ref(false)
const allLeftChecked = 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]
})
leftSelectedKeys.value = ids
return item[props.id];
});
leftSelectedKeys.value = ids;
} else {
leftSelectedKeys.value = []
leftSelectedKeys.value = [];
}
}
};
watch(
leftSelectedKeys,
function () {
if (leftDataSource.value.length === leftSelectedKeys.value.length && leftDataSource.value.length != 0) {
allLeftChecked.value = true
if (
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]
})
rightSelectedKeys.value = ids
return item[props.id];
});
rightSelectedKeys.value = ids;
} else {
rightSelectedKeys.value = []
rightSelectedKeys.value = [];
}
}
};
watch(
rightSelectedKeys,
function () {
if (rightDataSource.value.length === rightSelectedKeys.value.length && rightDataSource.value.length != 0) {
allRightChecked.value = true
if (
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
if (leftSelectedKeys.value.length === 0) {
return;
}
leftDataSource.value.forEach(item => {
if( leftSelectedKeys.value.indexOf(item.id) != -1 ){
rightDataSource.value.push(item)
leftDataSource.value.forEach((item) => {
if (leftSelectedKeys.value.indexOf(item.id) != -1) {
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
if (rightSelectedKeys.value.length === 0) {
return;
}
rightDataSource.value.forEach(item => {
if( rightSelectedKeys.value.indexOf(item.id) != -1 ){
leftDataSource.value.push(item)
rightDataSource.value.forEach((item) => {
if (rightSelectedKeys.value.indexOf(item.id) != -1) {
leftDataSource.value.push(item);
}
})
});
rightDataSource.value = rightDataSource.value.filter(
(item) => rightSelectedKeys.value.indexOf(item.id) === -1
)
rightSelectedKeys.value = []
}
);
rightSelectedKeys.value = [];
};
</script>