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

✨(component): 穿梭框选中效果加入半选状态

Browse Source
This commit is contained in:
就眠儀式 2022-06-30 23:46:23 +08:00
parent 2664e941fe
commit f4ed5b4d9b
1 changed files with 31 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
package/component/src/component/transfer/index.vue
View File

@ -38,17 +38,16 @@ const props = withDefaults(defineProps<LayTransferProps>(), {
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 allLeftChecked = ref(false);
const allRightChecked = ref(false);
const hasLeftChecked = ref(false);
const hasRightChecked = ref(false);
const allLeftChange = function (checked: any) {
const allLeftChange = (checked: any) => {
if (checked) {
const ids = leftDataSource.value.map((item: any) => {
return item[props.id];
@ -70,11 +69,18 @@ watch(
} else {
allLeftChecked.value = false;
}
if (
leftSelectedKeys.value.length > 0 && leftDataSource.value.length != 0
) {
hasLeftChecked.value = true;
} else {
hasLeftChecked.value = false;
}
},
{ deep: true }
);
const allRightChange = function (checked: any) {
const allRightChange = (checked: any) => {
if (checked) {
const ids = rightDataSource.value.map((item: any) => {
return item[props.id];
@ -90,17 +96,24 @@ watch(
() => {
if (
rightDataSource.value.length === rightSelectedKeys.value.length &&
rightDataSource.value.length != 0
rightDataSource.value.length > 0
) {
allRightChecked.value = true;
} else {
allRightChecked.value = false;
}
if (
rightSelectedKeys.value.length > 0 && rightDataSource.value.length != 0
) {
hasRightChecked.value = true;
} else {
hasRightChecked.value = false;
}
},
{ deep: true }
);
const add = function () {
const add = () => {
if (leftSelectedKeys.value.length === 0) {
return;
}
@ -123,7 +136,7 @@ const add = function () {
leftSelectedKeys.value = [];
};
const remove = function () {
const remove = () => {
if (rightSelectedKeys.value.length === 0) {
return;
}
@ -187,29 +200,16 @@ 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="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,44 +217,23 @@ const dataStyle = computed(() => {
</ul>
</div>
<div class="layui-transfer-active">
<LayButton
type="primary"
:disabled="leftSelectedKeys.length == 0"
@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>
<LayButton type="primary" :disabled="leftSelectedKeys.length == 0" @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="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>