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

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.2.3
+
+`2020-04-03`
+
+- :sparkles: upd(Uploader)： 新增 beforeUpload 回调钩子函数、新增selfData自定义增加上传的数据 @linrufeng
+- :bug: fix(Stepper)：关于Tabbar的问题重复点击一个TAB的时候会报错 #231 @zhenyulei
+
 ## 2.2.2
 
 `2020-03-31`
@@ -13,13 +20,13 @@
 * :sparkles: upd(Toast)：优化内部代码，文档优化 @zy19940510
 * :sparkles: upd(Progress)：优化内部代码，文档优化 @layman666
 * :sparkles: upd(SearchBar、TextInput)：组件优化 @yangxiaolu1993
-* :bug: upd(Range)：绑定的值无法更新到组件 #227 @undo03
-* :bug: upd(Countdown)：修复异步计算属性无法更新组件 #228 @undo03
-* :bug: upd(LuckDraw)：抽奖组件图片链接修复 @Ymm0008
-* :bug: upd(Picker)优化自定义数据联动demo @irisSong
-* :bug: upd(Popup)：按需加载icon修复 @yangkaixuan
-* :bug: upd(TabSelect)：组件tabList数据改变内容不刷新问题修复 @dushoujun
-* :bug: upd(TabBar)：更新数据 重新渲染的功能 @zhenyulei
+* :bug: fix(Range)：绑定的值无法更新到组件 #227 @undo03
+* :bug: fix(Countdown)：修复异步计算属性无法更新组件 #228 @undo03
+* :bug: fix(LuckDraw)：抽奖组件图片链接修复 @Ymm0008
+* :bug: fix(Picker)优化自定义数据联动demo @irisSong
+* :bug: fix(Popup)：按需加载icon修复 @yangkaixuan
+* :bug: fix(TabSelect)：组件tabList数据改变内容不刷新问题修复 @dushoujun
+* :bug: fix(TabBar)：更新数据 重新渲染的功能 @zhenyulei
 
 ## 2.2.1
 

README-zh_CN.md

@@ -57,6 +57,14 @@ https://nutui.jd.com
 * 联系我们：nutui@jd.com
 
 
+## 使用案例
+
+NutUI 已经投入了我们的生产环境中使用，业界也在广泛地使用。
+
+<img src="https://img12.360buyimg.com/imagetools/jfs/t1/103711/28/17214/247343/5e854d2aE0d93051b/f475b25de9b63972.png" />
+
+[征集更多优秀案例](https://github.com/richard1015/nutui-user-cases)
+
 ## 开源协议
 
 本项目基于 **MIT** 协议

README.md

@@ -57,6 +57,14 @@ Documents：[2.X](https://nutui.jd.com/default.html#/start) | [1.X](https://nutu
 * Contact us：nutui@jd.com
 
 
+## User Cases
+
+NutUI has been put into use in our production environment and is widely used in developing countries at the same time.
+
+<img src="https://img12.360buyimg.com/imagetools/jfs/t1/103711/28/17214/247343/5e854d2aE0d93051b/f475b25de9b63972.png" />
+
+[Call for more excellent cases](https://github.com/richard1015/nutui-user-cases)
+
 ## Open Source LICENSE
 
 Based on **MIT** LICENSE

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nutui/nutui",
-    "version": "2.2.2",
+    "version": "2.2.3",
     "description": "一套轻量级移动端Vue组件库",
     "typings": "dist/types/index.d.ts",
     "main": "dist/nutui.js",

src/packages/buttongroup/buttongroup.scss

@@ -16,24 +16,7 @@
     }
     &.menu {
         height: $btn-menu-height;
-        font-size: $font-size-small;        
-        .nut-button {
-            position: relative;
-            height: $btn-menu-height;
-            width: 100%;
-            padding: 0;
-            font-size: $btn-icon-height-small;
-        }
-        .txt-icon {
-            display: block;
-            margin: 0 auto;
-            width: $btn-menu-icon-height;
-            height: $btn-menu-icon-height;
-        }
-        .nut-badge {
-            flex: 1;
-            -webkit-flex: 1;
-        }
+        font-size: $font-size-small;
     }
     .nut-button {
         flex: 1;

src/packages/buttongroup/buttongroup.vue

@@ -5,30 +5,24 @@
 </template>
 <script>
 export default {
-    name:'nut-buttongroup',
+    name: "nut-buttongroup",
     props: {
         shape: {
             type: String,
-            default: ''
+            default: ""
         },
         type: {
             type: String,
-            default: ''
-
+            default: ""
         }
     },
     data() {
         return {
-            cls: ''
+            cls: ""
         };
     },
     mounted() {
-        this.initStyle();
-    },
-    methods: {
-        initStyle() {
-            this.cls = `nut-buttongroup ${this.shape} ${this.type}`;
-        }
+        this.cls = `nut-buttongroup ${this.shape} ${this.type}`;
     }
-}
+};
 </script>

src/packages/buttongroup/demo.vue

@@ -1,31 +1,50 @@
 <template>
     <div>
-      <h4>常规按钮组</h4>
-      <nut-buttongroup>
-        <nut-button type="light">重置</nut-button>
-        <nut-button>确定</nut-button>
-      </nut-buttongroup>
-    <h4>圆角按钮组</h4>
-    <nut-buttongroup shape="circle">
-      <nut-button type="light">重置</nut-button>
-      <nut-button>确定</nut-button>
-    </nut-buttongroup>
-    <h4>页面底部功能，配合Badge使用</h4>
-      <nut-buttongroup type="menu">
-        <nut-button type="light" icon="action" color="#000">关于</nut-button>
-        <nut-button type="light" icon="more" color="#000">更多</nut-button>
-        <nut-button type="light" icon="search" color="#000">关闭</nut-button>
-        <nut-badge value="2" top="0.5rem" right="2rem"><nut-button type="light" icon="trolley" color="#f00">购物车</nut-button></nut-badge>      
-        <nut-button type="light" icon="tick" color="#000">成功</nut-button>
-      </nut-buttongroup>
+        <h4>常规按钮组</h4>
+        <nut-buttongroup>
+            <nut-button type="light">重置</nut-button>
+            <nut-button>确定</nut-button>
+        </nut-buttongroup>
+        <h4>圆角按钮组</h4>
+        <nut-buttongroup shape="circle">
+            <nut-button type="light">重置</nut-button>
+            <nut-button>确定</nut-button>
+        </nut-buttongroup>
+        <h4>页面底部功能，配合Badge使用</h4>
+        <nut-buttongroup type="menu">
+            <nut-button type="light" icon="action" color="#000">关于</nut-button>
+            <nut-button type="light" icon="more" color="#000">更多</nut-button>
+            <nut-button type="light" icon="search" color="#000">关闭</nut-button>
+            <nut-badge value="2" top="0.5rem" right="2rem">
+                <nut-button type="light" icon="trolley" color="#f00">购物车</nut-button>
+            </nut-badge>
+            <nut-button type="light" icon="tick" color="#000">成功</nut-button>
+        </nut-buttongroup>
     </div>
 </template>
 
 <script>
-export default {
-};
+export default {};
 </script>
 
 <style lang="scss" scoped>
-
+/deep/.menu {
+    .nut-button {
+        position: relative;
+        height: $btn-menu-height;
+        width: 100%;
+        padding: 0;
+        font-size: $btn-icon-height-small;
+    }
+    .txt-icon {
+        display: block;
+        margin: 0 auto;
+        width: $btn-menu-icon-height;
+        height: $btn-menu-icon-height;
+    }
+    .nut-badge {
+        flex: 1;
+        -webkit-flex: 1;
+    }
+}
 </style>

src/packages/buttongroup/doc.md

@@ -83,10 +83,31 @@
   </nut-button>
 </nut-buttongroup>
 ```
+``` style
+/deep/.menu {
+    .nut-button {
+        position: relative;
+        height: $btn-menu-height;
+        width: 100%;
+        padding: 0;
+        font-size: $btn-icon-height-small;
+    }
+    .txt-icon {
+        display: block;
+        margin: 0 auto;
+        width: $btn-menu-icon-height;
+        height: $btn-menu-icon-height;
+    }
+    .nut-badge {
+        flex: 1;
+        -webkit-flex: 1;
+    }
+}
 
+```
 ## Prop
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| shape | 设置按钮组形状，可选值：circle、无 | String | 无
-| type | 设置按钮样式，可选值为：menu、无 | String | 无
+| 字段  | 说明                           | 类型   | 默认值 |
+| ----- | ------------------------------ | ------ | ------ |
+| shape | 设置按钮组形状，可选值：circle | String | 无     |
+| type  | 设置按钮样式，可选值为：menu   | String | 无     |

src/packages/noticebar/__test__/noticebar.spec.js

@@ -2,40 +2,40 @@ import { shallowMount } from '@vue/test-utils'
 import NoticeBar from '../noticebar.vue'
 import Vue from 'vue';
 
-describe('noticebar.vue',() => {
+describe('noticebar.vue', () => {
     const wrapper = shallowMount(NoticeBar, {
-        propsData:{
-            text:"华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+        propsData: {
+            text: "华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
         }
     });
 
-    it('禁用滚动',() => {
+    it('禁用滚动', () => {
         wrapper.setProps({
-            scrollable:false
+            scrollable: false
         });
 
-        return Vue.nextTick().then(function() {
+        return Vue.nextTick().then(function () {
             // console.log(wrapper.find('.content').classes('van-ellipsis'),'test');
-            
-            expect(wrapper.find('.content').classes('van-ellipsis')).toBe(true);
+
+            expect(wrapper.find('.content').classes('nut-ellipsis')).toBe(true);
         })
     });
 
-    it('通告栏模式--关闭模式',() => {
+    it('通告栏模式--关闭模式', () => {
         wrapper.setProps({
-            closeMode:true
+            closeMode: true
         });
 
-        return Vue.nextTick().then(function() {
+        return Vue.nextTick().then(function () {
             expect(wrapper.find('.right-icon').isVisible()).toBe(true);
         })
     })
 
-    it('左边图标不显示',() => {
+    it('左边图标不显示', () => {
         wrapper.setProps({
-            leftIcon:'close',
+            leftIcon: 'close',
         });
-        return Vue.nextTick().then(function() {
+        return Vue.nextTick().then(function () {
             expect(wrapper.find('.left-icon').exists()).toBe(false);
         })
     })

src/packages/popup/overlay.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="popup-fade">
-    <div v-show="show" class="popup-bg nut-mask" :class="className"></div>
+    <div @touchmove.prevent.stop v-show="show" class="popup-bg nut-mask" :class="className"></div>
   </transition>
 </template>
 <script>

src/packages/tabbar/doc.md

@@ -1,4 +1,4 @@
-# Tabbar 标签栏
+# TabBar 标签栏
 
 ## 基本用法
 

types/nutui.d.ts

@@ -33,7 +33,7 @@ export declare class GridRow extends UIComponent {}
 export declare class Icon extends UIComponent {}
 export declare class ImagePicker extends UIComponent {}
 export declare class Menu extends UIComponent {}
-export declare class Navbar extends UIComponent {}
+export declare class NavBar extends UIComponent {}
 export declare class NoticeBar extends UIComponent {}
 export declare class Picker extends UIComponent {}
 export declare class Price extends UIComponent {}