demo2.vue 875 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <m-menu default-active="1" :theme="theme">
  3. <m-menu-item name="1">菜单一</m-menu-item>
  4. <m-menu-item name="2">菜单二</m-menu-item>
  5. <m-submenu name="3">
  6. <template #title>菜单三</template>
  7. <m-menu-item name="3-1">item1</m-menu-item>
  8. <m-menu-item name="3-2">item2</m-menu-item>
  9. <m-menu-item name="3-3">item3</m-menu-item>
  10. </m-submenu>
  11. <m-menu-item name="4">菜单四</m-menu-item>
  12. </m-menu>
  13. <div class="theme-style">
  14. <p class="title">切换主题</p>
  15. <m-radio-group v-model="theme">
  16. <m-radio label="light">light</m-radio>
  17. <m-radio label="dark">dark</m-radio>
  18. </m-radio-group>
  19. </div>
  20. </template>
  21. <script setup>
  22. import { ref } from 'vue-demi'
  23. const theme = ref('light')
  24. </script>
  25. <style scoped>
  26. .theme-style{
  27. margin-top: 20px;
  28. }
  29. .title{
  30. margin: 5px;
  31. font-size: 14px;
  32. }
  33. </style>