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

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

export default defineComponent({
  name: 'directory-main',
  setup() {
    const show = ref(true);
    const forms = reactive({
      expandedKey: null, // 展开
      selectKey: 16 // 选的
    });
    const treeList = ref([
      {
        key: 1,
        label: '第1课 好朋友',
        selected: false,
        children: [
          {
            key: 10,
            label: '玩具兵进行曲'
          },
          {
            key: 11,
            label: '口哨与小狗'
          },
          {
            key: 12,
            label: ' 你的民在叫什么？'
          },
          {
            key: 13,
            label: '拉勾勾'
          },
          {
            key: 14,
            label: '唱歌姿势'
          }
        ]
      },
      {
        key: 2,
        label: '第2课 快乐的一天',
        selected: true,
        children: [
          {
            key: 15,
            label: '快乐的一天'
          },
          {
            key: 16,
            label: '其多列'
          },
          {
            key: 17,
            label: '跳绳'
          }
        ]
      },
      {
        key: 3,
        label: '第3课 祖国您好',
        selected: false,
        children: [
          {
            key: 18,
            label: '中华人民共和国国歌'
          },
          {
            key: 19,
            label: '颂祖国'
          },
          {
            key: 20,
            label: '国旗国旗真美丽'
          },
          {
            key: 21,
            label: '同唱一首歌'
          },
          {
            key: 22,
            label: '音的强弱'
          }
        ]
      },
      {
        key: 4,
        label: '第4课 可爱的动物',
        selected: false,
        children: [
          {
            key: 23,
            label: '快乐的小熊猫'
          },
          {
            key: 24,
            label: '袋鼠'
          },
          {
            key: 25,
            label: '动物说话'
          },
          {
            key: 26,
            label: '咏鹅'
          },
          {
            key: 27,
            label: '木鱼 碰钟'
          }
        ]
      },
      {
        key: 5,
        label: '第5课 爱劳动',
        selected: false,
        children: [
          {
            key: 28,
            label: '劳动最光荣'
          },
          {
            key: 29,
            label: '三个和尚'
          },
          {
            key: 30,
            label: '洗手绢'
          },
          {
            key: 31,
            label: '大家来劳动'
          }
        ]
      },
      {
        key: 6,
        label: '第6课 小精灵',
        selected: false,
        children: [
          {
            key: 32,
            label: '小青蛙'
          },
          {
            key: 33,
            label: '野蜂飞舞'
          },
          {
            key: 34,
            label: '小青蛙找家'
          },
          {
            key: 35,
            label: '小蜻蜓'
          },
          {
            key: 36,
            label: '响板'
          }
        ]
      },
      {
        key: 7,
        label: '游戏宫',
        selected: false,
        children: [
          {
            key: 37,
            label: '欢乐的游乐园'
          }
        ]
      },
      {
        key: 8,
        label: '第7课 小小音乐家',
        selected: false,
        children: [
          {
            key: 38,
            label: '号手与鼓手'
          },
          {
            key: 39,
            label: '会跳舞的洋娃娃'
          },
          {
            key: 40,
            label: '星光圆舞曲'
          },
          {
            key: 41,
            label: '法国号'
          },
          {
            key: 42,
            label: '快乐的小笛子'
          },
          {
            key: 43,
            label: '音的长短'
          }
        ]
      },
      {
        key: 9,
        label: '第8课 过新年',
        selected: false,
        children: [
          {
            key: 44,
            label: '小拜年'
          },
          {
            key: 45,
            label: '平安夜'
          },
          {
            key: 46,
            label: '龙咚锵'
          },
          {
            key: 47,
            label: '新年好'
          },
          {
            key: 48,
            label: '锣 鼓 镲'
          }
        ]
      },
      {
        key: -1,
        label: '欢乐谷',
        selected: false,
        children: [
          {
            key: 49,
            label: '小鼓响咚咚'
          },
          {
            key: 50,
            label: '我有一只小羊羔'
          },
          {
            key: 51,
            label: '大月亮'
          },
          {
            key: 52,
            label: '我的音乐表现'
          }
        ]
      }
    ]);

    setTimeout(() => {
      show.value = false;
    }, 100);
    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>
    );
  }
});