wd-navbar-capsule.vue 817 B

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <view :class="`wd-navbar-capsule ${customClass}`" :style="customStyle">
  3. <wd-icon @click="handleBack" name="chevron-left" custom-class="wd-navbar-capsule__icon" />
  4. <wd-icon @click="handleBackHome" name="home" custom-class="wd-navbar-capsule__icon" />
  5. </view>
  6. </template>
  7. <script lang="ts">
  8. export default {
  9. name: 'wd-navbar-capsule',
  10. options: {
  11. virtualHost: true,
  12. addGlobalClass: true,
  13. styleIsolation: 'shared'
  14. }
  15. }
  16. </script>
  17. <script lang="ts" setup>
  18. import wdIcon from '../wd-icon/wd-icon.vue'
  19. import { navbarCapsuleProps } from './types'
  20. const emit = defineEmits(['back', 'back-home'])
  21. defineProps(navbarCapsuleProps)
  22. function handleBack() {
  23. emit('back')
  24. }
  25. function handleBackHome() {
  26. emit('back-home')
  27. }
  28. </script>
  29. <style lang="scss">
  30. @import './index.scss';
  31. </style>