feat: ✨ NavbarCapsule 导航胶囊组件支持外部传入样式

Author: Moonofweisheng

src/uni_modules/wot-design-uni/components/wd-navbar-capsule/types.ts

@@ -0,0 +1,8 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps } from '../common/props'
+
+export const navbarCapsuleProps = {
+  ...baseProps
+}
+
+export type NavbarCapsuleProps = ExtractPropTypes<typeof navbarCapsuleProps>

src/uni_modules/wot-design-uni/components/wd-navbar-capsule/wd-navbar-capsule.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="wd-navbar-capsule">
+  <view :class="`wd-navbar-capsule ${customClass}`" :style="customStyle">
     <wd-icon @click="handleBack" name="chevron-left" custom-class="wd-navbar-capsule__icon" />
     <wd-icon @click="handleBackHome" name="home" custom-class="wd-navbar-capsule__icon" />
   </view>
@@ -17,7 +17,10 @@ export default {
 
 <script lang="ts" setup>
 import wdIcon from '../wd-icon/wd-icon.vue'
+import { navbarCapsuleProps } from './types'
+
 const emit = defineEmits(['back', 'back-home'])
+defineProps(navbarCapsuleProps)
 
 function handleBack() {
   emit('back')