fix(tree): keep the default behavior keepace with layui

This commit is contained in:
落小梅 2021-10-13 12:14:24 +08:00
parent 6e9c4f3153
commit e34fd25be1
3 changed files with 38 additions and 46 deletions

View File

@ -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"
}
}
}

View File

@ -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>

View File

@ -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>