feat(transfer): 初步集成 tansfer 组件
This commit is contained in:
就眠仪式
parent
1675a4f06a
commit
147a55e038
@ -1,5 +1,3 @@
|
|||||||
layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码，你可以前往示例页面：
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<lay-layout>
|
<lay-layout>
|
||||||
<lay-header>
|
<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',
|
subTitle: 'tree',
|
||||||
path: '/zh-CN/components/tree',
|
path: '/zh-CN/components/tree',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 31,
|
||||||
|
title: '穿梭框',
|
||||||
|
subTitle: 'tree',
|
||||||
|
path: '/zh-CN/components/transfer',
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const selected = ref(1)
|
const selected = ref(1)
|
||||||
|
|||||||
@ -157,6 +157,11 @@ const zhCN = [
|
|||||||
path: '/zh-CN/components/page',
|
path: '/zh-CN/components/page',
|
||||||
component: () => import('../../docs/zh-CN/components/page.md'),
|
component: () => import('../../docs/zh-CN/components/page.md'),
|
||||||
meta: { title: '分页' },
|
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 LayTree from './module/tree/index'
|
||||||
import LayTable from './module/table/index'
|
import LayTable from './module/table/index'
|
||||||
import LayPage from './module/page/index'
|
import LayPage from './module/page/index'
|
||||||
|
import LayTransfer from './module/transfer/index'
|
||||||
|
|
||||||
const components: Record<string, IDefineComponent> = {
|
const components: Record<string, IDefineComponent> = {
|
||||||
LayRadio,
|
LayRadio,
|
||||||
@ -103,7 +104,8 @@ const components: Record<string, IDefineComponent> = {
|
|||||||
LayIconPicker,
|
LayIconPicker,
|
||||||
LayTree,
|
LayTree,
|
||||||
LayTable,
|
LayTable,
|
||||||
LayPage
|
LayPage,
|
||||||
|
LayTransfer
|
||||||
}
|
}
|
||||||
|
|
||||||
const install = (app: App, options?: InstallOptions): void => {
|
const install = (app: App, options?: InstallOptions): void => {
|
||||||
@ -169,6 +171,7 @@ export {
|
|||||||
LayTree,
|
LayTree,
|
||||||
LayTable,
|
LayTable,
|
||||||
LayPage,
|
LayPage,
|
||||||
|
LayTransfer,
|
||||||
install,
|
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