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

Author: vickyYE

CHANGELOG.md

@@ -1,3 +1,21 @@
+## 2.2.5
+
+`2020-05-25`
+
+* :sparkles: feat(Address)：新增地址组件 @yangxiaolu1993
+* :sparkles: upd(Popup)：优化内部代码、单元测试 @yangkaixuan
+* :sparkles: upd(LeftSlip)：重构优化代码 #229 @vickyYE
+* :sparkles: upd(Video)：修复自定义蒙层 @vickyYE
+* :sparkles: upd(Tab)：优化内部代码，支持多页签滑动 @zhenyulei
+* :bug: fix(Range)：stage 失效、控制器重叠问题 #242 @undo03
+* :bug: fix(CountDown)：修复 startTime 异步更新问题@undo03
+* :bug: fix(Icon)：修复 url 异步更新问题 @richard1015
+* :bug: fix(Swiper)：修复 cdn 模式下 event 事件失效问题 @richard1015
+* :bug: fix(Dialog)：修复标签使用时，取消按钮无效 @guoxiao158
+* :zap: doc：nutui-demo、user-case jdf2e 地址库更换 @richard1015
+* :zap: doc：补充 rate js 文档 @richard1015
+* :zap: doc：补充 switch demo 文档 @zjyau
+
 ## 2.2.4
 
 `2020-04-29`

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nutui/nutui",
-    "version": "2.2.4",
+    "version": "2.2.5",
     "description": "一套轻量级移动端Vue组件库",
     "typings": "dist/types/index.d.ts",
     "main": "dist/nutui.js",
@@ -165,4 +165,4 @@
         "instrument": false,
         "sourceMap": false
     }
-}
+}

src/nutui.js

@@ -120,8 +120,8 @@ import SideNavBarItem from "./packages/sidenavbaritem/index.js";
 import "./packages/sidenavbaritem/sidenavbaritem.scss";
 import Drag from "./packages/drag/index.js";
 import "./packages/drag/drag.scss";
-import VueQr from "./packages/qart/index.js";
-import "./packages/qart/qart.scss";
+// import VueQr from "./packages/qart/index.js";
+// import "./packages/qart/qart.scss";
 import Address from "./packages/address/index.js";
 import "./packages/address/address.scss";
 
@@ -264,7 +264,7 @@ export default {
   locale,
   install,
   Lazyload,
-  VueQr,
+  // VueQr,
 
   ...components,
   ...filters,

src/packages/elevator/elevator.scss

@@ -1,5 +1,5 @@
 .nut-elevator{
-    position: fixed;
+    position:relative;
     top:40px;
     width: 100%;
 }

src/packages/rate/doc.md

@@ -48,6 +48,30 @@
 ></nut-rate>
 ```
 
+```javascript
+export default {
+    data(){
+        return{
+            val:4,
+            val2:2,
+            result:'',
+            result2:'',
+            icon1:`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM6.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm2.16 3H4.34a6 6 0 0 0 11.32 0z'/%3E%3C/svg%3E")`,
+            icon2:`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 13h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z'/%3E%3C/svg%3E")`
+        }
+    },
+   
+    methods:{
+        onClick(idx){
+            this.result = '您点击了第'+idx+'个!';
+        },
+        onClick2(idx){
+            this.result2 = '您点击了第'+idx+'个!';
+        }
+    }
+}
+```
+
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值

src/packages/switch/__test__/switch.spec.js

@@ -83,5 +83,4 @@ describe('Switch.vue', () => {
             }, 350);
         });
     });
-
 });

src/packages/switch/demo.vue

@@ -43,6 +43,13 @@
         </div>
         <p>禁用状态下，change事件参数永远为初始值</p>
 
+        <h4>循环场景</h4>
+        <div v-for="(item, index) of list" :key="index">
+            <nut-cell>
+                <span slot="title"> {{ item.name }}</span>
+                <span slot="desc"><nut-switch @change="onChangeLabel($event,index)" :active="true"></nut-switch></span>
+            </nut-cell>
+        </div>
         <h4>自定义Class</h4>
         <div>
             <nut-cell>
@@ -56,12 +63,20 @@
 export default {
   data() {
     return {
-      swActive: true
+      swActive: true,
+      list:[
+        {id:'1',name:'a'},
+        {id:'2',name:'b'},
+        {id:'3',name:'c'}
+        ]
     };
   },
   methods: {
     onChange(status) {
       alert(status);
+    },
+    onChangeLabel(status,index){
+      alert('status:'+status+',selected:'+index);
     }
   }
 };

src/packages/switch/doc.md

@@ -49,15 +49,15 @@ export default {
 ## change事件
 ```html
 <nut-switch 
-  @change="onChange"
+  @change="onChange($event,'1')"
 >
 </nut-switch>
 ```
 ```javascript
 export default {
   methods: {
-    onChange(status) {
-      alert(status);
+    onChange(status,index) {
+      alert('status:'+status+',selected:'+index);
     }
   }
 };
@@ -85,7 +85,7 @@ export default {
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
+|----- | ----- | ----- | -----
 | active | 开关状态 | Boolean | false
 | size | 尺寸，可选值small/base/large | String | base
-| disabled | 是否禁用 | Boolean | false
+| disabled | 是否禁用 | Boolean | false

src/packages/switch/switch.vue

@@ -26,8 +26,7 @@ export default {
   },
   data() {
     return {
-      isActive: false,
-      isAnimating:false
+      isActive: false
     };
   },
   created() {
@@ -40,16 +39,14 @@ export default {
   },
   methods: {
     toggle() {
-      if(this.isAnimating) return;
       const status = this.isActive;
       if (!this.disabled) {
         this.isActive = !status;
       }
-      this.isAnimating = true;
+
       setTimeout(() => {
         this.$emit("change", this.isActive);
         this.$emit("update:active", this.isActive);
-        this.isAnimating = false;
       }, 300);
     }
   }

src/packages/tab/demo.vue

@@ -6,7 +6,9 @@
         <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
         <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
         <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+        <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
     </nut-tab>
+
     <h4>支持导航条在上下左右位置</h4>
     <nut-tab @tab-switch="tabSwitch">
       <nut-tab-panel
@@ -35,6 +37,7 @@
         v-html="value.content"
       ></nut-tab-panel>
     </nut-tab>
+    
     <nut-tab @tab-switch="tabSwitch" position-nav="bottom">
       <nut-tab-panel
         v-for="value in editableTabs"
@@ -45,10 +48,32 @@
       ></nut-tab-panel>
     </nut-tab>
 
+    <h4>支持滑动选择多个页签</h4>
+    <nut-tab @tab-switch="tabSwitch" :is-scroll="true">
+        <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+        <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+        <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+        <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
+        <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
+        <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
+        <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
+    </nut-tab>
+
+    <h4>支持滑动选择多个页签</h4>
+    <nut-tab @tab-switch="tabSwitch" :is-scroll="true" position-nav="left">
+        <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+        <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+        <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+        <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
+        <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
+        <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
+        <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
+    </nut-tab>
+
     <h4>禁止选中，默认选中某个标签</h4>
     <h4>如需要更新页面，请将监听变化的数据传入init-data</h4>
 
-    <nut-tab :def-index="defIndex" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :init-data="disableTabs">
+    <nut-tab :def-index="defIndex" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :init-data="disableTabs" :is-show-line="false">
       <nut-tab-panel
         v-for="value in disableTabs"
         v-bind:key="value.tabTitle"
@@ -210,6 +235,8 @@ export default {
   .nut-tab-active {
     background: $primary-color;
     border: 0;
+    transition: all 0.3s ease-in-out;
+
   }
   .nav-bar {
     background: $primary-color;

src/packages/tab/doc.md

@@ -75,6 +75,31 @@ export default {
   }
 };
 ```
+## 支持滑动选择多个页签
+
+```html
+  <nut-tab @tab-switch="tabSwitch" :is-scroll="true">
+      <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+      <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+      <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+      <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
+      <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
+      <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
+      <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
+  </nut-tab>
+```
+
+```html
+  <nut-tab @tab-switch="tabSwitch" :is-scroll="true" position-nav="left">
+      <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+      <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+      <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+      <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
+      <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
+      <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
+      <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
+  </nut-tab>
+```
 
 ## 禁止选中，默认选中某个标签,如需更新数组后，重新渲染Tab页面，请将更新数组传入init-data
 
@@ -202,8 +227,8 @@ export default {
 | position-nav | 页签栏的分布，可选值 top/bottom/left/right | String | top
 | def-index | 默认选中的页签栏 | String | 1
 | init-data | 监听数据变化，渲染更新页面 | Array | []
-| is-show-line|是否显示tab切换时的红条|true|
-
+| is-show-line|是否显示tab切换时的红条|Boolean|true|
+| is-scroll|是否支持滑动选择多个页签|Boolean|false|
 
 ### nut-tab-panel