feat(transfer): 初步集成 tansfer 组件
This commit is contained in:
就眠仪式
parent
1675a4f06a
commit
147a55e038
@ -1,5 +1,3 @@
|
||||
layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码，你可以前往示例页面：
|
||||
|
||||
```html
|
||||
<lay-layout>
|
||||
<lay-header>
|
||||
|
||||
19
docs/docs/zh-CN/components/transfer.md
Normal file
19
docs/docs/zh-CN/components/transfer.md
Normal file
@ -0,0 +1,19 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-transfer><div style="padding: 30px;">面板</div></lay-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
@ -266,6 +266,12 @@ export default {
|
||||
subTitle: 'tree',
|
||||
path: '/zh-CN/components/tree',
|
||||
},
|
||||
{
|
||||
id: 31,
|
||||
title: '穿梭框',
|
||||
subTitle: 'tree',
|
||||
path: '/zh-CN/components/transfer',
|
||||
},
|
||||
]
|
||||
|
||||
const selected = ref(1)
|
||||
|
||||
@ -157,6 +157,11 @@ const zhCN = [
|
||||
path: '/zh-CN/components/page',
|
||||
component: () => import('../../docs/zh-CN/components/page.md'),
|
||||
meta: { title: '分页' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/transfer',
|
||||
component: () => import('../../docs/zh-CN/components/transfer.md'),
|
||||
meta: { title: '穿梭框' },
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
@ -52,6 +52,7 @@ import LayTabItem from './module/tabItem/index'
|
||||
import LayTree from './module/tree/index'
|
||||
import LayTable from './module/table/index'
|
||||
import LayPage from './module/page/index'
|
||||
import LayTransfer from './module/transfer/index'
|
||||
|
||||
const components: Record<string, IDefineComponent> = {
|
||||
LayRadio,
|
||||
@ -103,7 +104,8 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayIconPicker,
|
||||
LayTree,
|
||||
LayTable,
|
||||
LayPage
|
||||
LayPage,
|
||||
LayTransfer
|
||||
}
|
||||
|
||||
const install = (app: App, options?: InstallOptions): void => {
|
||||
@ -169,6 +171,7 @@ export {
|
||||
LayTree,
|
||||
LayTable,
|
||||
LayPage,
|
||||
LayTransfer,
|
||||
install,
|
||||
}
|
||||
|
||||
|
||||
9
src/module/transfer/index.ts
Normal file
9
src/module/transfer/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import type { App } from 'vue'
|
||||
import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayTransfer', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
291
src/module/transfer/index.vue
Normal file
291
src/module/transfer/index.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="layui-transfer layui-form layui-border-box"
|
||||
>
|
||||
<div
|
||||
class="layui-transfer-box"
|
||||
style="width: 200px; height: 360px"
|
||||
>
|
||||
<div class="layui-transfer-header">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="layTransferLeftCheckAll"
|
||||
lay-filter="layTransferCheckbox"
|
||||
lay-type="all"
|
||||
lay-skin="primary"
|
||||
title="列表一"
|
||||
/>
|
||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
||||
<span>列表一</span><i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="layui-transfer-data" style="height: 320px">
|
||||
<li>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="layTransferLeftCheck"
|
||||
lay-skin="primary"
|
||||
lay-filter="layTransferCheckbox"
|
||||
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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="layui-transfer-active">
|
||||
<button
|
||||
type="button"
|
||||
class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled"
|
||||
data-index="0"
|
||||
>
|
||||
<i class="layui-icon layui-icon-next"></i></button
|
||||
><button
|
||||
type="button"
|
||||
class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled"
|
||||
data-index="1"
|
||||
>
|
||||
<i class="layui-icon layui-icon-prev"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="layui-transfer-box"
|
||||
style="width: 200px; height: 360px"
|
||||
>
|
||||
<div class="layui-transfer-header">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="layTransferRightCheckAll"
|
||||
lay-filter="layTransferCheckbox"
|
||||
lay-type="all"
|
||||
lay-skin="primary"
|
||||
title="列表二"
|
||||
/>
|
||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
||||
<span>列表二</span><i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="layui-transfer-data" style="height: 320px">
|
||||
<li>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="layTransferRightCheck"
|
||||
lay-skin="primary"
|
||||
lay-filter="layTransferCheckbox"
|
||||
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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="LayTransfer"></script>
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props = defineProps<{}>()
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user