bri-components 1.5.22 → 1.6.0

package/src/components/list/BriTreeItem.vue

@@ -1,163 +1,163 @@
-<template>
-    <div class="BriTreeItem">
-        <!-- 当前节点 -->
-        <div class="BriTreeItem-content">
-            <!-- 展开icon -->
-            <div class="BriTreeItem-content-expand">
-                <i
-                    v-if="hasChildren"
-                    :class="{
-                        'BriTreeItem-content-expand-icon': true,
-                        'ivu-icon': true,
-                        'ivu-icon-ios-arrow-down': expand,
-                        'ivu-icon-ios-arrow-forward': !expand
-                    }"
-                    @click="toggleExpand"
-                ></i>
-            </div>
-
-            <!-- 有选择框 意味着该节点可以选择 -->
-            <Checkbox
-                v-if="changeOnSelect || !hasChildren"
-                :class="{
-                    'BriTreeItem-content-select': true,
-                    'BriTreeItem-content-select-radio': !multiple
-                }"
-                v-model="value.checked"
-                @on-change="onChange(value)"
-            >
-                {{ value.title || value.name }}
-            </Checkbox>
-            <!-- 无选择框 -->
-            <span
-                v-else
-                class="BriTreeItem-content-text"
-            >
-                {{ value.title || value.name }}
-            </span>
-        </div>
-
-        <!-- 当前节点 的子节点列表 -->
-        <transition
-            name="default"
-            enter-class="default-enter"
-            leave-to-class="default-leave-to"
-        >
-            <div
-                v-if="showChildren"
-                class="BriTreeItem-children"
-            >
-                <bri-tree-item
-                    v-for="item in value.children"
-                    :key="item._key"
-                    :value="item"
-                    :changeOnSelect="changeOnSelect"
-                    :multiple="multiple"
-                    @on-change="onChange"
-                ></bri-tree-item>
-            </div>
-        </transition>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "BriTreeItem",
-        props: {
-            value: {
-                type: Object,
-                default: () => ({})
-            },
-
-            changeOnSelect: {
-                type: Boolean,
-                default: true
-            },
-            multiple: {
-                type: Boolean,
-                default: false
-            }
-        },
-        data () {
-            return {
-                expand: false
-            };
-        },
-        computed: {
-            hasChildren () {
-                return this.value.children && this.value.children.length;
-            },
-            showChildren () {
-                return this.expand && this.hasChildren;
-            }
-        },
-        created () {
-            this.init();
-        },
-        methods: {
-            init () {
-                this.expand = this.value.expand;
-            },
-
-            toggleExpand () {
-                this.expand = !this.expand;
-            },
-            onChange (item) {
-                this.$emit("on-change", item);
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .BriTreeItem {
-        padding-left: 16px;
-
-        &-content {
-            line-height: 36px;
-            cursor: pointer;
-            display: flex;
-
-            &:hover {
-                background-color: @btn-hover;
-            }
-
-            &-expand {
-                width: 28px;
-                text-align: center;
-            }
-
-            &-select {
-                width: 100%;
-                color: rgba(36, 36, 63, 0.9);
-
-                .ivu-checkbox-inner {
-                    border-color: rgba(36, 36, 63, 0.3)
-                }
-                .ivu-checkbox {
-                    margin-right: 2px;
-                }
-
-                &-radio {
-                    .ivu-checkbox-inner {
-                        border-radius: 50%;
-                    }
-                }
-            }
-
-            &-text {
-
-            }
-        }
-
-        .default-enter,
-        .default-leave-to {
-            opacity: 0;
-            max-height: 0;
-        }
-
-        &-children {
-
-        }
-    }
-</style>
+<template>
+    <div class="BriTreeItem">
+        <!-- 当前节点 -->
+        <div class="BriTreeItem-content">
+            <!-- 展开icon -->
+            <div class="BriTreeItem-content-expand">
+                <i
+                    v-if="hasChildren"
+                    :class="{
+                        'BriTreeItem-content-expand-icon': true,
+                        'ivu-icon': true,
+                        'ivu-icon-ios-arrow-down': expand,
+                        'ivu-icon-ios-arrow-forward': !expand
+                    }"
+                    @click="toggleExpand"
+                ></i>
+            </div>
+
+            <!-- 有选择框 意味着该节点可以选择 -->
+            <Checkbox
+                v-if="changeOnSelect || !hasChildren"
+                :class="{
+                    'BriTreeItem-content-select': true,
+                    'BriTreeItem-content-select-radio': !multiple
+                }"
+                v-model="value.checked"
+                @on-change="onChange(value)"
+            >
+                {{ value.title || value.name }}
+            </Checkbox>
+            <!-- 无选择框 -->
+            <span
+                v-else
+                class="BriTreeItem-content-text"
+            >
+                {{ value.title || value.name }}
+            </span>
+        </div>
+
+        <!-- 当前节点 的子节点列表 -->
+        <transition
+            name="default"
+            enter-class="default-enter"
+            leave-to-class="default-leave-to"
+        >
+            <div
+                v-if="showChildren"
+                class="BriTreeItem-children"
+            >
+                <bri-tree-item
+                    v-for="item in value.children"
+                    :key="item._key"
+                    :value="item"
+                    :changeOnSelect="changeOnSelect"
+                    :multiple="multiple"
+                    @on-change="onChange"
+                ></bri-tree-item>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriTreeItem",
+        props: {
+            value: {
+                type: Object,
+                default: () => ({})
+            },
+
+            changeOnSelect: {
+                type: Boolean,
+                default: true
+            },
+            multiple: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                expand: false
+            };
+        },
+        computed: {
+            hasChildren () {
+                return this.value.children && this.value.children.length;
+            },
+            showChildren () {
+                return this.expand && this.hasChildren;
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.expand = this.value.expand;
+            },
+
+            toggleExpand () {
+                this.expand = !this.expand;
+            },
+            onChange (item) {
+                this.$emit("on-change", item);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .BriTreeItem {
+        padding-left: 16px;
+
+        &-content {
+            line-height: 36px;
+            cursor: pointer;
+            display: flex;
+
+            &:hover {
+                background-color: @btn-hover;
+            }
+
+            &-expand {
+                width: 28px;
+                text-align: center;
+            }
+
+            &-select {
+                width: 100%;
+                color: rgba(36, 36, 63, 0.9);
+
+                .ivu-checkbox-inner {
+                    border-color: rgba(36, 36, 63, 0.3)
+                }
+                .ivu-checkbox {
+                    margin-right: 2px;
+                }
+
+                &-radio {
+                    .ivu-checkbox-inner {
+                        border-radius: 50%;
+                    }
+                }
+            }
+
+            &-text {
+
+            }
+        }
+
+        .default-enter,
+        .default-leave-to {
+            opacity: 0;
+            max-height: 0;
+        }
+
+        &-children {
+
+        }
+    }
+</style>