tuniao-ui/vipPage/components/tree-view/tree-view.vue

<template>
  <view class="vip-component-tree-view tn-safe-area-inset-bottom">
    
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>树形菜单</tn-nav-bar>
      
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <demo-title title="基础">
        <tn-tree-view :treeData="treeData" @click="onClick"></tn-tree-view>
      </demo-title>
      
      <view class="tn-padding-bottom-lg"></view>
    </view>
    
  </view>
</template>

<script>
  import demoTitle from '@/libs/components/demo-title.vue'
  export default {
    name: 'VipComponentTreeView',
    components: { demoTitle },
    data() {
      return {
        treeData: [{
          text: 'TuniaoUI',
          value: 1,
          image: '/vipPage/static/images/tree_view/folder.png',
          activeImage: '/vipPage/static/images/tree_view/folder_open.png',
          collapsed: false,
          children: [{
            text: 'tn-button',
            value: 10,
            image: '/vipPage/static/images/tree_view/folder.png',
            activeImage: '/vipPage/static/images/tree_view/folder_open.png',
            collapsed: false,
            children: [{
              text: 'tn-button.vue',
              value: 100,
              image: '/vipPage/static/images/tree_view/file_vue.png'
            },{
              text: 'tn-button.js',
              value: 101,
              image: '/vipPage/static/images/tree_view/file_js.png'
            },{
              text: 'tn-button.css',
              value: 102,
              image: '/vipPage/static/images/tree_view/file_css.png'
            }]
          },{
            text: 'tn-avatar',
            value: 11,
            image: '/vipPage/static/images/tree_view/folder.png',
            activeImage: '/vipPage/static/images/tree_view/folder_open.png',
            collapsed: true,
            children: [{
              text: 'tn-avatar.vue',
              value: 110,
              image: '/vipPage/static/images/tree_view/file_vue.png'
            },{
              text: 'tn-avatar.js',
              value: 111,
              image: '/vipPage/static/images/tree_view/file_js.png'
            },{
              text: 'tn-avatar.css',
              value: 112,
              image: '/vipPage/static/images/tree_view/file_css.png'
            }]
          },{
            text: 'tn-icon',
            value: 12,
            image: '/vipPage/static/images/tree_view/folder.png',
            activeImage: '/vipPage/static/images/tree_view/folder_open.png',
            collapsed: true,
            children: [{
              text: 'tn-icon.vue',
              value: 120,
              image: '/vipPage/static/images/tree_view/file_vue.png'
            },{
              text: 'tn-icon.js',
              value: 121,
              image: '/vipPage/static/images/tree_view/file_js.png'
            },{
              text: 'tn-icon.css',
              value: 122,
              image: '/vipPage/static/images/tree_view/file_css.png'
            }]
          },{
            text: 'tn-navbar',
            value: 13,
            image: '/vipPage/static/images/tree_view/folder.png',
            activeImage: '/vipPage/static/images/tree_view/folder_open.png',
            collapsed: true,
            children: [{
              text: 'tn-navbar.vue',
              value: 130,
              image: '/vipPage/static/images/tree_view/file_vue.png'
            },{
              text: 'tn-navbar.js',
              value: 131,
              image: '/vipPage/static/images/tree_view/file_js.png'
            },{
              text: 'tn-navbar.css',
              value: 132,
              image: '/vipPage/static/images/tree_view/file_css.png'
            }]
          }]
        }]
      }
    },
    methods: {
      onClick(e) {
        this.$tn.message.toast(`点击了${e.text}节点`)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>