Merge branch 'v2-dev' of https://github.com/jdf2e/nutui into v2-dev

.github/ISSUE_TEMPLATE/bug_report.md

@@ -31,6 +31,6 @@ assignees: ''
 ## 相关环境信息
 - **操作系统**：
 - **Node 版本**：
-- **NutUI 版本**：
+- **NutUI 版本**： @nutui/nutui@2.x.x  or @nutui/nutui-jdl@1.x.x
 - **Vue 版本**：
 - **引用方式**：  CDN / NPM ？

CHANGELOG.md

@@ -1,3 +1,21 @@
+## 2.2.9
+
+`2020-08-19`
+
+* :sparkles: upd(Tab)：title支持slot和badge #307 @weiquanju
+* :sparkles: upd(Popup)：新增组合弹框 @yangkaixuan
+* :bug: fix(Countup)：样式修复 @Ymm0008
+* :bug: fix(Switch)：修复 demo 文字不居中问题 @szg2008
+* :bug: fix(Range)：区间选择器滑动异常 @undo03
+* :bug: fix(Picker)：更新 demo 和 doc 文档 @irisSong
+* :bug: fix(Toast)：props 新增 coverClass、coverStyle @yangkaixuan
+* :bug: fix(Swiper)：销毁钩子内计时器清空无效 #262 @richard1015
+* :bug: fix(TextBox)： 修复 demo 示例问题 @guoxiao158
+* :bug: fix(Signature)： 修复的leave事件 @guoxiao158
+* :bug: fix(Stepper)：修复 demo 加减精度问题 @layman666
+* :bug: fix(Cell)：修复 demo 示例头像不居中问题 #295 @zhenyulei
+* :zap: doc：ActionSheet、start article 文档修改 @richard1015 @weiquanju
+
 ## 2.2.8
 
 `2020-07-28`

docs/design.md

@@ -9,6 +9,11 @@
 <ul class="article">
 <li>
 
+#### [NutUI 落地实践-让组件库服务慧采协同采购业务](https://jelly.jd.com/article/5f30a8ca645f82014b842b81)  
+<img width="300" src="https://img13.360buyimg.com/ling/jfs/t1/119128/31/14648/534724/5f30b5c3E97731164/b21b7e1e705dd451.png" />
+</li>
+<li>
+
 #### [NutUI 实战--持续升级企业业务之福礼](https://jelly.jd.com/article/5f10308affb8ec014f4f326a)  
 <img width="300" src="https://img30.360buyimg.com/ling/jfs/t1/112680/27/12443/129918/5f10250aEe0c7f88c/8a1c85b3868cf4be.jpg" />
 </li>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",
@@ -65,7 +65,7 @@
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-object-assign": "^7.8.3",
-    "@nutui/cli": "^0.3.6",
+    "@nutui/cli": "^0.3.8",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
     "@typescript-eslint/parser": "^2.16.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",

src/packages/actionsheet/doc.md

@@ -189,7 +189,7 @@ export default {
     chooseTagValue="确定"
     cancelTxt="取消"
     @close="switchActionSheet"
-    @choos="choose"
+    @choose="choose"
 >
     <span slot="title"><label>确定删除吗？</label></span>
     <span slot="sub-title">删除之后不能，描述信息，删除之后不能，描述信息</span>

src/packages/address/doc.md

@@ -1,5 +1,7 @@
 # Address 地址选择
 
+> 按需加载请加载对应依赖组件 Icon Popup
+
 ## 选择自定义地址
 
 ```html

src/packages/signature/signature.vue

@@ -42,7 +42,7 @@ export default {
       canvasWidth: 0,
       ctx: null,
       isSupportTouch: 'ontouchstart' in window,
-      events: 'ontouchstart' in window ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']
+      events: 'ontouchstart' in window ? ['touchstart', 'touchmove', 'touchend', 'touchleave'] : ['mousedown', 'mousemove', 'mouseup', 'mouseleave']
     };
   },
   components: {
@@ -66,9 +66,13 @@ export default {
       this.ctx.beginPath();
       this.ctx.lineWidth = this.lineWidth;
       this.ctx.strokeStyle = this.strokeStyle;
-      (this.moveEventHandler = this.moveEventHandler.bind(this)), (this.endEventHandler = this.endEventHandler.bind(this));
+      (this.moveEventHandler = this.moveEventHandler.bind(this)),
+        (this.leaveEventHandler = this.leaveEventHandler.bind(this)),
+        (this.endEventHandler = this.endEventHandler.bind(this));
+
       this.$refs.canvas.addEventListener(this.events[1], this.moveEventHandler, false);
       this.$refs.canvas.addEventListener(this.events[2], this.endEventHandler, false);
+      this.$refs.canvas.addEventListener(this.events[3], this.leaveEventHandler, false);
     },
 
     moveEventHandler(event) {
@@ -89,8 +93,13 @@ export default {
       this.$refs.canvas.removeEventListener(this.events[1], this.moveEventHandler, false);
       this.$refs.canvas.removeEventListener(this.events[2], this.endEventHandler, false);
     },
-
+    leaveEventHandler(event) {
+      event.preventDefault();
+      this.$refs.canvas.removeEventListener(this.events[1], this.moveEventHandler, false);
+      this.$refs.canvas.removeEventListener(this.events[2], this.endEventHandler, false);
+    },
     clear(isUnEmit) {
+      this.$refs.canvas.addEventListener(this.events[2], this.endEventHandler, false);
       this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
       this.ctx.closePath();
       if (!isUnEmit) {

src/packages/swiper/swiper.vue

@@ -398,8 +398,8 @@ export default {
     this.updateEvent();
   },
   destroyed() {
-    this.timer = null;
-    this.domTimer = null;
+    this.timer && clearInterval(this.timer);
+    this.domTimer && clearTimeout(this.domTimer);
   },
   activated() {
     if (this.keepAlive) {
@@ -409,8 +409,8 @@ export default {
   },
   deactivated() {
     this.keepAlive = true;
-    this.timer = null;
-    this.domTimer = null;
+    this.timer && clearInterval(this.timer);
+    this.domTimer && clearTimeout(this.domTimer);
   }
 };
 </script>

src/packages/tab/demo.vue

@@ -87,6 +87,31 @@
       <nut-button @click="resetHandler" type="light">重置Tab页面</nut-button>
       <nut-button @click="clickHandler">更新Tab页面</nut-button>
     </div>
+
+    <h4>支持slot</h4>
+
+    <nut-tab :def-index="defIndex" :initData="slotTabs" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :is-show-line="false">
+      <nut-tab-panel
+        v-for="value in slotTabs"
+        v-bind:key="value.tabTitle"
+        :tab-title="value.tabTitle"
+        :tab-slot="value.slot"
+        v-html="value.content"
+      ></nut-tab-panel>
+      <template v-slot:customSlot="{ item }">{{ item.tabSlot }} {{ item.tabTitle }}</template>
+    </nut-tab>
+
+    <h4>支持徽标badge</h4>
+
+    <nut-tab :def-index="defIndex" :initData="badgeTabs" @tab-switch="tabSwitch" :contentShow="true">
+      <nut-tab-panel
+        v-for="value in badgeTabs"
+        v-bind:key="value.tabTitle"
+        :tab-title="value.tabTitle"
+        :badge="value.badge"
+        v-html="value.content"
+      ></nut-tab-panel>
+    </nut-tab>
   </div>
 </template>
 
@@ -141,6 +166,47 @@ export default {
           iconUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
           content: '<p>电影票内容</p>'
         }
+      ],
+      slotTabs: [
+        {
+          tabTitle: '衣物',
+          slot: 'customSlot',
+          content: '<p>衣物内容</p>'
+        },
+        {
+          tabTitle: '日用品',
+          slot: '',
+          content: '<p>日用品内容</p>'
+        }
+      ],
+      badgeTabs: [
+        {
+          tabTitle: '衣物',
+          badge: {
+            value: 10
+          },
+          content: '<p>衣物内容</p>'
+        },
+        {
+          tabTitle: '日用品',
+          badge: {
+            value: 100,
+            max: 99
+          },
+          content: '<p>日用品内容</p>'
+        },
+        {
+          tabTitle: '运动器材',
+          badge: {
+            value: 100,
+            isDot: true
+          },
+          content: '<p>运动器材内容</p>'
+        },
+        {
+          tabTitle: '电影票',
+          content: '<p>电影票内容</p>'
+        }
       ]
     };
   },

src/packages/tab/doc.md

@@ -219,6 +219,106 @@ export default {
 };
 ```
 
+## 支持slot
+
+```html
+<nut-tab :def-index="defIndex" :initData="slotTabs" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :is-show-line="false">
+  <nut-tab-panel
+    v-for="value in slotTabs"
+    v-bind:key="value.tabTitle"
+    :tab-title="value.tabTitle"
+    :tab-slot="value.slot"
+    v-html="value.content"
+  ></nut-tab-panel>
+  <template v-slot:customSlot="{item}">{{ item.tabSlot }} {{ item.tabTitle }}</template>
+</nut-tab>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      defIndex: 1,
+      positionNavCurr:'top',
+      slotTabs: [
+        {
+          tabTitle: '衣物',
+          slot: 'customSlot',
+          content: '<p>衣物内容</p>'
+        },
+        {
+          tabTitle: '日用品',
+          slot: '',
+          content: '<p>日用品内容</p>'
+        }
+      ],
+    };
+  },
+  methods: {
+      tabSwitch:function(index,event){
+        console.log(index+'--'+event.target);
+      },
+};
+```
+
+## 支持徽标badge
+
+
+```html
+<nut-tab :def-index="defIndex" :initData="badgeTabs" @tab-switch="tabSwitch" :contentShow="true">
+  <nut-tab-panel
+    v-for="value in badgeTabs"
+    v-bind:key="value.tabTitle"
+    :tab-title="value.tabTitle"
+    :badge="value.badge"
+    v-html="value.content"
+  ></nut-tab-panel>
+</nut-tab>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      defIndex: 1,
+      positionNavCurr:'top',
+      badgeTabs: [
+        {
+          tabTitle: '衣物',
+          badge: {
+            value: 10
+          },
+          content: '<p>衣物内容</p>'
+        },
+        {
+          tabTitle: '日用品',
+          badge: {
+            value: 100,
+            max: 99
+          },
+          content: '<p>日用品内容</p>'
+        },
+        {
+          tabTitle: '运动器材',
+          badge: {
+            value: 100,
+            isDot: true
+          },
+          content: '<p>运动器材内容</p>'
+        },
+        {
+          tabTitle: '电影票',
+          content: '<p>电影票内容</p>'
+        }
+      ]
+    };
+  },
+  methods: {
+      tabSwitch:function(index,event){
+        console.log(index+'--'+event.target);
+      },
+};
+```
 
 ### Prop
 
@@ -239,6 +339,8 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | tab-title | 页签的标题 | String | ''
+| tab-slot | 页签的插槽名 | String | ''
+| badge | [徽标组件](/#/badge)属性 | Object | false
 | icon-url | 页签的图标地址 | String | ''
 | content | 页签的自定义内容 | String | ''
 | disable | 是否禁用页签 |Boolean|false|

src/packages/tab/tab.vue

@@ -12,8 +12,27 @@
           :class="[titleNavList, 'nut-title-nav', { 'nut-tab-disable': value.disable }, { 'nut-tab-active': activeIndex == index }]"
         >
           <a class="nut-tab-link" v-on:click="switchTab(index, $event, value.disable)">
-            <i class="nut-tab-icon" :style="{ backgroundImage: 'url(' + value.iconUrl + ')' }" v-if="value.iconUrl"></i>
-            {{ value.tabTitle }}
+            <!-- 启用slot -->
+            <slot v-if="!!value.tabSlot" :name="value.tabSlot" v-bind:item="value"></slot>
+            <!-- 启用徽标 -->
+            <nut-badge
+              v-else-if="!!value.badge"
+              :value="value.badge.value"
+              :max="value.badge.max"
+              :zIndex="value.badge.zIndex"
+              :isDot="value.badge.isDot"
+              :hidden="value.badge.hidden"
+              :top="value.badge.top"
+              :left="value.badge.left"
+            >
+              <i class="nut-tab-icon" :style="{ backgroundImage: 'url(' + value.iconUrl + ')' }" v-if="value.iconUrl"></i>
+              {{ value.tabTitle }}
+            </nut-badge>
+            <!-- 原来的逻辑 -->
+            <template v-else>
+              <i class="nut-tab-icon" :style="{ backgroundImage: 'url(' + value.iconUrl + ')' }" v-if="value.iconUrl"></i>
+              {{ value.tabTitle }}
+            </template>
           </a>
         </span>
       </div>
@@ -159,7 +178,9 @@ export default {
           let item = {
             tabTitle: attrs['tab-title'] || attrs['tabTitle'],
             disable: attrs.disable === false,
-            iconUrl: attrs['iconUrl'] || attrs['icon-url']
+            iconUrl: attrs['iconUrl'] || attrs['icon-url'],
+            tabSlot: attrs['tab-slot'] || attrs['tabSlot'] || '',
+            badge: attrs['badge'] || false
           };
           this.tabTitleList.push(item);
           let slotElm = slot[i].elm;