vue3+ts实现树形组件(菜单组件)

---mTree
  ---index.ts
  ---mTree.vue

import  mTree  from "./mTree.vue"
mTree.install = app => {
   app.component(mTree.name,mTree)
}
export default mTree

const state = reactive({
  treeOptions: [
    {
      label: '一级',
      children: [
       ...
        {
          label: '一级-3',
          children: [
            ....
          ],
        },
      ],
    },
   ...
})

<template>
  <li v-for="item in options"
      :key="item.label">
    {{ item.label }}
      <ul  v-if="item.children&&item.children.length>0">
        <mTree :options="item.children"></mTree>
      </ul>
  </li>
​
</template>

<li v-for...
      @click.stop="toggleisOpen(item)">
    {{ item.label }}
    <transition name="slide-fade">
      <ul v-show="item.isOpen">...</ul>
    </transition>
  </li>

interface optionsProp {
  label: string
  isOpen?: boolean
  children?: optionsProp[]
}
const props = defineProps({
  options: {
    type: Array as PropType<optionsProp[]>,
    default() {
      return []
    },
  },
})
const toggleisOpen = (item: any) => {
  item.isOpen = !item.isOpen
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
​
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
​
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}