Browse Source

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

zhenyulei 5 years ago
parent
commit
b625e383fe

+ 2 - 2
package.json

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

File diff suppressed because it is too large
+ 13 - 0
src/assets/svg/back.svg


File diff suppressed because it is too large
+ 17 - 0
src/assets/svg/close.svg


+ 22 - 3
src/packages/address/address.vue

@@ -11,13 +11,13 @@
     >
       <div class="title">
         <span class="arrow" @click="switchModule">
-          <nut-icon v-if="showModule == 'custom' && type == 'exist'" type="self" :url="require('../../assets/svg/arrows-back.svg')"></nut-icon>
+          <nut-icon v-if="showModule == 'custom' && type == 'exist' && backBtnIcon" type="self" :url="backBtnIcon"></nut-icon>
         </span>
 
         <span v-if="type == 'custom'">{{ customAddressTitle }}</span>
         <span v-if="type == 'exist'">{{ existAddressTitle }}</span>
 
-        <span @click="handClose('hand')"><nut-icon type="circle-cross" size="18px"></nut-icon></span>
+        <span @click="handClose('hand')"><nut-icon v-if="closeBtnIcon" size="18px" type="self" :url="closeBtnIcon"></nut-icon></span>
       </div>
 
       <!-- 请选择 -->
@@ -136,6 +136,16 @@ export default {
       // 地址选择列表前 - 选中的图标
       type: String,
       default: require('../../assets/svg/tick-red.svg')
+    },
+    closeBtnIcon:{
+      // 关闭弹框按钮 icon
+      type: String,
+      default: require('../../assets/svg/circle-cross.svg')
+    },
+    backBtnIcon:{
+      // 选择其他地址左上角返回 icon
+      type: String,
+      default: require('../../assets/svg/arrows-back.svg')
     }
   },
   data() {
@@ -305,6 +315,8 @@ export default {
     },
     // 手动关闭 点击叉号,或者蒙层
     handClose(type = 'self') {
+      if(!this.closeBtnIcon) return
+
       if (type == 'hand') {
         this.closeWay = 'hand';
       } else {
@@ -327,7 +339,14 @@ export default {
     },
     // 选择其他地址
     switchModule() {
-      this.showModule = this.showModule == 'exist' ? 'custom' : 'exist';
+
+      if(this.showModule == 'exist'){
+        this.showModule = 'custom'
+      }else{
+        if(!this.backBtnIcon) return
+        this.showModule = 'exist'
+      }
+      
       this.initAddress();
 
       this.$emit('switchModule', { type: this.showModule });

+ 5 - 0
src/packages/address/demo.vue

@@ -55,6 +55,7 @@
       @selected="selected3"
       :defaultIcon="defaultIcon"
       :selectedIcon="selectedIcon"
+      :closeBtnIcon="closeBtnIcon"
     ></nut-address>
 
     <nut-address
@@ -65,6 +66,7 @@
       :city="city"
       :country="country"
       :town="town"
+      :backBtnIcon="backBtnIcon"
       @onChange="onChange4"
       @close="close4"
       @selected="selected4"
@@ -104,6 +106,9 @@ export default {
       selectedIcon: require('../../assets/svg/checked.svg'),
       defaultIcon: require('../../assets/svg/unchecked.svg'),
 
+      closeBtnIcon: require('../../assets/svg/close.svg'),
+      backBtnIcon: require('../../assets/svg/back.svg'),
+
       showPopupOther: false,
       existAddress: [
         { id: 1, addressDetail: 'th ', cityName: '石景山区', countyName: '城区', provinceName: '北京', selectedAddress: true, townName: '' },

+ 7 - 1
src/packages/address/doc.md

@@ -133,7 +133,8 @@ export default {
   :isShowCustomAddress="false" 
   @selected="selected3" 
   :defaultIcon="defaultIcon" 
-  :selectedIcon='selectedIcon'>
+  :selectedIcon="selectedIcon"
+  :closeBtnIcon="closeBtnIcon">
 </nut-address>
 
 ```
@@ -146,6 +147,7 @@ export default {
         showPopupCustomImg:false,
         selectedIcon:require('../../assets/svg/checked.svg'),
         defaultIcon:require('../../assets/svg/unchecked.svg'),
+        closeBtnIcon: require('../../assets/svg/close.svg'),
         existAddress:[
           {"id":1,"addressDetail":"th ","cityName":"石景山区","countyName":"城区","provinceName":"北京","selectedAddress":true,"townName":""},
           {"id":2,"addressDetail":"12_ ","cityName":"电饭锅","countyName":"扶绥县","provinceName":"北京","selectedAddress":false,"townName":""},
@@ -200,6 +202,7 @@ export default {
     :city="city" 
     :country="country" 
     :town="town" 
+    :backBtnIcon="backBtnIcon"
     customAndExistTitle="选择其他地址"
     @onChange="onChange4" 
     @close="close4" 
@@ -225,6 +228,7 @@ export default {
       city:[{"id":7,"name":"朝阳区"},{"id":8,"name":"崇文区"},{"id":9,"name":"昌平区"},{"id":6,"name":"石景山区"}],// 市
       country:[{"id":3,"name":"八里庄街道"},{"id":9,"name":"北苑"},{"id":4,"name":"常营乡"}],// 县
       town:[], // 镇 必传值:name
+      backBtnIcon: require('../../assets/svg/back.svg'),
     };
   },
   methods: {
@@ -274,6 +278,8 @@ export default {
 | existAddress | 已存在地址列表,每个地址对象中,必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress(字段解释见下) | Array | []
 | defaultIcon | 已有地址列表默认图标,type=‘exist’ 时生效 | string | ''
 | selectedIcon | 已有地址列表选中图标,type=‘exist’ 时生效 | string | ''
+| closeBtnIcon | 自定义关闭弹框按钮图标 | string | -
+| backBtnIcon | 自定义地址与已有地址切换时,自定义返回的按钮图标 | string | -
 | isShowCustomAddress | 是否可以切换自定义地址选择,type=‘exist’ 时生效 | Boolean | true
 | customAddressTitle  | 自定义地址选择文案,type='custom' 时生效 | string | '请选择所在地区'
 | existAddressTitle| 已有地址文案 ,type=‘exist’ 时生效| string | '配送至'

+ 4 - 3
src/packages/field/demo.vue

@@ -10,7 +10,7 @@
    
      <h4>标题超出长度限制</h4>
     
-      <nut-field  v-model="val2"  label="标题长度超出超出超出范围" textAlign="right" placeholder="请输入内容" /> 
+      <nut-field  v-model="val8"  label="标题长度超出超出超出范围" textAlign="right" placeholder="请输入内容" /> 
    
      <h4>数字</h4>
     
@@ -34,14 +34,14 @@
 
     <h4>文本域(显示字数统计)</h4>
       
-          <nut-field  label="意见反馈" placeholder="自我介绍" v-model="val4"  type="textarea" @errorFunc="error" maxLength="200" rows="4"  />
+          <nut-field  label="意见反馈" placeholder="自我介绍" v-model="val10"  type="textarea" @errorFunc="error" maxLength="200" rows="4"  />
      
       <h4>事件输入事件</h4>
 
           <nut-field label="标题内容:" placeholder="请输入内容" v-model="val" @input-func="fn" />
 
       <h4>右侧自定义DOM</h4>    
-          <nut-field label="验证码:" textAlign="left"  placeholder="请输入内容" v-model="val" @input-func="fn" > 
+          <nut-field label="验证码:" textAlign="left"  placeholder="请输入内容" v-model="val9" @input-func="fn" > 
               <div class="get-code"> 获取验证码</div>
           </nut-field>
       </div>
@@ -61,6 +61,7 @@ export default {
       val7: '输入框已禁用',
       val8: '',
       val9: '',
+      val10: '',
       result: '尚未触发',
       state:"error"
     };

+ 4 - 7
src/packages/stepper/stepper.vue

@@ -2,7 +2,7 @@
   <div :class="{ 'nut-stepper': !simple, 'nut-stepper-simple': simple }">
     <div class="oper-wrapper reduce-wrapper" @click="reduce()"><span  :class="{ 'nut-stepper-grey': isGray }" v-html="require('../../assets/svg/reduce.svg')"> </span></div>
     <input
-      id="number"
+      ref="number"
       type="number"
       :min="minNum"
       :max="max"
@@ -130,14 +130,11 @@ export default {
   },
   methods: {
     focus(e) {
-      // conole.log(e,'e')
-      //选中选择框值
-      // const input = document.querySelector('#number');
-      // input.select();
-      // alert(1)
-      // e.currentTarget.select();
+      console.log(1)
       if (this.readonly) return;
       // clear val temporary when focus, e...s
+      //选中选择框值
+      this.$refs.number.select();
       const v = this.num;
       this.tempNum = v;
       this.minNum = '';