feat(tree): add tree component and wip workspace
This commit is contained in:
落小梅
9
src/module/tree/index.ts
Normal file
9
src/module/tree/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 || 'LayTree', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
287
src/module/tree/index.vue
Normal file
287
src/module/tree/index.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<script setup lang="ts">
|
||||
import { VNode, VNodeChild } from 'vue'
|
||||
|
||||
interface TreeData {
|
||||
/**
|
||||
* 节点唯一索引值，用于对指定节点进行各类操作
|
||||
*/
|
||||
id: string | number
|
||||
/**
|
||||
* 节点标题
|
||||
*/
|
||||
title: string | (() => string)
|
||||
/**
|
||||
* 节点字段名
|
||||
*/
|
||||
field: string | (() => string)
|
||||
/**
|
||||
* 子节点。支持设定选项同父节点
|
||||
*/
|
||||
children: TreeData[]
|
||||
/**
|
||||
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
||||
*/
|
||||
href: string | URL
|
||||
/**
|
||||
* 节点是否初始展开，默认 false
|
||||
*/
|
||||
spread: boolean
|
||||
/**
|
||||
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
||||
*/
|
||||
checked: boolean
|
||||
/**
|
||||
* 节点是否为禁用状态。默认 false
|
||||
*/
|
||||
disabled: boolean
|
||||
}
|
||||
|
||||
type EditAction = 'add' | 'update' | 'del'
|
||||
|
||||
type EditType = boolean | EditAction[]
|
||||
|
||||
interface TreeProps {
|
||||
/**
|
||||
* 数据源
|
||||
*/
|
||||
data?: TreeData
|
||||
/**
|
||||
* 是否显示复选框 默认 false
|
||||
*/
|
||||
showCheckbox?: boolean
|
||||
/**
|
||||
* 是否开启节点的操作图标。默认 false。
|
||||
若为 true，则默认显示“改删”图标
|
||||
若为 数组，则可自由配置操作图标的显示状态和顺序，目前支持的操作图标有：add、update、del，如：
|
||||
edit: ['add', 'update', 'del']
|
||||
*/
|
||||
edit?: EditType
|
||||
/**
|
||||
* 是否开启手风琴模式，默认 false
|
||||
*/
|
||||
accordion?: boolean
|
||||
/**
|
||||
* 是否仅允许节点左侧图标控制展开收缩。默认 false（即点击节点本身也可控制）。若为 true，则只能通过节点左侧图标来展开收缩
|
||||
*/
|
||||
onlyIconControl?: boolean
|
||||
/**
|
||||
* 是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式
|
||||
*/
|
||||
isJump?: boolean
|
||||
/**
|
||||
* 是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。
|
||||
*/
|
||||
showLine?: boolean
|
||||
/**
|
||||
* 自定义各类默认文本，目前支持以下设定：
|
||||
*/
|
||||
text?: {
|
||||
/**
|
||||
* 节点默认名称
|
||||
*/
|
||||
defaultNodeName?: () => string | string
|
||||
/**
|
||||
* 数据为空时的提示文本
|
||||
*/
|
||||
none?: () => string | string | VNode | Element
|
||||
}
|
||||
}
|
||||
|
||||
interface TreeNode {
|
||||
/**
|
||||
* 当前点击的节点数据
|
||||
*/
|
||||
data: TreeData
|
||||
/**
|
||||
* 节点的展开状态
|
||||
*/
|
||||
state: 'open' | 'close' | 'normal'
|
||||
/**
|
||||
* 当前节点元素
|
||||
*/
|
||||
elem: Element | VNode | VNodeChild
|
||||
}
|
||||
|
||||
interface TreeEmits {
|
||||
/**
|
||||
* 节点被点击后触发
|
||||
* @param e 事件
|
||||
* @param treeNode
|
||||
*/
|
||||
(e: 'on-click', treeNode: TreeNode): void
|
||||
/**
|
||||
* 点击复选框时触发
|
||||
* @param e 事件
|
||||
* @param treeNode
|
||||
*/
|
||||
(e: 'on-check', treeNode: TreeNode): void
|
||||
/**
|
||||
* 操作节点的回调
|
||||
* @param e 事件
|
||||
* @param treeNode
|
||||
*/
|
||||
(e: 'on-operate', treeNode: TreeNode): void
|
||||
}
|
||||
|
||||
|
||||
const props = withDefaults(defineProps<TreeProps>(), {
|
||||
showCheckbox: false,
|
||||
accordion: false,
|
||||
onlyIconControl: false,
|
||||
isJump: false,
|
||||
showLine: true,
|
||||
edit: true,
|
||||
})
|
||||
|
||||
console.log(props)
|
||||
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'LayTree',
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div id="test1" class="demo-tree demo-tree-box">
|
||||
<div class="layui-tree layui-tree-line" lay-filter="LAY-tree-2">
|
||||
<div
|
||||
data-id="1"
|
||||
class="layui-tree-set layui-tree-setHide layui-tree-spread"
|
||||
>
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick layui-tree-icon"
|
||||
><i class="layui-icon layui-icon-subtraction"></i></span
|
||||
><span class="layui-tree-txt">江西</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
||||
style="display: block"
|
||||
>
|
||||
<div data-id="1000" class="layui-tree-set layui-tree-spread">
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick layui-tree-icon"
|
||||
><i class="layui-icon layui-icon-subtraction"></i></span
|
||||
><span class="layui-tree-txt">南昌</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
||||
style="display: block"
|
||||
>
|
||||
<div data-id="10001" class="layui-tree-set">
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick"
|
||||
><i class="layui-icon layui-icon-file"></i></span
|
||||
><span class="layui-tree-txt">青山湖区</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-id="10002"
|
||||
class="layui-tree-set layui-tree-setLineShort"
|
||||
>
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick"
|
||||
><i class="layui-icon layui-icon-file"></i></span
|
||||
><span class="layui-tree-txt">高新区</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-id="1001" class="layui-tree-set">
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick"
|
||||
><i class="layui-icon layui-icon-file"></i></span
|
||||
><span class="layui-tree-txt">九江</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-id="1002" class="layui-tree-set">
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick"
|
||||
><i class="layui-icon layui-icon-file"></i></span
|
||||
><span class="layui-tree-txt">赣州</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-id="2"
|
||||
class="layui-tree-set layui-tree-setHide layui-tree-spread"
|
||||
>
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick layui-tree-icon"
|
||||
><i class="layui-icon layui-icon-subtraction"></i></span
|
||||
><span class="layui-tree-txt">广西</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
||||
style="display: block"
|
||||
>
|
||||
<div data-id="2000" class="layui-tree-set">
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick"
|
||||
><i class="layui-icon layui-icon-file"></i></span
|
||||
><span class="layui-tree-txt">南宁</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-id="2001" class="layui-tree-set">
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick"
|
||||
><i class="layui-icon layui-icon-file"></i></span
|
||||
><span class="layui-tree-txt">桂林</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-id="3"
|
||||
class="layui-tree-set layui-tree-setHide layui-tree-setLineShort"
|
||||
>
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick layui-tree-icon"
|
||||
><i class="layui-icon layui-icon-addition"></i></span
|
||||
><span class="layui-tree-txt">陕西</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-tree-pack layui-tree-lineExtend">
|
||||
<div data-id="3000" class="layui-tree-set">
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick"
|
||||
><i class="layui-icon layui-icon-file"></i></span
|
||||
><span class="layui-tree-txt">西安</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-id="3001" class="layui-tree-set layui-tree-setLineShort">
|
||||
<div class="layui-tree-entry">
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick"
|
||||
><i class="layui-icon layui-icon-file"></i></span
|
||||
><span class="layui-tree-txt">延安</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
14
src/module/tree/props.ts
Normal file
14
src/module/tree/props.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { TreeEmits, TreeProps } from '/@src/module/tree/type'
|
||||
|
||||
export const treeProps = withDefaults(defineProps<TreeProps>(), {
|
||||
showCheckbox: false,
|
||||
accordion: false,
|
||||
onlyIconControl: false,
|
||||
isJump: false,
|
||||
showLine: true,
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
edit: true
|
||||
})
|
||||
|
||||
export const emit = defineEmits<TreeEmits>()
|
||||
140
src/module/tree/type.ts
Normal file
140
src/module/tree/type.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
/**
|
||||
* defineProps 暂不支付外部导入的复杂类型，这里备用后续迁移。
|
||||
* 暂时 在index.vue内部单独实现一份
|
||||
*/
|
||||
import { VNode, VNodeChild } from 'vue'
|
||||
|
||||
export interface TreeData {
|
||||
/**
|
||||
* 节点唯一索引值，用于对指定节点进行各类操作
|
||||
*/
|
||||
id: () => (string | number) | string | number
|
||||
/**
|
||||
* 节点标题
|
||||
*/
|
||||
title: (() => string) | string
|
||||
/**
|
||||
* 节点字段名
|
||||
*/
|
||||
field: (() => string) | string
|
||||
/**
|
||||
* 子节点。支持设定选项同父节点
|
||||
*/
|
||||
children: TreeData[]
|
||||
/**
|
||||
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
||||
*/
|
||||
href: string | URL
|
||||
/**
|
||||
* 节点是否初始展开，默认 false
|
||||
*/
|
||||
spread: boolean
|
||||
/**
|
||||
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
||||
*/
|
||||
checked: boolean
|
||||
/**
|
||||
* 节点是否为禁用状态。默认 false
|
||||
*/
|
||||
disabled: boolean
|
||||
}
|
||||
|
||||
type EditAction = 'add' | 'update' | 'del'
|
||||
|
||||
type EditType = boolean | EditAction[]
|
||||
|
||||
export interface TreeProps {
|
||||
/**
|
||||
* 数据源
|
||||
*/
|
||||
data?: TreeData
|
||||
/**
|
||||
* 是否显示复选框 默认 false
|
||||
*/
|
||||
showCheckbox?: boolean
|
||||
/**
|
||||
* 是否开启节点的操作图标。默认 false。
|
||||
若为 true，则默认显示“改删”图标
|
||||
若为 数组，则可自由配置操作图标的显示状态和顺序，目前支持的操作图标有：add、update、del，如：
|
||||
edit: ['add', 'update', 'del']
|
||||
*/
|
||||
edit?: EditType
|
||||
/**
|
||||
* 是否开启手风琴模式，默认 false
|
||||
*/
|
||||
accordion?: boolean
|
||||
/**
|
||||
* 是否仅允许节点左侧图标控制展开收缩。默认 false（即点击节点本身也可控制）。若为 true，则只能通过节点左侧图标来展开收缩
|
||||
*/
|
||||
onlyIconControl?: boolean
|
||||
/**
|
||||
* 是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式
|
||||
*/
|
||||
isJump?: boolean
|
||||
/**
|
||||
* 是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。
|
||||
*/
|
||||
showLine?: boolean
|
||||
/**
|
||||
* 自定义各类默认文本，目前支持以下设定：
|
||||
*/
|
||||
text?: {
|
||||
/**
|
||||
* 节点默认名称
|
||||
*/
|
||||
defaultNodeName?: () => string | string
|
||||
/**
|
||||
* 数据为空时的提示文本
|
||||
*/
|
||||
none?: () => string | string | VNode | Element
|
||||
}
|
||||
}
|
||||
|
||||
export interface TreeNode {
|
||||
/**
|
||||
* 当前点击的节点数据
|
||||
*/
|
||||
data: TreeData
|
||||
/**
|
||||
* 节点的展开状态
|
||||
*/
|
||||
state: 'open' | 'close' | 'normal'
|
||||
/**
|
||||
* 当前节点元素
|
||||
*/
|
||||
elem: Element | VNode | VNodeChild
|
||||
}
|
||||
|
||||
export interface TreeEmits {
|
||||
/**
|
||||
* 节点被点击后触发
|
||||
* @param e 事件
|
||||
* @param treeNode
|
||||
*/
|
||||
(e: 'on-click', treeNode: TreeNode): void
|
||||
/**
|
||||
* 点击复选框时触发
|
||||
* @param e 事件
|
||||
* @param treeNode
|
||||
*/
|
||||
(e: 'on-check', treeNode: TreeNode): void
|
||||
/**
|
||||
* 操作节点的回调
|
||||
* @param e 事件
|
||||
* @param treeNode
|
||||
*/
|
||||
(e: 'on-operate', treeNode: TreeNode): void
|
||||
}
|
||||
|
||||
|
||||
export interface TreeExpose {
|
||||
/**
|
||||
* 返回选中的节点数据
|
||||
* 一般来说，v-model就够使了，但不排除需要直接获取其值的时候，此时通过该方法获取
|
||||
* eg: treeRef.getChecked()
|
||||
*/
|
||||
getChecked: () => TreeData
|
||||
}
|
||||
|
||||
// 设置节点勾选 setChecked 变为v-model控制
|
||||
// 实例重载 reload 变为v-model控制
|
||||
Reference in New Issue
Block a user