feat(transfer): 初步集成 transfer 组件
This commit is contained in:
就眠仪式
parent
e99e34dd65
commit
e2e538165b
@ -1,7 +1,7 @@
|
|||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-transfer><div style="padding: 30px;">面板</div></lay-transfer>
|
<lay-transfer :dataSource="dataSource"></lay-transfer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -10,7 +10,10 @@ import { ref } from 'vue'
|
|||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
|
const dataSource = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
dataSource
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,160 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div class="layui-transfer layui-form layui-border-box">
|
||||||
class="layui-transfer layui-form layui-border-box"
|
<div class="layui-transfer-box" style="width: 200px; height: 360px">
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="layui-transfer-box"
|
|
||||||
style="width: 200px; height: 360px"
|
|
||||||
>
|
|
||||||
<div class="layui-transfer-header">
|
<div class="layui-transfer-header">
|
||||||
<input
|
<lay-checkbox
|
||||||
type="checkbox"
|
skin="primary"
|
||||||
name="layTransferLeftCheckAll"
|
label="all"
|
||||||
lay-filter="layTransferCheckbox"
|
v-model="allLeftSelectedKeys"
|
||||||
lay-type="all"
|
>
|
||||||
lay-skin="primary"
|
<span>列表一</span>
|
||||||
title="列表一"
|
</lay-checkbox>
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>列表一</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<ul class="layui-transfer-data" style="height: 320px">
|
<ul class="layui-transfer-data" style="height: 320px">
|
||||||
<li>
|
<li v-for="dataSource in leftDataSource" :key="dataSource">
|
||||||
<input
|
<lay-checkbox
|
||||||
type="checkbox"
|
v-model="leftSelectedKeys"
|
||||||
name="layTransferLeftCheck"
|
skin="primary"
|
||||||
lay-skin="primary"
|
:label="dataSource[id]"
|
||||||
lay-filter="layTransferCheckbox"
|
><span>{{ dataSource.title }}</span></lay-checkbox
|
||||||
title="油酥饼"
|
|
||||||
value="2"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>油酥饼</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferLeftCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="串串香"
|
|
||||||
disabled=""
|
|
||||||
value="4"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="
|
|
||||||
layui-unselect
|
|
||||||
layui-form-checkbox
|
|
||||||
layui-checkbox-disabled
|
|
||||||
layui-disabled
|
|
||||||
"
|
|
||||||
lay-skin="primary"
|
|
||||||
>
|
>
|
||||||
<span>串串香</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferLeftCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="驴打滚"
|
|
||||||
value="6"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>驴打滚</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferLeftCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="烤冷面"
|
|
||||||
value="8"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>烤冷面</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferLeftCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="肉夹馍"
|
|
||||||
value="10"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>肉夹馍</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferLeftCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="凉皮"
|
|
||||||
value="12"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>凉皮</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferLeftCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="羊肉泡馍"
|
|
||||||
value="13"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>羊肉泡馍</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferLeftCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="冰糖葫芦"
|
|
||||||
disabled=""
|
|
||||||
value="14"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="
|
|
||||||
layui-unselect
|
|
||||||
layui-form-checkbox
|
|
||||||
layui-checkbox-disabled
|
|
||||||
layui-disabled
|
|
||||||
"
|
|
||||||
lay-skin="primary"
|
|
||||||
>
|
|
||||||
<span>冰糖葫芦</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferLeftCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="狼牙土豆"
|
|
||||||
value="15"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>狼牙土豆</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -173,110 +37,24 @@
|
|||||||
<i class="layui-icon layui-icon-prev"></i>
|
<i class="layui-icon layui-icon-prev"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="layui-transfer-box" style="width: 200px; height: 360px">
|
||||||
class="layui-transfer-box"
|
|
||||||
style="width: 200px; height: 360px"
|
|
||||||
>
|
|
||||||
<div class="layui-transfer-header">
|
<div class="layui-transfer-header">
|
||||||
<input
|
<lay-checkbox
|
||||||
type="checkbox"
|
skin="primary"
|
||||||
name="layTransferRightCheckAll"
|
label="all"
|
||||||
lay-filter="layTransferCheckbox"
|
v-model="allRightSelectedKeys"
|
||||||
lay-type="all"
|
>
|
||||||
lay-skin="primary"
|
<span>列表二</span>
|
||||||
title="列表二"
|
</lay-checkbox>
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>列表二</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<ul class="layui-transfer-data" style="height: 320px">
|
<ul class="layui-transfer-data" style="height: 320px">
|
||||||
<li>
|
<li v-for="dataSource in rightDataSource" :key="dataSource">
|
||||||
<input
|
<lay-checkbox
|
||||||
type="checkbox"
|
v-model="rightSelectedKeys"
|
||||||
name="layTransferRightCheck"
|
skin="primary"
|
||||||
lay-skin="primary"
|
:label="dataSource[id]"
|
||||||
lay-filter="layTransferCheckbox"
|
><span>{{ dataSource.title }}</span></lay-checkbox
|
||||||
title="瓦罐汤"
|
|
||||||
value="1"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>瓦罐汤</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferRightCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="炸酱面"
|
|
||||||
value="3"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>炸酱面</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferRightCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="豆腐脑"
|
|
||||||
value="5"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>豆腐脑</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferRightCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="北京烤鸭"
|
|
||||||
value="7"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>北京烤鸭</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferRightCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="毛血旺"
|
|
||||||
disabled=""
|
|
||||||
value="9"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="
|
|
||||||
layui-unselect
|
|
||||||
layui-form-checkbox
|
|
||||||
layui-checkbox-disabled
|
|
||||||
layui-disabled
|
|
||||||
"
|
|
||||||
lay-skin="primary"
|
|
||||||
>
|
>
|
||||||
<span>毛血旺</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="layTransferRightCheck"
|
|
||||||
lay-skin="primary"
|
|
||||||
lay-filter="layTransferCheckbox"
|
|
||||||
title="臊子面"
|
|
||||||
value="11"
|
|
||||||
/>
|
|
||||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
|
||||||
<span>臊子面</span><i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -285,7 +63,31 @@
|
|||||||
</template>
|
</template>
|
||||||
<script setup name="LayTransfer"></script>
|
<script setup name="LayTransfer"></script>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps, ref } from 'vue'
|
||||||
|
|
||||||
const props = defineProps<{}>()
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
id?: string
|
||||||
|
dataSource: Object[]
|
||||||
|
selectedKeys: Array<String>
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
id: 'id',
|
||||||
|
dataSource: function () {
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
selectedKeys: function () {
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const leftDataSource = ref([...props.dataSource])
|
||||||
|
const rightDataSource = ref([])
|
||||||
|
|
||||||
|
const leftSelectedKeys = ref([])
|
||||||
|
const rightSelectedKeys = ref([])
|
||||||
|
|
||||||
|
const allLeftSelectedKeys = ref([])
|
||||||
|
const allRightSelectedKeys = ref([])
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user