upd(tabbar): 主题定制功能支持 (#420)

* upd: drag,shortpassword

* upd: tabbar,shortpassword,actionsheet

* upd: shortpassword新增方法

* upd: shortpassword按钮颜色抽离

* upd: tabbar的props样式抽离

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/tabbar/index.vue

@@ -34,7 +34,7 @@ export default create({
     },
     activeColor: {
       type: String,
-      default: '#fa2c19'
+      default: ''
     }
   },
   emits: ['tab-switch', 'update:show'],

src/packages/tabbaritem/index.scss

@@ -1,58 +1,60 @@
-.tabbar-item {
+.nut-tabbar-item {
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: $text-color;
+  color: $primary-color;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-}
-.icon-box {
-  padding: 0px;
-  display: inline-block;
-  position: relative;
-
-  .tips {
-    position: absolute;
-    background: $tabbar-active-color;
-    border: 1px solid $white;
-    border-radius: 7px;
-    text-align: center;
 
-    top: -2px;
-    right: -7px;
-    box-shadow: 0 0 0 1px $white;
-    font-size: $font-size-1;
-    color: $white;
+  &__icon--unactive {
+    color: $black;
   }
 
-  .num {
-    line-height: 1;
-    font-size: $font-size-0;
-    color: $white;
-    padding: 1px 2px 2px 3px;
-  }
-  .nums {
-    line-height: 1;
-    font-size: $font-size-0;
-    color: $white;
-    padding: 2px 1px 2px 2px;
-  }
-}
+  &_icon-box {
+    padding: 0px;
+    display: inline-block;
+    position: relative;
 
-.icon-box .icon {
-  display: block;
-  background-size: 100% 100%;
-  background-position: center center;
-}
+    &_tips {
+      position: absolute;
+      background: $tabbar-active-color;
+      border: 1px solid $white;
+      border-radius: 7px;
+      text-align: center;
+      top: -2px;
+      right: -7px;
+      box-shadow: 0 0 0 1px $white;
+      font-size: $font-size-1;
+      color: $white;
+    }
 
-.icon-box .tabbar-nav-word {
-  font-size: $font-size-0;
-  display: block;
-}
+    &_num {
+      line-height: 1;
+      font-size: $font-size-0;
+      color: $white;
+      padding: 1px 2px 2px 3px;
+    }
 
-.icon-box .big-word {
-  font-size: $font-size-large;
-  line-height: 1;
+    &_nums {
+      line-height: 1;
+      font-size: $font-size-0;
+      color: $white;
+      padding: 2px 1px 2px 2px;
+    }
+    &_icon {
+      display: block;
+      background-size: 100% 100%;
+      background-position: center center;
+    }
+    &_nav-word {
+      font-size: $font-size-0;
+      display: block;
+    }
+    &_big-word {
+      font-size: $font-size-large;
+      line-height: 1;
+    }
+  }
 }

src/packages/tabbaritem/index.vue

@@ -1,23 +1,39 @@
 <template>
   <div
-    class="tabbar-item"
+    class="nut-tabbar-item"
+    :class="{ 'nut-tabbar-item__icon--unactive': state.active != state.index }"
     :style="{
       color:
         state.active == state.index ? state.activeColor : state.unactiveColor
     }"
     @click="change(state.index)"
   >
-    <view class="icon-box">
-      <view class="tips num" v-if="num && num <= 99">
+    <view class="nut-tabbar-item_icon-box">
+      <view
+        class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_num"
+        v-if="num && num <= 99"
+      >
         {{ num }}
       </view>
-      <view class="tips nums" v-else-if="num && num > 100">{{ '99+' }}</view>
+      <view
+        class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums"
+        v-else-if="num && num > 100"
+        >{{ '99+' }}</view
+      >
       <view v-if="icon">
-        <nut-icon class="icon" :size="state.size" :name="icon"></nut-icon>
+        <nut-icon
+          class="nut-tabbar-item_icon-box_icon"
+          :size="state.size"
+          :name="icon"
+        ></nut-icon>
       </view>
-      <view :class="['tabbar-nav-word', { 'big-word': !icon }]">{{
-        tabTitle
-      }}</view>
+      <view
+        :class="[
+          'nut-tabbar-item_icon-box_nav-word',
+          { 'nut-tabbar-item_icon-box_big-word': !icon }
+        ]"
+        >{{ tabTitle }}</view
+      >
     </view>
   </div>
 </template>