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

package.json

@@ -17,7 +17,7 @@
     "build:site": "nutui-cli build-site",
     "clean": "nutui-cli clean",
     "add": "nutui-cli add",
-    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/**/__test__/**.spec.js",
+    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/avatar/__test__/**.spec.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test:watch": "npm run test --watch",
     "prettier:fix": "prettier --write src/**/*.{js,vue,scss}",

src/packages/avatar/__test__/avatar.spec.js

@@ -6,39 +6,20 @@ import Vue from 'vue';
 describe('Avatar.vue', () => {
     const wrapper = shallowMount(avatar, {
     });
-    it('尺寸规格', () => {
-        wrapper.setProps({size: "small" });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-avatar').contains('.avatar-small')).toBe(true);
-        })
-    });
 
-    it('形状类型是否为square', () => {
-        wrapper.setProps({shape: "square" });
+    it('设置头像图片的地址', () => {
+        wrapper.setProps({bgImage: "http://image.png" });
         return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-avatar').contains('.avatar-square')).toBe(true);
+            expect(wrapper.find('.icon').attributes('src')).toBe('http://image.png');
         })
     });
 
-    it('背景颜色是否为red', () => {
-        wrapper.setProps({bgColor: "red" });
+    it('设置头像图片的大小', () => {
+        wrapper.setProps({sizeNum: "50" });
         return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-avatar').hasStyle('background-color','red')).toBe(true);
+            expect(wrapper.find('.nut-avatar').hasStyle('width','50px')).toBe(true);
         })
     });
 
-    it('背景图片是否为设置的bgImage', () => {
-        wrapper.setProps({bgImage: "http://image.png" });
-        return Vue.nextTick().then(function () {
-            // console.log(wrapper.find('.nut-avatar').attributes('style'))
-            expect(wrapper.find('.nut-avatar').hasStyle('background-image','url(http://image.png)')).toBe(true);
-        })
-    });
 
-    it('头像图片是否为设置的bgIcon', () => {
-        wrapper.setProps({bgIcon: "http://image.png" });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.icon').hasStyle('background-image','url(http://image.png)')).toBe(true);
-        })
-    });
 });

src/packages/avatar/avatar.scss

@@ -5,48 +5,14 @@
 	display: inline-block;
 	position: relative;
 	margin-right: 10px;
-
 	.icon {
-		width: 50%;
-		height: 50%;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
 		background-size: 100% 100%;
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
-
-	.text {
-		display: inline-block;
-		width: 100%;
-		height: 100%;
-		text-align: center;
-		overflow: hidden;
-	}
-}
-
-.avatar-large {
-	width: 40px;
-	height: 40px;
-	line-height: 40px;
-}
-
-.avatar-small {
-	width: 24px;
-	height: 24px;
-	line-height: 24px;
-}
-
-.avatar-normal {
-	width: 32px;
-	height: 32px;
-	line-height: 32px;
-}
-
-.avatar-round {
-	border-radius: 50%;
-}
-
-.avatar-square {
-	border-radius: 5px;
 }

src/packages/avatar/demo.vue

@@ -1,37 +1,21 @@
 <template>
   <div class="demo-list">
     <h4>默认用法</h4>
-    <p>内置"small","normal","large"三种尺寸规格</p>
     <div class="white-bg">
-      <nut-avatar size="large"></nut-avatar>
-      <nut-avatar size="normal"></nut-avatar>
-      <nut-avatar size="small"></nut-avatar>
+      <nut-avatar size-num="80" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar"></nut-avatar>
+      <nut-avatar size-num="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar"></nut-avatar>
+      <nut-avatar size-num="40" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar"></nut-avatar>
+      <nut-avatar size-num="32" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar"></nut-avatar>
     </div>
-    <h4>修改形状类型</h4>
-    <div class="white-bg">
-      <nut-avatar size="large" shape="square"></nut-avatar>
-      <nut-avatar size="normal" shape="square"></nut-avatar>
-      <nut-avatar size="small" shape="square"></nut-avatar>
-    </div>
-    <h4>修改背景色</h4>
-    <div class="white-bg">
-      <nut-avatar bg-color="#f0250f"></nut-avatar>
-    </div>
-    <h4>可以修改头像的内容</h4>
-    <div class="white-bg">
-      <nut-avatar size="large" bg-icon>U</nut-avatar>
-    </div>
-    <h4>修改背景图片</h4>
-    <div class="white-bg">
-      <nut-avatar bg-icon bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
-    </div>
-    <h4>修改头像ICON图标</h4>
-    <div class="white-bg">
-      <nut-avatar bg-icon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"></nut-avatar>
-    </div>
-    <h4>点击头像有触发事件</h4>
+
+    <h4>带徽标的头像</h4>
     <div class="white-bg">
-      <nut-avatar @active-avatar="activeAvatar"></nut-avatar>
+      <nut-avatar size-num="40" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar">
+        <nut-badge :value="9"  :max="99" class="item" top="5px" right="10px" ></nut-badge>
+      </nut-avatar>
+      <nut-avatar size-num="32" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar">
+         <nut-badge :isDot="true" top="5px" right="6px" ></nut-badge>
+      </nut-avatar>
     </div>
   </div>
 </template>
@@ -52,8 +36,15 @@ export default {
 <style lang="scss" scoped>
 .white-bg {
 	padding: 10px;
-	background: #fff;
-	display: flex;
-	align-items: center;
+  background: #fff;
+  display: flex;
+  align-items: flex-end;
+  .nut-avatar{
+    margin-right: 23px;
+  }
+  .nut-badge{
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

src/packages/avatar/doc.md

@@ -2,71 +2,41 @@
 
 用来代表用户或事物，支持图片、图标或字符展示。
 
-## 基本用法
+## 默认用法
 
-内置 **smal** / **normal** / **large** 三种尺寸规格
+size-num 为头像的大小，表示宽高；bg-image表示引入头像图片的路径
 
 ```html
-<nut-avatar size="large"></nut-avatar>
-<nut-avatar size="normal"></nut-avatar>
-<nut-avatar size="small"></nut-avatar>
+<nut-avatar size-num="80" :bg-image="require('../../assets/img/cell-avatar.jpeg')"></nut-avatar>
+<nut-avatar size-num="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')"></nut-avatar>
+<nut-avatar size-num="40" :bg-image="require('../../assets/img/cell-avatar.jpeg')"></nut-avatar>
+<nut-avatar size-num="32" :bg-image="require('../../assets/img/cell-avatar.jpeg')"></nut-avatar>
 ```
 
-## 修改形状类型
+## 带徽标的头像
 
-```html
-<nut-avatar size="large" shape="square"></nut-avatar>
-<nut-avatar size="normal" shape="square"></nut-avatar>
-<nut-avatar size="small" shape="square"></nut-avatar>
-```
-
-## 修改背景色
+支持slot，需引入badge组件，点击头像有触发事件
 
 ```html
-<nut-avatar bg-color="#f0250f"></nut-avatar>
+<nut-avatar size-num="40" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar">
+  <nut-badge :value="9"  :max="99" class="item" top="5px" right="10px" ></nut-badge>
+</nut-avatar>
+<nut-avatar size-num="32" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar">
+    <nut-badge :isDot="true" top="5px" right="6px" ></nut-badge>
+</nut-avatar>
 ```
 
-## 设置头像的文本内容
-
-```html
-<nut-avatar size="large" bg-icon>U</nut-avatar>
-```
-
-## 设置背景图片
-```html
-<nut-avatar
-  bg-icon
-  bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
-></nut-avatar>
-```
-
-## 设置头像ICON图标
-```html
-<nut-avatar
-  bg-icon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"
-></nut-avatar>
-```
-
-## 点击头像有触发事件
-```html
-<nut-avatar @active-avatar="activeAvatar"></nut-avatar>
-```
-
-
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| bg-color | 设置头像背景色 | String | #eee
-| size | 设置头像的大小，提供三种：large /normal/small | String | normal
-| shape | 设置头像的形状，默认是圆形，可以设置为square方形 | String | round
-| bg-image | 设置头像的背景图片 | String | --
-| bg-icon | 设置头像的icon图标 | String | 默认based64格式的头像图片
+| size-num | 设置头像的大小，表示宽高尺寸，单位是px| String/Number | 20
+| bg-image | 设置头像的背景图片路径地址 | String | --
 
 ## slot
 | 字段 | 说明 |
 |--|--|
-|--|用户自定义icon或者文字|
+|--|用户自定义徽标区域|
 
 
 ## Event

src/packages/field/demo.vue

@@ -57,20 +57,20 @@
     </div> 
     <h4>文本域</h4>
       <div class="text-area">
-          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" maxLength="20" rows="4"  />
+          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" @errorFunc="error" maxLength="20" rows="4"  />
     </div> 
 
       <h4>事件</h4>
        <div>
       <nut-cell>
         <span slot="title">
-          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" @inputFunc="a" />
+          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" @inputFunc="fn" />
         </span>
       </nut-cell>
     </div>
       <h4>右侧自定义DOM</h4>
        <div class="filed-wrap"> 
-          <nut-field label="验证码：" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="a" > 
+          <nut-field label="验证码：" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="fn" > 
               <div class="get-code"> 获取验证码</div>
           </nut-field>
       </div>
@@ -110,9 +110,12 @@ export default {
     onBlur() {
       this.result = 'blur事件触发！';
     },
-    a(data){
+    fn(data){
       console.log(data)
     },
+    error(data){
+     // alert("文字超出限制了")
+    },
     checkVal5(data){
       if(!(/^1[3456789]\d{9}$/.test(data))){ 
        console.log(false)

src/packages/field/doc.md

@@ -102,9 +102,22 @@
 
 | 字段  | 说明                                                                                     | 类型    | 默认值 |
 | ----- | ---------------------------------------------------------------------------------------- | ------- | ------ |
-| type  | 按钮类型，可选类型包含：空/bottom/red/gray/light/lightred/primary/default/actived/dashed | String  | -      |
-| block | 是否为通栏                                                                               | Boolean | false  |
-| size  | big /middle/small                                                                      | String  | big |
-| shape | 形状配置，可选类型：空、circle                                                           | String  | -      |
-| icon  | 按钮前的图标，参考Icon组件                                                               | String  | -      |
-| color | 自定义颜色，包含文字与图片颜色                                                           | String  | -      |
+| type  | 输入类型，包括 text,textarea, number,password| String  | text     |
+| label | 文字对齐方向       right ,left ,center            | Boolean | right  |
+| v-model  | value值                                                                    | String  | - |
+| placeholder | 文案为空时提示内容  | String  | -      |
+| disableClear  | 禁用clear 按钮                                                            | String  | -      |
+| readonly | 设置输入为只读                                                         | String  | -      |
+| disabled | 禁用输入框                                                        | String  | -      |
+| requireShow | 是否展示必填 *号                                                       | Boolean  | false    |
+| state |  状态，目前支持error                                                       | string  | -    |
+| maxLength | textArea时允许最大输入字数                      | String  | 50    |
+| limitShow | textArea时字数是否展示                     | Boolean  | true    |
+| rows | textArea时行数(可设置高度)                  | string  |1   |
+
+## Event
+
+| 字段 | 说明 | 回调参数 
+|----- | ----- | ----- 
+| inputFunc | input事件 | data(输入的值)
+| change | change事件 | data(输入的值)

src/packages/field/field.vue

@@ -126,7 +126,7 @@ export default {
       const data = event.target.value;
       const txtLength = data.length;
       this.txtNum = txtLength;
-      if (txtLength > this.maxLength) {
+      if (txtLength > this.maxLength*1) {
         this.$emit('errorFunc');
       } else {
       }

src/packages/leftslip/doc.md

@@ -65,8 +65,8 @@ export default {
     <nut-leftslip v-for="(item, index) in list" :key="item.id" ref="leftslip" class="addr-item" >
         <div slot="slip-main" class="slip-main addr-main">
           <div class="addr">
-            <p class="name-mobile">{{ item.tel }}</p>
-            <p class="full-addr">{{ item.addr }}</p>
+            <p class="name-mobile">{{ item.tel } }</p>
+            <p class="full-addr">{{ item.addr } }</p>
           </div>
           <a class="addr-edit" href="javascript:void(0)"></a>
         </div>