Tree support transition

This commit is contained in:
Aresn 2017-06-02 14:30:03 +08:00
parent b80c48ffce
commit eae3e936c8

View file

@ -1,32 +1,33 @@
<template> <template>
<transition name="slide-up"> <collapse-transition>
<ul :class="classes" v-show="visible"> <ul :class="classes" v-show="visible">
<li> <li>
<span :class="arrowClasses" @click="handleExpand"> <span :class="arrowClasses" @click="handleExpand">
<Icon type="arrow-right-b"></Icon> <Icon type="arrow-right-b"></Icon>
</span> </span>
<Checkbox <Checkbox
v-if="showCheckbox" v-if="showCheckbox"
:value="data.checked" :value="data.checked"
:indeterminate="indeterminate" :indeterminate="indeterminate"
:disabled="data.disabled || data.disableCheckbox" :disabled="data.disabled || data.disableCheckbox"
@click.native.prevent="handleCheck"></Checkbox> @click.native.prevent="handleCheck"></Checkbox>
<span :class="titleClasses" v-html="data.title" @click="handleSelect"></span> <span :class="titleClasses" v-html="data.title" @click="handleSelect"></span>
<Tree-node <Tree-node
v-for="item in data.children" v-for="item in data.children"
:key="item" :key="item"
:data="item" :data="item"
:visible="data.expand" :visible="data.expand"
:multiple="multiple" :multiple="multiple"
:show-checkbox="showCheckbox"> :show-checkbox="showCheckbox">
</Tree-node> </Tree-node>
</li> </li>
</ul> </ul>
</transition> </collapse-transition>
</template> </template>
<script> <script>
import Checkbox from '../checkbox/checkbox.vue'; import Checkbox from '../checkbox/checkbox.vue';
import Icon from '../icon/icon.vue'; import Icon from '../icon/icon.vue';
import CollapseTransition from '../base/collapse-transition';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
import { findComponentsDownward } from '../../utils/assist'; import { findComponentsDownward } from '../../utils/assist';
@ -35,7 +36,7 @@
export default { export default {
name: 'TreeNode', name: 'TreeNode',
mixins: [ Emitter ], mixins: [ Emitter ],
components: { Checkbox, Icon }, components: { Checkbox, Icon, CollapseTransition },
props: { props: {
data: { data: {
type: Object, type: Object,