feat(tree): add transition
This commit is contained in:
parent
7b6854629b
commit
20d5093ba5
@ -9,6 +9,7 @@
|
|||||||
:onlyIconControl="iconCtrl"
|
:onlyIconControl="iconCtrl"
|
||||||
:showLine="showLine"
|
:showLine="showLine"
|
||||||
:showCheckbox="showCheckbox"
|
:showCheckbox="showCheckbox"
|
||||||
|
accordion
|
||||||
v-model:checkedKeys="checkedKeys"
|
v-model:checkedKeys="checkedKeys"
|
||||||
@node-click="handleClick"
|
@node-click="handleClick"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
@ -261,4 +262,4 @@ function handleClick(node) {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
::: previousNext tree
|
::: previousNext tree
|
||||||
:::
|
:::
|
||||||
|
@ -6,13 +6,12 @@ export default {
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { StringOrNumber } from "./tree.type";
|
import { StringOrNumber } from "./tree.type";
|
||||||
import { Nullable } from "../type";
|
|
||||||
|
|
||||||
import LayIcon from "../icon";
|
import LayIcon from "../icon";
|
||||||
import LayCheckbox from "../checkbox";
|
import LayCheckbox from "../checkbox";
|
||||||
import { Ref } from "vue";
|
import { Ref } from "vue";
|
||||||
import { Tree } from "./tree";
|
import { Tree } from "./tree";
|
||||||
|
import { Nullable } from "../../types";
|
||||||
|
import LayTransition from "../transition/index.vue";
|
||||||
type CustomKey = string | number;
|
type CustomKey = string | number;
|
||||||
type CustomString = (() => string) | string;
|
type CustomString = (() => string) | string;
|
||||||
|
|
||||||
@ -34,6 +33,7 @@ interface TreeNodeProps {
|
|||||||
nodeList: TreeData[];
|
nodeList: TreeData[];
|
||||||
showCheckbox: boolean;
|
showCheckbox: boolean;
|
||||||
showLine: boolean;
|
showLine: boolean;
|
||||||
|
accordion: boolean;
|
||||||
onlyIconControl: boolean;
|
onlyIconControl: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -136,7 +136,7 @@ function handleTitleClick(node: TreeData) {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<transition name="move">
|
<LayTransition :enable="accordion">
|
||||||
<div
|
<div
|
||||||
v-if="node.isLeaf.value"
|
v-if="node.isLeaf.value"
|
||||||
class="layui-tree-pack layui-tree-showLine"
|
class="layui-tree-pack layui-tree-showLine"
|
||||||
@ -146,12 +146,13 @@ function handleTitleClick(node: TreeData) {
|
|||||||
:node-list="node.children"
|
:node-list="node.children"
|
||||||
:show-checkbox="showCheckbox"
|
:show-checkbox="showCheckbox"
|
||||||
:show-line="showLine"
|
:show-line="showLine"
|
||||||
|
:accordion="accordion"
|
||||||
:tree="tree"
|
:tree="tree"
|
||||||
:only-icon-control="onlyIconControl"
|
:only-icon-control="onlyIconControl"
|
||||||
@node-click="recursiveNodeClick"
|
@node-click="recursiveNodeClick"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</LayTransition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -85,6 +85,7 @@ function handleClick(node: TreeData) {
|
|||||||
:node-list="nodeList"
|
:node-list="nodeList"
|
||||||
:show-checkbox="showCheckbox"
|
:show-checkbox="showCheckbox"
|
||||||
:show-line="showLine"
|
:show-line="showLine"
|
||||||
|
:accordion="accordion"
|
||||||
:only-icon-control="onlyIconControl"
|
:only-icon-control="onlyIconControl"
|
||||||
@node-click="handleClick"
|
@node-click="handleClick"
|
||||||
/>
|
/>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user