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

✨(transfer): 新增 leftFooter 与 rightFooter 底部插槽

Browse Source
This commit is contained in:
就眠儀式
2022-07-01 01:18:27 +08:00
parent 1ef6e5c865
commit c169ffc7e3
4 changed files with 114 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package/component/src/component/transfer/index.less
View File

@@ -124,4 +124,5 @@
flex: 0;
height: 48px;
line-height: 48px;
padding: 0 10px;
}

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

@@ -12,7 +12,6 @@ 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";
export interface LayTransferProps {
id?: string;
@@ -24,7 +23,7 @@ export interface LayTransferProps {
selectedKeys?: Recordable[];
}
const slot = useSlots();
const slots = useSlots();
const props = withDefaults(defineProps<LayTransferProps>(), {
id: "id",
@@ -193,56 +192,90 @@ const boxStyle = 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">
<li v-for="dataSource in leftDataSource" :key="dataSource">
<LayCheckbox v-model="leftSelectedKeys" skin="primary" :label="dataSource[id]">
<slot v-if="slot.item" name="item" :data="dataSource"></slot>
<LayCheckbox
v-model="leftSelectedKeys"
skin="primary"
:label="dataSource[id]"
>
<slot v-if="slots.item" name="item" :data="dataSource"></slot>
<span v-else>{{ dataSource.title }}</span>
</LayCheckbox>
</li>
</ul>
<div class="layui-transfer-footer">
底部
<div class="layui-transfer-footer" v-if="slots.leftFooter">
<slot name="leftFooter"></slot>
</div>
</div>
<div class="layui-transfer-active">
<div class="layui-transfer-button-group">
<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>
<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">
<li v-for="dataSource in rightDataSource" :key="dataSource">
<LayCheckbox v-model="rightSelectedKeys" skin="primary" :label="dataSource[id]">
<slot v-if="slot.item" name="item" :data="dataSource"></slot>
<LayCheckbox
v-model="rightSelectedKeys"
skin="primary"
:label="dataSource[id]"
>
<slot v-if="slots.item" name="item" :data="dataSource"></slot>
<span v-else>{{ dataSource.title }}</span>
</LayCheckbox>
</li>
</ul>
<div class="layui-transfer-footer">
底部
<div class="layui-transfer-footer" v-if="slots.rightFooter">
<slot name="rightFooter"></slot>
</div>
</div>
</div>
</div>
</template>
</template>