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

♻️: 使用 flex 重构 transfer 布局

Browse Source
This commit is contained in:
就眠儀式 2022-07-01 00:56:05 +08:00
parent f2d6c4b8e8
commit 1ef6e5c865
2 changed files with 42 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,10 @@
--transfer-box-border-radius: var(--global-border-radius);
}
.layui-transfer {
display: flex;
}
.layui-transfer .layui-btn + .layui-btn {
margin-left: 0;
}
@ -22,6 +26,8 @@
border-width: 1px;
width: 200px;
height: 360px;
display: flex;
flex-direction: column;
border-radius: var(--transfer-box-border-radius);
background-color: #fff;
}
@ -36,12 +42,14 @@
line-height: 38px;
padding: 0 10px;
border-bottom-width: 1px;
flex: 0;
}
.layui-transfer-search {
position: relative;
padding: 10px;
border-bottom-width: 1px;
flex: 0;
}
.layui-transfer-search .layui-input {
@ -86,6 +94,7 @@
.layui-transfer-data {
padding: 5px 0;
overflow: auto;
flex: 1;
}
.layui-transfer-data li {
@ -105,8 +114,14 @@
color: #999;
}
.layui-transfer-active,
.layui-transfer-box {
display: inline-block;
vertical-align: middle;
.layui-transfer-active {
display: flex;
align-items: center;
justify-items: center;
}
.layui-transfer-footer {
flex: 0;
height: 48px;
line-height: 48px;
}

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

@ -186,12 +186,6 @@ const boxStyle = computed(() => {
height: props.height,
};
});
const dataStyle = computed(() => {
return {
height: props.showSearch ? "calc(100% - 97px)" : "calc(100% - 38px)",
};
});
</script>
<template>
@ -199,81 +193,55 @@ 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">
<ul class="layui-transfer-data">
<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>
</li>
</ul>
<div class="layui-transfer-footer">
底部
</div>
</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>
<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>
</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" :style="dataStyle">
<ul class="layui-transfer-data">
<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>
</li>
</ul>
<div class="layui-transfer-footer">
底部
</div>
</div>
</div>
</div>