classroom-instruments/src/views/prepare-lessons/components/directory-main/index.tsx

import {
  Transition,
  TransitionGroup,
  defineComponent,
  reactive,
  ref
} from 'vue';
import styles from './index.module.less';
import { NIcon, NTree, NSpin, NScrollbar } from 'naive-ui';

export default defineComponent({
  name: 'directory-main',
  setup() {
    const show = ref(true);
    const forms = reactive({
      expandedKey: null, // 展开
      selectKey: null // 选的
    });
    const treeList = ref([
      {
        key: 1,
        label:
          '第一单元 我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里',
        selected: false,
        children: [
          {
            key: 10,
            label: '【欣赏】永远住在童话里'
          },
          {
            key: 11,
            label: '【欣赏】糖果仙子舞曲'
          },
          {
            key: 12,
            label: '【知识】音的高低'
          },
          {
            key: 13,
            label: '【唱歌】小红帽'
          }
        ]
      },
      {
        key: 2,
        label: '第二单元 快乐游戏',
        selected: false,
        children: [
          {
            key: 14,
            label: '【欣赏】永远住在童话里'
          }
        ]
      },
      {
        key: 3,
        label: '第三单元 劳动最光荣',
        selected: false,
        children: [
          {
            key: 15,
            label: '【欣赏】永远住在童话里'
          }
        ]
      },
      {
        key: 4,
        label: '第四单元 音乐中的动物',
        selected: false,
        children: [
          {
            key: 16,
            label: '【欣赏】永远住在童话里'
          }
        ]
      },
      {
        key: 5,
        label: '第五单元 动画城',
        selected: false,
        children: [
          {
            key: 17,
            label: '【欣赏】永远住在童话里'
          }
        ]
      },
      {
        key: 6,
        label: '第六单元 下雪啦',
        selected: false,
        children: [
          {
            key: 18,
            label: '【欣赏】永远住在童话里'
          }
        ]
      },
      {
        key: 7,
        label: '我的音乐网页',
        selected: false,
        children: [
          {
            key: 19,
            label: '【欣赏】永远住在童话里'
          }
        ]
      }
    ]);

    setTimeout(() => {
      show.value = false;
    }, 500);
    return () => (
      <div class={styles.directoryList}>
        <div class={styles['select-directory']}>
          <span class={['cr-ellipsis']} title="人教版二年级上册（2013）">
            人教版二年级上册（2013）
          </span>
          <NIcon class={styles.iconArrow}>
            <svg
              width="11px"
              height="15px"
              viewBox="0 0 11 15"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg">
              <g
                stroke="none"
                stroke-width="1"
                fill="none"
                fill-rule="evenodd"
                opacity="0.699999988">
                <g
                  transform="translate(-445.000000, -137.000000)"
                  fill="#131415">
                  <g transform="translate(152.000000, 120.000000)">
                    <path
                      d="M299.326227,20.2118001 L304.934089,28.4366632 C305.245211,28.8929759 305.127511,29.515105 304.671198,29.8262273 C304.505147,29.9394437 304.308836,30 304.107861,30 L292.892139,30 C292.339854,30 291.892139,29.5522847 291.892139,29 C291.892139,28.7990254 291.952695,28.6027139 292.065911,28.4366632 L297.673773,20.2118001 C297.984895,19.7554873 298.607024,19.6377872 299.063337,19.9489096 C299.16663,20.0193364 299.255801,20.1085074 299.326227,20.2118001 Z"
                      id="三角形"
                      transform="translate(298.500000, 24.500000) rotate(-270.000000) translate(-298.500000, -24.500000) "></path>
                  </g>
                </g>
              </g>
            </svg>
          </NIcon>
        </div>

        <NScrollbar class={styles.scrollBar}>
          <NSpin show={show.value}>
            {treeList.value.map((item: any, index: number) => (
              <div class={styles.treeParent} key={'parent' + index}>
                <div
                  class={[styles.treeItem, styles.parentItem]}
                  onClick={() => {
                    treeList.value.forEach((child: any) => {
                      if (item.key !== child.key) {
                        child.selected = false;
                      }
                    });
                    item.selected = item.selected ? false : true;
                  }}>
                  {item.children && item.children.length > 0 && (
                    <span
                      class={[
                        styles.arrow,
                        item.selected ? styles.arrowSelect : ''
                      ]}></span>
                  )}
                  <p
                    class={[
                      styles.title,
                      item.selected ? styles.titleSelect : ''
                    ]}>
                    {item.label}
                  </p>
                </div>

                {item.selected &&
                  item.children &&
                  item.children.map((child: any, j: number) => (
                    <div
                      key={'child' + j}
                      class={[
                        styles.treeItem,
                        styles.childItem,
                        styles.animation,
                        forms.selectKey === child.key ? styles.childSelect : ''
                      ]}
                      onClick={() => {
                        forms.selectKey = child.key;
                      }}>
                      <span class={styles.childArrow}></span>
                      <p class={styles.title}>{child.label}</p>
                    </div>
                  ))}
              </div>
            ))}
          </NSpin>
        </NScrollbar>
      </div>
    );
  }
});