feat: config.js冲突问题解决

src/config.js

@@ -246,6 +246,15 @@ module.exports = {
           show: true,
           desc: '下拉菜单组件',
           author: 'vickyYE'
+        },
+        {
+          name: 'tabbar',
+          sort: 2,
+          cName: '标签栏组件',
+          type: 'component',
+          show: true,
+          desc: '标签栏组件',
+          author: 'Drjingfubo'
         }
       ]
     },

src/packages/input/demo.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="demo-nopading">
     <h2>基础用法</h2>
-    <nut-input v-model:value="state.val1" @change="change" @focus="focus"  @blur="blur" label="标题：" />
+    <nut-input
+      v-model:value="state.val1"
+      @change="change"
+      @focus="focus"
+      @blur="blur"
+      label="标题："
+    />
 
     <nut-input
       placeholder="请输入文本"
@@ -9,7 +15,7 @@
       v-model:value="state.val0"
       :requireShow="true"
       label="标题："
-     @clear="clear"
+      @clear="clear"
     />
     <h2>禁用输入框</h2>
     <nut-input
@@ -105,15 +111,15 @@ export default createDemo({
     const change = (num: string | number) => {
       console.log('change: ', num);
     };
-    const focus=(num:string|number)=>{
-      console.log("focus:",num)
-    }
-    const blur=(num:string|number)=>{
-      console.log("blur:",num)
-    }
-    const clear=(num:string|number)=>{
-      console.log("clear:",num)
-    }
+    const focus = (num: string | number) => {
+      console.log('focus:', num);
+    };
+    const blur = (num: string | number) => {
+      console.log('blur:', num);
+    };
+    const clear = (num: string | number) => {
+      console.log('clear:', num);
+    };
     return {
       state,
       change,

src/packages/input/index.scss

@@ -1,5 +1,5 @@
 .nut-input {
-    position: relative;
+  position: relative;
   width: 100%;
   padding: 10px 0px 10px 25px;
   display: flex;

src/packages/input/index.vue

@@ -43,7 +43,7 @@
       @click="handleClear"
       class="nut-textinput-clear"
       v-if="!disableClear && !readonly"
-      v-show="type !== 'textarea'  && active"
+      v-show="type !== 'textarea' && active"
     >
       <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
         <path
@@ -102,11 +102,11 @@ export default create({
     }
   },
   components: {},
-  emits: ['change', 'update:value', 'blur', 'focus','clear'],
+  emits: ['change', 'update:value', 'blur', 'focus', 'clear'],
 
   setup(props, { emit }) {
     interface Events {
-      eventName: 'change' | 'focus'|'blur';
+      eventName: 'change' | 'focus' | 'blur';
       params: (string | number | Event)[];
     }
 
@@ -159,9 +159,9 @@ export default create({
       if (props.type == 'number') {
         val = formatNumber(val, false);
       }
-       state.textNum = val.length;
+      state.textNum = val.length;
       // input.value = val;
-       //state.curretvalue = val;
+      //state.curretvalue = val;
       emitChange([
         {
           eventName: 'update:value',
@@ -190,12 +190,11 @@ export default create({
       ]);
     };
     const valueBlur = (e: Event) => {
-      
-      setTimeout(()=>{
-active.value = false;
-      },400)
+      setTimeout(() => {
+        active.value = false;
+      }, 400);
       const input = e.target as HTMLInputElement;
-       let val = input.value;
+      let val = input.value;
       val = String(val);
       emitChange([
         {
@@ -208,8 +207,8 @@ active.value = false;
         }
       ]);
     };
-    const handleClear=()=>{
-      const val="";
+    const handleClear = () => {
+      const val = '';
       emitChange([
         {
           eventName: 'update:value',
@@ -220,7 +219,7 @@ active.value = false;
           params: [val]
         }
       ]);
-    }
+    };
     return {
       value,
       requireShow,

src/packages/tabbar/demo.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-tabbar :tab-List="tabList" @tab-switch="tabSwitch"></nut-tabbar>
+
+    <h2>徽标提示</h2>
+    <nut-tabbar :tab-List="tabList1" @tab-switch="tabSwitch"></nut-tabbar>
+
+    <h2>自定义颜色</h2>
+    <nut-tabbar
+      unactiveColor="#7d7e80"
+      activeColor="#1989fa"
+      :tab-List="tabList"
+      @tab-switch="tabSwitch"
+    ></nut-tabbar>
+    <h2>三个icon的tabbar</h2>
+    <nut-tabbar
+      unactiveColor="#7d7e80"
+      activeColor="#1989fa"
+      :tab-List="tabList2"
+      @tab-switch="tabSwitch"
+    ></nut-tabbar>
+    <h2>固定底部，可自由跳转</h2>
+    <nut-tabbar
+      :tab-List="tabList3"
+      @tab-switch="tabSwitch"
+      :bottom="true"
+    ></nut-tabbar>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, reactive, toRefs } from 'vue';
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('tabbar');
+export default createDemo({
+  props: {},
+  setup() {
+    const tabList = [
+      {
+        tabTitle: '首页',
+        curr: false,
+        icon: 'home'
+      },
+      {
+        tabTitle: '分类',
+        curr: false,
+        icon: 'category'
+      },
+      {
+        tabTitle: '发现',
+        curr: false,
+        icon: 'find'
+      },
+      {
+        tabTitle: '购物车',
+        curr: false,
+        icon: 'cart'
+      },
+      {
+        tabTitle: '我的',
+        curr: false,
+        icon: 'my'
+      }
+    ];
+    const tabList1 = [
+      {
+        tabTitle: '首页',
+        curr: false,
+        icon: 'home'
+      },
+      {
+        tabTitle: '分类',
+        curr: false,
+        icon: 'category'
+      },
+      {
+        tabTitle: '发现',
+        curr: false,
+        icon: 'find'
+      },
+      {
+        tabTitle: '购物车',
+        curr: true,
+        icon: 'cart',
+        num: '12'
+      },
+      {
+        tabTitle: '我的',
+        curr: false,
+        icon: 'my'
+      }
+    ];
+    const tabList2 = [
+      {
+        tabTitle: '首页',
+        curr: false,
+        icon: 'home'
+      },
+      {
+        tabTitle: '分类',
+        curr: false,
+        icon: 'category'
+      },
+      {
+        tabTitle: '我的',
+        curr: false,
+        icon: 'my'
+      }
+    ];
+    const tabList3 = [
+      {
+        tabTitle: '首页',
+        curr: false,
+        icon: 'home'
+      },
+      {
+        tabTitle: '分类',
+        curr: false,
+        icon: 'category'
+      },
+      {
+        tabTitle: '发现',
+        curr: false,
+        icon: 'find'
+      },
+      {
+        tabTitle: '购物车',
+        curr: false,
+        icon: 'cart',
+        num: '122'
+      },
+      {
+        tabTitle: '我的',
+        curr: false,
+        icon: 'my'
+      }
+    ];
+    function tabSwitch(item: object, index: number) {
+      console.log(item, index);
+    }
+    return {
+      ...reactive({
+        tabList,
+        tabList1,
+        tabList2,
+        tabList3
+      }),
+      tabSwitch
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/packages/tabbar/doc.md

@@ -0,0 +1,258 @@
+# Tabbar 列表组件
+
+### 介绍
+
+XXXXXX
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Tabbar } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Tabbar);
+
+```
+
+## 代码示例
+
+### 基础用法
+
+``` html
+<nut-tabbar :tab-List="tabList" @tab-switch="tabSwitch"></nut-tabbar>
+```
+
+``` javascript
+// ...
+  setup() {
+    const tabList = [
+      {
+        tabTitle: '首页',
+        curr: false,
+        icon: 'home',
+      },
+      {
+        tabTitle: '分类',
+        curr: false,
+        icon: 'category',
+      },
+      {
+        tabTitle: '发现',
+        curr: false,
+        icon: 'find',
+      },
+      {
+        tabTitle: '购物车',
+        curr: false,
+        icon: 'cart',
+      },
+      {
+        tabTitle: '我的',
+        curr: false,
+        icon: 'my',
+      },
+    ];
+    function tabSwitch(item: object, index: number) {
+      console.log(item, index);
+    }
+    return {
+      ...reactive({
+        tabList,
+      }),
+      tabSwitch,
+    };
+  },
+// ...
+```
+
+### 徽标提示
+
+``` html
+<nut-tabbar :tab-List="tabList" @tab-switch="tabSwitch"></nut-tabbar>
+```
+
+``` javascript
+// ...
+  setup() {
+    const tabList = [
+      {
+        tabTitle: '首页',
+        curr: false,
+        icon: 'home',
+      },
+      {
+        tabTitle: '分类',
+        curr: false,
+        icon: 'category',
+      },
+      {
+        tabTitle: '发现',
+        curr: false,
+        icon: 'find',
+      },
+      {
+        tabTitle: '购物车',
+        curr: false,
+        icon: 'cart',
+        num: '12'
+      },
+      {
+        tabTitle: '我的',
+        curr: false,
+        icon: 'my',
+      },
+    ];
+    function tabSwitch(item: object, index: number) {
+      console.log(item, index);
+    }
+    return {
+      ...reactive({
+        tabList,
+      }),
+      tabSwitch,
+    };
+  },
+// ...
+```
+
+### 自定义颜色
+
+``` html
+<nut-tabbar :tab-List="tabList" @tab-switch="tabSwitch"></nut-tabbar>
+```
+
+``` javascript
+// ...
+  setup() {
+    const tabList = [
+      {
+        tabTitle: '首页',
+        curr: false,
+        icon: 'home',
+      },
+      {
+        tabTitle: '分类',
+        curr: false,
+        icon: 'category',
+      },
+      {
+        tabTitle: '发现',
+        curr: false,
+        icon: 'find',
+      },
+      {
+        tabTitle: '购物车',
+        curr: false,
+        icon: 'cart',
+        num: '12'
+      },
+      {
+        tabTitle: '我的',
+        curr: false,
+        icon: 'my',
+      },
+    ];
+    function tabSwitch(item: object, index: number) {
+      console.log(item, index);
+    }
+    return {
+      ...reactive({
+        tabList,
+      }),
+      tabSwitch,
+    };
+  },
+// ...
+```
+
+### 三个图标的标签栏
+
+``` html
+<nut-tabbar :tab-List="tabList" @tab-switch="tabSwitch"></nut-tabbar>
+```
+
+``` javascript
+// ...
+  setup() {
+        const tabList = [
+      {
+        tabTitle: '首页',
+        curr: false,
+        icon: 'home'
+      },
+      {
+        tabTitle: '分类',
+        curr: false,
+        icon: 'category'
+      },
+      {
+        tabTitle: '我的',
+        curr: false,
+        icon: 'my'
+      }
+    ];
+    function tabSwitch(item: object, index: number) {
+      console.log(item, index);
+    }
+    return {
+      ...reactive({
+        tabList,
+      }),
+      tabSwitch,
+    };
+  },
+// ...
+```
+
+### 固定底部，可自由跳转
+
+``` html
+<nut-tabbar :tab-List="tabList" @tab-switch="tabSwitch" :bottom="true" ></nut-tabbar>
+```
+
+``` javascript
+// ...
+  setup() {
+        const tabList = [
+      {
+        tabTitle: '首页',
+        curr: false,
+        icon: 'home'
+      },
+      {
+        tabTitle: '分类',
+        curr: false,
+        icon: 'category'
+      },
+      {
+        tabTitle: '发现',
+        curr: false,
+        icon: 'find'
+      },
+      {
+        tabTitle: '购物车',
+        curr: false,
+        icon: 'cart',
+        num: '122'
+      },
+      {
+        tabTitle: '我的',
+        curr: false,
+        icon: 'my'
+      }
+    ];
+    function tabSwitch(item: object, index: number) {
+      console.log(item, index);
+    }
+    return {
+      ...reactive({
+        tabList,
+      }),
+      tabSwitch,
+    };
+  },
+// ...
+```
+
+
+

src/packages/tabbar/index.scss

@@ -0,0 +1,91 @@
+.nut-tabbar {
+  border: 0px;
+  border-bottom: 1px solid #eee;
+  border-top: 1px solid #eee;
+  width: 100%;
+  display: flex;
+  height: 50px;
+  box-sizing: border-box;
+  background: #fff;
+
+  &:last-child {
+    border-right: 0;
+  }
+}
+
+.bottom {
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  z-index: 888;
+}
+
+.tabbar-nav {
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  color: $text-color;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card {
+  border-right: 1px solid #eee;
+}
+
+// .curr {
+//   color: $primary-color;
+// }
+
+.icon-box {
+  padding: 0px;
+  display: inline-block;
+  position: relative;
+
+  .tips {
+    position: absolute;
+    background: rgba(250, 44, 25, 1);
+    border: 1px solid rgba(255, 255, 255, 1);
+    border-radius: 7px;
+    text-align: center;
+
+    top: -2px;
+    right: -7px;
+    box-shadow: 0 0 0 1px #fff;
+    font-size: $font-size-1;
+    color: #fff;
+  }
+
+  .num {
+    line-height: 11px;
+    font-family: PingFangSC-Regular;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 1);
+    padding: 1px 2px 2px 3px;
+  }
+  .nums {
+    line-height: 10px;
+    font-family: PingFangSC-Regular;
+    font-size: 10px;
+    color: rgba(255, 255, 255, 1);
+    padding: 2px 1px 2px 2px;
+  }
+}
+
+.icon-box .icon {
+  display: block;
+  background-size: 100% 100%;
+  background-position: center center;
+}
+
+.icon-box .tabbar-nav-word {
+  font-size: 10px;
+  display: block;
+}
+
+.icon-box .big-word {
+  font-size: 16px;
+  line-height: 1;
+}

src/packages/tabbar/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <view class="nut-tabbar" :class="{ bottom: bottom }">
+    <view
+      class="tabbar-nav"
+      v-for="(item, index) in tabList"
+      :key="index"
+      :style="{ color: index == currIndex ? activeColor : unactiveColor }"
+      :class="type"
+      @click="switchTabs(item, index)"
+    >
+      <view class="icon-box">
+        <view class="tips num" v-if="item.num && item.num <= 99">
+          {{ item.num }}
+        </view>
+        <view class="tips nums" v-else-if="item.num && item.num > 100">{{
+          '99+'
+        }}</view>
+        <view v-if="item.icon">
+          <nut-icon class="icon" :size="size" :name="item.icon"></nut-icon>
+        </view>
+        <view :class="['tabbar-nav-word', { 'big-word': !item.icon }]">{{
+          item.tabTitle
+        }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { ref, onMounted } from 'vue';
+import { createComponent } from '@/utils/create';
+const { create } = createComponent('tabbar');
+type obj = {
+  tabTitle: string;
+  curr: boolean;
+  icon: string;
+  href: string;
+  color: string;
+};
+export default create({
+  props: {
+    tabList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    bottom: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'base'
+    },
+    size: {
+      type: String,
+      default: '20px'
+    },
+    unactiveColor: {
+      type: String,
+      default: '#000000'
+    },
+    activeColor: {
+      type: String,
+      default: '#fa2c19'
+    }
+  },
+  components: {},
+  setup(props, { emit }) {
+    console.log(props);
+    const currIndex: any = ref(0);
+    const { tabList } = props;
+    function initbar() {
+      tabList.forEach((item: any, index) => {
+        if (item.curr) {
+          currIndex.value = index;
+        }
+      });
+    }
+    // 点击以后切换
+    function switchTabs(item: obj, index: number) {
+      currIndex.value = index;
+      if (item.href) {
+        window.location.href = item.href;
+      }
+      emit('tab-switch', item, index);
+    }
+    onMounted(() => {
+      initbar();
+    });
+    return {
+      currIndex,
+      tabList,
+      switchTabs
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/sites/doc/views/Main.vue

@@ -6,9 +6,50 @@
       <div class="content-smile"> </div>
       <div class="content-subTitle">一款具有京东风格的VUE组件</div>
       <div class="content-button">
-        <input class="leftButton" type="button" value="开始使用" />
-        <input class="rightButton" type="button" value="扫码体验" />
+        <div class="leftButton">
+          <div class="leftButtonText">开始使用</div>
+        </div>
+        <div class="rightButton">
+          <div class="rightButtonText">扫码体验</div>
+
+          <div class="qrcodepart">
+            <div class="qrcode-text"> 请使用手机扫码体验 </div>
+            <div class="qrcode"> </div>
+          </div>
+        </div>
+        <iframe
+          style="margin-left: 20px"
+          src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
+          frameborder="0"
+          scrolling="0"
+          width="170"
+          height="30"
+          title="GitHub"
+        ></iframe>
       </div>
+
+      <!-- <div style="display: flex; align-items: center">
+        <a href="#" class="leftButton">开始使用</a>
+        <a href="javascript:;" class="rightButton ">
+          扫码体验
+          <a>
+            <span>请使用手机扫码体验</span>
+            <img
+              src="https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png"
+              alt
+            />
+          </a>
+        </a>
+        <iframe
+          style="margin-left: 20px"
+          src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
+          frameborder="0"
+          scrolling="0"
+          width="170"
+          height="30"
+          title="GitHub"
+        ></iframe>
+      </div> -->
     </div>
     <div class="content-right">
       <div class="content-img"> </div>
@@ -40,6 +81,17 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
 .doc-content-index {
   display: flex;
   flex: 1;
@@ -49,35 +101,50 @@ export default defineComponent({
     padding: 15% 0 0 8.8%;
     // margin: auto 0;
     width: 1300px;
-    min-width: 500px;
+    min-width: 550px;
     .content-title {
       // line-height: 36px;
       font-family: PingFangSC-Medium;
-      font-size: 50px;
+      font-size: 42px;
       color: rgba(255, 255, 255, 1);
+      animation: fadeInLeft 1s both;
     }
     .content-smile {
       margin-top: 10px;
-      width: 69px;
-      height: 27px;
+      width: 44px;
+      height: 17px;
       background: url(https://storage.360buyimg.com/imgtools/09516173b9-9b32b9d0-3864-11eb-9a56-0104487ad2b0.png)
         no-repeat;
       background-size: cover;
+      animation: fadeInLeft 1s both 0.5s;
     }
     .content-subTitle {
       margin-top: 12px;
       font-family: PingFangSC-Regular;
       font-size: 20px;
       color: rgba(255, 255, 255, 1);
+      animation: fadeInLeft 1s both 0.5s;
     }
     .content-button {
+      position: relative;
+      display: flex;
       margin-top: 40px;
+      iframe {
+        align-self: center;
+        animation: fadeInLeft 1s both 1.2s;
+      }
       .leftButton {
+        display: flex;
+        .leftButtonText {
+          align-self: center;
+          margin: auto;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 1);
+        }
         font-family: PingFangSC-Regular;
-        font-size: 20px;
-        color: rgba(255, 255, 255, 1);
-        width: 170px;
-        height: 50px;
+        width: 150px;
+        height: 40px;
+        animation: fadeInLeft 1s both 1.2s;
         background: linear-gradient(
           135deg,
           rgba(250, 25, 44, 1) 0%,
@@ -86,16 +153,54 @@ export default defineComponent({
           rgba(250, 63, 25, 1) 100%
         );
         border-radius: 29px;
+        cursor: pointer;
       }
       .rightButton {
-        margin-left: 30px;
-        font-size: 20px;
-        color: rgba(227, 44, 54, 1);
-        width: 170px;
-        height: 50px;
+        display: flex;
+        .rightButtonText {
+          align-self: center;
+          margin: auto;
+          font-size: 14px;
+          color: rgba(227, 44, 54, 1);
+        }
+        margin-left: 26px;
+        width: 150px;
+        height: 40px;
         border: 1px solid rgba(250, 44, 25, 1);
         border-radius: 29px;
         background-color: #000000;
+        cursor: pointer;
+        animation: fadeInLeft 1s both 1.2s;
+        &:hover {
+          .qrcodepart {
+            display: block;
+          }
+        }
+      }
+      .qrcodepart {
+        display: none;
+        position: absolute;
+        left: 0;
+        top: 50px;
+        padding: 4px;
+        width: 166px;
+        border-radius: 6px;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.11);
+        .qrcode-text {
+          font-size: 14px;
+          color: rgba(51, 51, 51, 1);
+          margin-top: 10px;
+          margin-left: 6px;
+        }
+        .qrcode {
+          width: 160px;
+          height: 160px;
+          margin: 0 auto;
+          background: url(https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png)
+            no-repeat;
+          background-size: cover;
+        }
       }
     }
   }
@@ -105,7 +210,7 @@ export default defineComponent({
     .content-img {
       width: 900px;
       height: 514px;
-      background: url(https://storage.360buyimg.com/imgtools/732c3242e9-9b1946b0-391a-11eb-8a8d-55c57d054ae1.png)
+      background: url(https://storage.360buyimg.com/imgtools/2386827bf5-0c3c6fb0-444d-11eb-a71e-e96ecf999ecc.png)
         no-repeat;
       background-size: cover;
     }