index.vue 749 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <template>
  2. <n-space class="go-mt-0">
  3. <n-button v-for="item in btnList" :key="item.title" ghost>
  4. <template #icon>
  5. <component :is="item.icon"></component>
  6. </template>
  7. <span>
  8. {{ item.title }}
  9. </span>
  10. </n-button>
  11. </n-space>
  12. </template>
  13. <script setup lang="ts">
  14. import { reactive } from 'vue'
  15. import { renderIcon } from '@/utils'
  16. import { icon } from '@/plugins'
  17. const { DesktopOutlineIcon, SendIcon } = icon.ionicons5
  18. const btnList = reactive([
  19. {
  20. select: true,
  21. title: '预览',
  22. icon: renderIcon(DesktopOutlineIcon)
  23. },
  24. {
  25. select: true,
  26. title: '发布',
  27. icon: renderIcon(SendIcon)
  28. }
  29. ])
  30. </script>
  31. <style lang="scss" scoped>
  32. .align-center {
  33. margin-top: -4px;
  34. }
  35. </style>