bri-components 1.0.0

package/src/components/other/ZCollapseTree.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="ZCollapseTree">
+        <ul>
+            <li v-for="listItem in list" :key="listItem._key">
+                <!-- 有children -->
+                <Collapse class="ZCollapseTree-collapse"
+                    v-if="listItem.children && listItem.children.length"
+                    :accordion="listItem._accordion"
+                    :simple="listItem._simple === false ? false : true"
+                    :hide-arrow="true"
+                    :value="listItem.expansion && [listItem._key]"
+                >
+                    <Panel :name="listItem._key">
+                        <div
+                            class="ZCollapseTree-collapseItem"
+                            :class="{ 'ZCollapseTree-listItem-disabled': listItem.disabled }"
+                            @click.stop="click(listItem)"
+                        >
+                            <div class="ZCollapseTree-listItem-text">
+                                {{ listItem.name }}
+                                <span class="ZCollapseTree-listItem-current" v-if="listItem.current">(当前)</span>
+                            </div>
+                            <div class="ZCollapseTree-listItem-grey">
+                                {{ listItem._simpleDescription }}
+                            </div>
+                        </div>
+                        <z-collapse-tree slot="content" :list="listItem.children" @click="click"></z-collapse-tree>
+                    </Panel>
+                </Collapse>
+
+                <!-- 直接展示 -->
+                <div v-else
+                    class="ZCollapseTree-listItem"
+                    :class="{ 'ZCollapseTree-listItem-disabled': listItem.disabled }"
+                    @click.stop="click(listItem)"
+                >
+                    <div class="ZCollapseTree-listItem-text">
+                        {{ listItem.name }}
+                        <span class="ZCollapseTree-listItem-current" v-if="listItem.current">(当前)</span>
+                    </div>
+                    <div class="ZCollapseTree-listItem-grey">
+                        <Tooltip
+                            placement="right"
+                            max-width="300"
+                            :content="listItem._description"
+                        >
+                            {{ listItem._simpleDescription }}
+                        </Tooltip>
+                    </div>
+                </div>
+            </li>
+
+        </ul>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ZCollapseTree",
+        props: {
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {
+            };
+        },
+        computed: {},
+        created () {},
+        methods: {
+            click (listItem) {
+                if (listItem.disabled) {
+                    return;
+                }
+                this.$emit("click", listItem);
+            }
+        }
+    };
+</script>