fix: review tabbar

src/packages/tabbar/demo.vue

@@ -32,7 +32,7 @@
     </nut-tabbar>
 
     <h2>自定义颜色</h2>
-    <nut-tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+    <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
       <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
       <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
@@ -40,7 +40,7 @@
       <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
     </nut-tabbar>
     <h2>三个icon的tabbar</h2>
-    <nut-tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+    <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
       <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
       <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>

src/packages/tabbar/doc.md

@@ -1,16 +1,16 @@
-# Tabbar 列表组件
+# Tabbar 标签栏组件
 
 ### 介绍
 
-XXXXXX
+底部导航常用场景
 ### 安装
 
 ``` javascript
 import { createApp } from 'vue';
-import { Tabbar } from '@nutui/nutui';
+import { Tabbar,Icon } from '@nutui/nutui';
 
 const app = createApp();
-app.use(Tabbar);
+app.use(Tabbar).use(Icon);
 
 ```
 
@@ -29,34 +29,34 @@ app.use(Tabbar);
 ```
 
 ``` javascript
-  setup() {
-    function tabSwitch(item: object, index: number) {
-      console.log(item, index);
-    }
-    return {
-      tabSwitch,
-    };
-  },
+setup() {
+  function tabSwitch(item: object, index: number) {
+    console.log(item, index);
+  }
+  return {
+    tabSwitch,
+  };
+},
 ```
 
 ### 自定义选中
 
 ``` html
-<nut-tabbar v-model:show= active >
-  <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
+<nut-tabbar v-model:show="active">
+  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
   <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
   <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
   <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
 </nut-tabbar>
 ```
 ``` javascript
-  setup() {
-    const active = ref(2)
-    return {
-      active
-    };
-  },
+setup() {
+  const active = ref(2)
+  return {
+    active
+  };
+},
 ```
 ### 徽标提示
 
@@ -72,7 +72,7 @@ app.use(Tabbar);
 ### 自定义颜色
 
 ``` html
-<nut-tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
   <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
   <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
   <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
@@ -83,7 +83,7 @@ app.use(Tabbar);
 ### 三个图标的标签栏
 
 ``` html
-<nut-tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
   <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
   <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
   <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
@@ -92,40 +92,48 @@ app.use(Tabbar);
 ### 固定底部，可自由跳转
 
 ``` html
-<nut-tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
-  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+<nut-tabbar :bottom="true">
+  <nut-tabbar-item tab-title="首页" href="" icon="home"></nut-tabbar-item>
   <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
   <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="购物车" href="https://m.jd.com" icon="cart"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+  <nut-tabbar-item
+    tab-title="购物车"
+    href="https://m.jd.com"
+    icon="cart"
+  ></nut-tabbar-item>
+  <nut-tabbar-item
+    tab-title="我的"
+    href="######"
+    icon="my"
+  ></nut-tabbar-item>
 </nut-tabbar>
 ```
 ### Prop
 
 ### nut-tabbar
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| bottom | 是否固定在页面底部 |Booble|false|
-| show | 选中标签的索引值 |number|0|
-| unactive-color | icon未激活的颜色 |string|#7d7e80|
-| active-color | icon激活的颜色 |string|#1989fa|
+| 字段           | 说明               | 类型   | 默认值  |
+|----------------|--------------------|--------|---------|
+| bottom         | 是否固定在页面底部 | Booble | false   |
+| show           | 选中标签的索引值   | number | 0       |
+| unactive-color | icon未激活的颜色   | string | #7d7e80 |
+| active-color   | icon激活的颜色     | string | #1989fa |
 
 ### tabbar-item
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| tab-title | 标签页的标题 | String | --
-| icon | 标签页显示的icon | String | --
-| href | 标签页的跳转链接 | String | --
-| num |页签右上角的数字角标，超出99之后为99+|Number|--
+| 字段      | 说明                                  | 类型   | 默认值 |
+|-----------|---------------------------------------|--------|--------|
+| tab-title | 标签页的标题                          | String | --     |
+| icon      | 标签页显示的[图标名称](#/icon) 或图片链接                       | String | --     |
+| href      | 标签页的跳转链接                      | String | --     |
+| num       | 页签右上角的数字角标，超出99之后为99+ | Number | --     |
 
 
 ### Event
 
-| 事件名称 | 说明 | 回调参数 
-|----- | ----- | ----- 
-| tabSwitch | 切换页签时触发事件 | 点击的数据和索引值
+| 事件名称  | 说明               | 回调参数           |
+|-----------|--------------------|--------------------|
+| tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |
 
 
 

src/packages/tabbar/index.scss

@@ -46,7 +46,7 @@
 
   .tips {
     position: absolute;
-    background: rgba(250, 44, 25, 1);
+    background: $tabbar-active-color;
     border: 1px solid rgba(255, 255, 255, 1);
     border-radius: 7px;
     text-align: center;

src/packages/tabbaritem/index.scss

@@ -15,7 +15,7 @@
 
   .tips {
     position: absolute;
-    background: rgba(250, 44, 25, 1);
+    background: $tabbar-active-color;
     border: 1px solid rgba(255, 255, 255, 1);
     border-radius: 7px;
     text-align: center;

src/packages/toast/demo.vue

@@ -33,28 +33,30 @@
 </template>
 
 <script>
+import { getCurrentInstance } from 'vue';
 import { createComponent } from '@/utils/create';
-import { Toast } from './index.ts';
 const { createDemo } = createComponent('toast');
 
 export default createDemo({
   setup() {
+    const { ctx } = getCurrentInstance();
+
     const textToast = msg => {
-      Toast.text(msg, { duration: 100000 });
+      ctx.$toast.text(msg, { duration: 100000 });
     };
     const successToast = msg => {
-      Toast.success(msg);
+      ctx.$toast.success(msg, { duration: 100000 });
     };
     const errorToast = msg => {
-      Toast.fail(msg);
+      ctx.$toast.fail(msg);
     };
     const warningToast = msg => {
-      Toast.warn(msg);
+      ctx.$toast.warn(msg);
     };
     const loadingToast = msg => {
-      Toast.loading(msg, { duration: 0, id: 'test' });
+      ctx.$toast.loading(msg, { duration: 0, id: 'test' });
       setTimeout(() => {
-        Toast.success('加载完成', { id: 'test', duration: 2000 });
+        ctx.$toast.success('加载完成', { id: 'test', duration: 2000 });
       }, 2000);
     };
     return {

src/packages/toast/index.vue

@@ -28,7 +28,11 @@
 import { toRefs, toRef, reactive, computed, watch, onMounted } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('toast');
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     id: String,
     msg: String,

src/styles/variables.scss

@@ -49,10 +49,10 @@ $button-block-line-height: 46px;
 $button-default-font-size: $font-size-2;
 $button-disabled-opacity: 0.68;
 $button-primary-color: $white;
-$button-primary-border-color: rgba(250, 44, 25, 1);
+$button-primary-border-color: $primary-color;
 $button-primary-background-color: linear-gradient(
   135deg,
-  rgba(250, 44, 25, 1) 0%,
+  $primary-color 0%,
   rgba(250, 63, 25, 1) 45%,
   rgba(250, 89, 25, 1) 83%,
   rgba(250, 100, 25, 1) 100%
@@ -75,8 +75,8 @@ $button-success-background-color: linear-gradient(
 );
 
 $button-danger-color: $white;
-$button-danger-border-color: rgba(250, 44, 25, 1);
-$button-danger-background-color: rgba(250, 44, 25, 1);
+$button-danger-border-color: $primary-color;
+$button-danger-background-color: $primary-color;
 $button-warning-color: $white;
 $button-warning-border-color: rgba(255, 158, 13, 1);
 $button-warning-background-color: linear-gradient(
@@ -184,7 +184,7 @@ $notify-height: 44px;
 
 $notify-base-background-color: linear-gradient(
   135deg,
-  rgba(250, 44, 25, 1) 0%,
+  $primary-color 0%,
   rgba(250, 63, 25, 1) 45%,
   rgba(250, 89, 25, 1) 83%,
   rgba(250, 100, 25, 1) 100%
@@ -208,6 +208,10 @@ $notify-warning-background-color: linear-gradient(
   rgba(255, 154, 13, 1) 100%
 );
 
+// tabbar
+
+$tabbar-active-color: $primary-color;
+
 view-block {
   display: block;
 }