Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/config.json

@@ -745,6 +745,7 @@
           "version": "3.0.0",
           "name": "CountUp",
           "taro": true,
+          "tarodoc": true,
           "sort": 12,
           "cName": "数字滚动",
           "type": "component",
@@ -755,6 +756,7 @@
         {
           "version": "3.0.0",
           "name": "NumberKeyboard",
+          "tarodoc": true,
           "taro": true,
           "sort": 13,
           "cName": "数字键盘",
@@ -803,6 +805,8 @@
         },
         {
           "version": "3.0.0",
+          "taro": false,
+          "tarodoc": true,
           "name": "Signature",
           "type": "component",
           "cName": "签名",
@@ -813,6 +817,8 @@
         },
         {
           "version": "3.0.0",
+          "taro": false,
+          "tarodoc": true,
           "name": "Luckycard",
           "type": "component",
           "cName": "刮刮卡",

src/packages/__VUE/luckycard/doc.taro.md

@@ -0,0 +1,87 @@
+# luckycard
+
+### 介绍
+
+由于 taro 对原生 canvas 的转换未完成。暂时不支持该组件转小程序的应用
+
+<!-- ### 安装
+
+```javascript
+import { createApp } from 'vue';
+import { Swiper } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Swiper);
+```
+
+## 代码演示
+
+### 基础用法
+
+`autoplay` 是否自动切换
+`interval` 自动切换时间间隔
+`current` 当前所在滑块的 index
+`indicator-dots` 是否显示面板指示点
+`indicator-color` 指示点颜色
+
+```html
+<nut-swiper current="1" indicator-dots="true" indicator-color="#426543" autoplay="true" interval="3000">
+   <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+  </nut-swiper-item>
+</nut-swiper>
+```
+
+### 自定义大小
+
+`previous-margin` 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
+`next-margin` 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
+
+```html
+<nut-swiper previous-margin="10px" next-margin="10px">
+   <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+  </nut-swiper-item>
+</nut-swiper>
+```
+
+### 垂直方向
+
+`vertical` 滑动方向是否为纵向
+
+
+```html
+<nut-swiper vertical="true">
+    <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+  </nut-swiper-item>
+</nut-swiper>
+``` -->
+

src/packages/__VUE/signature/doc.taro.md

@@ -0,0 +1,87 @@
+# signature 签名
+
+### 介绍
+
+由于 taro 对原生 canvas 的转换未完成。暂时不支持该组件转小程序的应用
+
+<!-- ### 安装
+
+```javascript
+import { createApp } from 'vue';
+import { Swiper } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Swiper);
+```
+
+## 代码演示
+
+### 基础用法
+
+`autoplay` 是否自动切换
+`interval` 自动切换时间间隔
+`current` 当前所在滑块的 index
+`indicator-dots` 是否显示面板指示点
+`indicator-color` 指示点颜色
+
+```html
+<nut-swiper current="1" indicator-dots="true" indicator-color="#426543" autoplay="true" interval="3000">
+   <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+  </nut-swiper-item>
+</nut-swiper>
+```
+
+### 自定义大小
+
+`previous-margin` 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
+`next-margin` 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
+
+```html
+<nut-swiper previous-margin="10px" next-margin="10px">
+   <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+  </nut-swiper-item>
+</nut-swiper>
+```
+
+### 垂直方向
+
+`vertical` 滑动方向是否为纵向
+
+
+```html
+<nut-swiper vertical="true">
+    <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
+  </nut-swiper-item>
+</nut-swiper>
+``` -->
+

src/packages/__VUE/tab/demo.vue

@@ -18,7 +18,11 @@
 
     <h2>defaultIndex设置默认显示tab,iconType为half时切换选中icon样式</h2>
     <h2>switchTab监听切换tab返回事件</h2>
-    <nut-tab :default-index="1" @switch-tab="switchTab" icon-type="half">
+    <nut-tab
+      :default-index="defaultIndexs"
+      @switch-tab="switchTab"
+      icon-type="half"
+    >
       <nut-tab-panel tab-title="全部"
         ><p class="content">这里是页签全部内容</p></nut-tab-panel
       >
@@ -160,6 +164,7 @@
 <script lang="ts">
 import { ref, reactive, toRefs } from 'vue';
 import { createComponent } from '../../utils/create';
+import func from './vue-temp/vue-editor-bridge';
 const { createDemo } = createComponent('tab');
 export default createDemo({
   props: {},
@@ -174,16 +179,18 @@ export default createDemo({
         }
       ]
     });
+    const defaultIndexs = ref(1);
     function changeList() {
       resData.editList.push({
         title: '标签' + resData.editList.length
       });
     }
-    function switchTab(activeInddex: number, event: MouseEvent) {
-      console.log(activeInddex, event);
+    function switchTab(activeInddex: number) {
+      console.log(activeInddex);
     }
     return {
       ...toRefs(resData),
+      defaultIndexs,
       changeList,
       switchTab
     };

src/packages/__VUE/tab/doc.md

@@ -19,6 +19,7 @@ app.use(TabPanel);
 app.use(Swiper);
 app.use(SwiperItem);
 
+
 ```
 
 ## 基础样式，默认 tab-title 宽度均分相等
@@ -61,18 +62,16 @@ switchTab 监听切换 tab 返回事件
   >
 </nut-tab>
 <script lang="ts">
-  import { createComponent } from '@/packages/utils/create';
-  const { createDemo } = createComponent('tab');
-  export default createDemo({
+  export default {
     setup() {
-      function switchTab(activeInddex: number, event: MouseEvent) {
-        console.log(activeInddex, event);
+      function switchTab(activeInddex: number) {
+        console.log(activeInddex);
       }
       return {
         switchTab
       };
     }
-  });
+  }
 </script>
 ```
 
@@ -207,9 +206,7 @@ switchTab 监听切换 tab 返回事件
 </div>
 <script lang="ts">
 import { ref , reactive,toRefs } from "vue";
-import { createComponent } from '../../utils/create';
-const { createDemo } = createComponent('tab');
-export default createDemo({
+export default {
   setup() {
     const resData = reactive({
       editList:[
@@ -231,7 +228,7 @@ export default createDemo({
       changeList
     };
   }
-});
+}
 </script>
 ```
 
@@ -258,4 +255,4 @@ export default createDemo({
 
 | 事件名称   | 说明               | 回调参数               |
 | ---------- | ------------------ | ---------------------- |
-| switch-tab | 切换页签时触发事件 | 点击的索引值和触发元素 |
+| switch-tab | 切换页签时触发事件 | 当前活动状态的索引值 |

src/packages/__VUE/tab/index.taro.vue

@@ -11,7 +11,7 @@
         class="tab-title-scroll"
         :scroll-with-animation="true"
       >
-        <view :class="['tab-title', randomTitleClass, iconType]">
+        <view :class="['tab-title', randomTitleClass, iconType]" ref="navlist">
           <view
             :class="[
               'tab-title-box',
@@ -95,7 +95,7 @@ export default create({
   components: {
     TabTitle
   },
-  emits: ['switchTab'],
+  emits: ['switch-tab'],
   setup(props, ctx) {
     const titles: Array<DataTitle> = reactive([]);
     const isLock = ref(false);
@@ -162,7 +162,6 @@ export default create({
     function switchTitle(index: number, event) {
       activeIndex.value = index;
       centerTitle(index);
-      ctx.emit('switchTab', index, event);
     }
     function initTitle() {
       titles.length = 0;
@@ -203,6 +202,15 @@ export default create({
         initTitle();
       }
     );
+    watchEffect(() => {
+      activeIndex.value = props.defaultIndex;
+    });
+    watch(
+      () => activeIndex.value,
+      (val, oldVal) => {
+        ctx.emit('switch-tab', activeIndex.value);
+      }
+    );
     return {
       swiperClassName,
       titles,

src/packages/__VUE/tab/index.vue

@@ -89,6 +89,7 @@ export default create({
   components: {
     TabTitle
   },
+  emits: ['switch-tab'],
   setup(props, ctx) {
     const titles: Array<DataTitle> = reactive([]);
     const isLock = ref(false);
@@ -127,7 +128,6 @@ export default create({
       }
     }
     const changeTab = (index: number) => {
-      console.log(index);
       activeIndex.value = index;
       centerTitle(index);
 
@@ -140,6 +140,7 @@ export default create({
       nutuiSwiper.value.to(index);
     }
     function initTitle() {
+      console.log(11);
       titles.length = 0;
       if (ctx.slots.default) {
         const slots: VNode[] =
@@ -171,6 +172,15 @@ export default create({
         initTitle();
       }
     );
+    watchEffect(() => {
+      activeIndex.value = props.defaultIndex;
+    });
+    watch(
+      () => activeIndex.value,
+      (val, oldVal) => {
+        ictx.emit('switch-tab', activeIndex.value);
+      }
+    );
     return {
       swiperClassName,
       titles,

src/sites/mobile-taro/vue/src/nav/pages/tab/index.vue

@@ -18,7 +18,11 @@
 
     <h2>defaultIndex设置默认显示tab，iconType为half时切换选中icon样式</h2>
     <h2>switchTab监听切换tab返回事件</h2>
-    <nut-tab :default-index="1" @switch-tab="switchTab" icon-type="half">
+    <nut-tab
+      :default-index="currIndex"
+      @switch-tab="switchTab"
+      icon-type="half"
+    >
       <nut-tab-panel tab-title="全部"
         ><p class="content">这里是页签全部内容</p></nut-tab-panel
       >
@@ -155,17 +159,23 @@ export default {
         }
       ]
     });
+    const currIndex = ref(0);
     function changeList() {
       resData.editList.push({
         title: '标签' + resData.editList.length
       });
     }
-    function switchTab(activeInddex: number, event: MouseEvent) {
-      console.log(activeInddex, event);
+    function switchTab(activeInddex: number) {
+      console.log(activeInddex);
+    }
+    function changeIndex() {
+      let aa = currIndex.value;
+      currIndex.value = aa + 1;
     }
     return {
       ...toRefs(resData),
       changeList,
+      currIndex,
       switchTab
     };
   }