fix(tree): keep the default behavior keepace with layui
This commit is contained in:
parent
6e9c4f3153
commit
e34fd25be1
@ -1,23 +0,0 @@
|
||||
{
|
||||
"0 debug pnpm:scope": {
|
||||
"selected": 1
|
||||
},
|
||||
"1 info pnpm": {
|
||||
"err": {
|
||||
"name": "Error",
|
||||
"message": "not found: insta",
|
||||
"code": "ENOENT",
|
||||
"stack": "Error: not found: insta\n at getNotFoundError (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:47811:51)\n at Function.whichSync [as sync] (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:47888:13)\n at getCommandAbsolutePathSync (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:49453:44)\n at Object.default_1 [as default] (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:49462:32)\n at D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:129798:34"
|
||||
}
|
||||
},
|
||||
"2 error pnpm": {
|
||||
"code": "ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL",
|
||||
"prefix": "D:\\layui-vue",
|
||||
"err": {
|
||||
"name": "pnpm",
|
||||
"message": "not found: insta",
|
||||
"code": "ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL",
|
||||
"stack": "Error: not found: insta\n at getNotFoundError (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:47811:51)\n at Function.whichSync [as sync] (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:47888:13)\n at getCommandAbsolutePathSync (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:49453:44)\n at Object.default_1 [as default] (D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:49462:32)\n at D:\\service\\Nvm\\v16.6.2\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:129798:34"
|
||||
}
|
||||
}
|
||||
}
|
@ -7,13 +7,14 @@ export default {
|
||||
import LayIcon from '../icon'
|
||||
import { TreeNode } from '/@src/module/tree/tree.type'
|
||||
|
||||
type EventType = 'icon' | 'node'
|
||||
|
||||
interface TreeEntityProps {
|
||||
node: TreeNode
|
||||
onlyIconControl: boolean
|
||||
}
|
||||
|
||||
interface EmitEvent {
|
||||
(e: 'node-click', node: TreeNode): void
|
||||
(e: 'node-click', node: TreeNode, type: EventType): void
|
||||
}
|
||||
|
||||
const props = defineProps<TreeEntityProps>()
|
||||
@ -44,19 +45,27 @@ const nodeIconType = (node: TreeNode): string => {
|
||||
}
|
||||
|
||||
/**
|
||||
* 发射至外层
|
||||
* Node Icon Click
|
||||
* @param node
|
||||
*/
|
||||
function handleIconClick(node: TreeNode) {
|
||||
emit('node-click', node, 'icon')
|
||||
}
|
||||
|
||||
/**
|
||||
* Node Font Click
|
||||
* @param node
|
||||
*/
|
||||
function handleNodeClick(node: TreeNode) {
|
||||
emit('node-click', node)
|
||||
emit('node-click', node, 'node')
|
||||
}
|
||||
|
||||
/**
|
||||
* 递归事件
|
||||
* @param node
|
||||
*/
|
||||
function innerClick(node: TreeNode) {
|
||||
emit('node-click', node)
|
||||
function innerClick(node: TreeNode, type: EventType) {
|
||||
emit('node-click', node, type)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
@ -69,17 +78,18 @@ function innerClick(node: TreeNode) {
|
||||
}"
|
||||
>
|
||||
<div class="layui-tree-entry">
|
||||
<div
|
||||
class="layui-tree-main"
|
||||
@click.prevent.stop="!onlyIconControl && handleNodeClick(node)"
|
||||
>
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick layui-tree-icon">
|
||||
<LayIcon
|
||||
:type="nodeIconType(node)"
|
||||
@click.prevent.stop="handleNodeClick(node)"
|
||||
@click.prevent.stop="handleIconClick(node, 'icon')"
|
||||
/>
|
||||
</span>
|
||||
<span class="layui-tree-txt">{{ node.title }}</span>
|
||||
<span
|
||||
class="layui-tree-txt"
|
||||
@click.prevent.stop="handleNodeClick(node, 'node')"
|
||||
>{{ node.title }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -91,7 +101,6 @@ function innerClick(node: TreeNode) {
|
||||
v-for="(item, index) in node.children"
|
||||
:key="index"
|
||||
:node="item"
|
||||
:only-icon-control="onlyIconControl"
|
||||
@node-click="innerClick"
|
||||
/>
|
||||
</div>
|
||||
@ -105,17 +114,18 @@ function innerClick(node: TreeNode) {
|
||||
}"
|
||||
>
|
||||
<div class="layui-tree-entry">
|
||||
<div
|
||||
class="layui-tree-main"
|
||||
@click.prevent.stop="!onlyIconControl && handleNodeClick(node)"
|
||||
>
|
||||
<div class="layui-tree-main">
|
||||
<span class="layui-tree-iconClick">
|
||||
<LayIcon
|
||||
type="layui-icon-file"
|
||||
@click.prevent.stop="handleNodeClick(node)"
|
||||
@click.prevent.stop="handleIconClick(node, 'icon')"
|
||||
/>
|
||||
</span>
|
||||
<span class="layui-tree-txt">{{ node.title }}</span>
|
||||
<span
|
||||
class="layui-tree-txt"
|
||||
@click.prevent.stop="handleNodeClick(node, 'node')"
|
||||
>{{ node.title }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -167,10 +167,16 @@ const { innerTreeData, updateInnerTreeData, treeWrapperClass } = useTreeData(
|
||||
emit
|
||||
)
|
||||
|
||||
function handleNodeClick(node: TreeNode) {
|
||||
updateInnerTreeData(innerTreeData.value, node)
|
||||
function handleNodeClick(node: TreeNode, type: 'node' | 'icon') {
|
||||
// 是否只通过icon控制展开收起
|
||||
if (props.onlyIconControl) {
|
||||
type === 'icon' && updateInnerTreeData(innerTreeData.value, node)
|
||||
} else {
|
||||
updateInnerTreeData(innerTreeData.value, node)
|
||||
}
|
||||
// icon 点击不emit出事件
|
||||
const emitNode = getEmitNode(props.data!, node)
|
||||
emit('node-click', { data: emitNode! })
|
||||
type !== 'icon' && emit('node-click', { data: emitNode! })
|
||||
}
|
||||
</script>
|
||||
<script lang="ts">
|
||||
@ -184,7 +190,6 @@ export default {
|
||||
v-for="(node, index) in innerTreeData"
|
||||
:key="node.id || index"
|
||||
:node="node"
|
||||
:only-icon-control="onlyIconControl"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user