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

.babelrc

@@ -6,4 +6,4 @@
     "transform-runtime",
     "syntax-dynamic-import"
   ]
-}
+}

config.json

@@ -33,9 +33,9 @@
     },
     {
       "name": "Loading",
-      "chnName": "加载等待蒙层",
+      "chnName": "加载等待提示",
       "type": "method",
-      "desc": "Loading蒙层,一般用于加载等待等场景。"
+      "desc": "加载等待提示组件,一般用于加载等待等场景。"
     },
     {
       "name": "Swiper",
@@ -284,6 +284,13 @@
       "desc": "级联选择面板。多用于地区选择，支持异步拉取数据。",
       "type": "component",
       "showDemo": true
+    },
+    {
+      "name": "QRCode",
+      "chnName": "二维码生成组件",
+      "desc": "一种可以配置的二维码生成组件",
+      "type": "component",
+      "showDemo": false
     }
   ]
 }

package.json

@@ -28,14 +28,15 @@
     "url": "https://github.com/jdf2e/nutui.git"
   },
   "scripts": {
-    "clean": "rm -rf dist",
+    "clean": "node scripts/rmDist",
     "dev": "npm run clean && webpack-dev-server -d --open --progress",
     "build": "npm run clean && cross-env NODE_ENV=production webpack --hide-modules --progress",
     "add": "node scripts/addComponent",
     "custom": "node scripts/customBuild && npm run clean && cross-env NODE_ENV=production webpack --config webpack.config.custom.js --hide-modules --progress && rm -rf custom.json && rm -rf src/nutui-custom.js"
   },
   "dependencies": {
-    "babel-runtime": "^6.26.0"
+    "babel-runtime": "^6.26.0",
+    "vueg": "^1.3.4"
   },
   "peerDependencies": {
     "vue": "^2.3.3"
@@ -58,6 +59,7 @@
     "inquirer": "^5.2.0",
     "node-sass": "^4.8.3",
     "postcss-loader": "^2.0.6",
+    "rimraf": "^2.6.2",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
     "svg-sprite-loader": "^3.7.3",

scripts/addComponent.js

@@ -14,7 +14,7 @@ let rl = readline.createInterface({
 
 function init() {
     inquirer.prompt([
-        {
+        { 
             type: 'input',
             name: 'name',
             message: '组件英文名(每个单词的首字母都大写，如TextBox)：',
@@ -134,7 +134,7 @@ function createView() {
         const fileName = 'viewTpl.vue';
 
         const sourceFile = path.join(__dirname, './' + fileName);
-        const destPath = path.join(__dirname, '../src/demo/', nameLc + '.vue');
+        const destPath = path.join(__dirname, '../src/view/', nameLc + '.vue');
 
         const readStream = fs.createReadStream(sourceFile);
         const writeStream = fs.createWriteStream(destPath);
@@ -149,7 +149,7 @@ function createDemo() {
         const fileName = 'demoTpl.vue';
 
         const sourceFile = path.join(__dirname, './' + fileName);
-        const destPath = path.join(__dirname, '../src/view/', nameLc + '.vue');
+        const destPath = path.join(__dirname, '../src/demo/', nameLc + '.vue');
 
         const readStream = fs.createReadStream(sourceFile);
         const writeStream = fs.createWriteStream(destPath);

scripts/rmDist.js

@@ -0,0 +1,5 @@
+const rimraf = require('rimraf');
+
+rimraf('dist',function(err){
+    console.log('rimraf:'+err);
+});

src/demo-router.js

@@ -1,9 +1,10 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Conf from '../config.json';
+import vueg from 'vueg';
+import 'vueg/css/transition-min.css';
+
 
-/* import Index from './demo/index.vue';
-import DemoNav from './demo/demonav.vue'; */
 const Index = () => import('./demo/index.vue');
 const DemoNav = () => import('./demo/demonav.vue');
 
@@ -15,10 +16,6 @@ const routes = [
     path: '*',
     redirect: '/index'
   },
-/*   { 
-  	path: '/', 
-    redirect: '/index'
-  }, */
   { 
     path: '/index', 
     components:{
@@ -52,4 +49,25 @@ const router = new VueRouter({
     }
   }
 });
+
+
+
+const options = {
+  duration: '0.3', //转场动画时长，默认为0.3，单位秒
+  firstEntryDisable: false, //值为true时禁用首次进入应用时的渐现动画，默认为false
+  firstEntryDuration: '.4', //首次进入应用时的渐现动画时长，默认为.6
+  forwardAnim: 'fadeInRight', //前进动画，默认为fadeInRight
+  backAnim: 'fadeInLeft', //后退动画，默认为fedeInLeft
+  sameDepthDisable: false, //url深度相同时禁用动画，默认为false
+  tabs: [], //默认为[]，'name'对应路由的name,以实现类似app中点击tab页面水平转场效果，如tabs[1]到tabs[0]    ，会使用backAnim动画，tabs[1]到tabs[2]，会使用forwardAnim动画
+  tabsDisable: false, //值为true时，tabs间的转场没有动画，默认为false
+  shadow: false, //值为false，转场时没有阴影的层次效果
+  disable: false, //禁用转场动画，默认为false，嵌套路由默认为true
+  nuxt: false //若使用后端渲染框架Nuxt，需要将此设为true，默认为false
+};
+
+Vue.use(vueg, router, options);
+
+
+
 export default router;

src/demo.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="demo-wrapper">
     <router-view class="demo-nav" name="demonav"></router-view>
     <keep-alive include="index">
-      <router-view class="demo" name="main"></router-view>
+      <router-view class="demo" name="main" v-transition></router-view>
     </keep-alive>
   </div>
 </template>
@@ -20,9 +20,14 @@ body{
     background:#F8F8F8;
     margin: 0;
 }
+.demo-wrapper{
+  background-color:#F8F8F8;
+  min-height:100vh;
+}
 .demo{
   padding: 8px;
   padding-top: 40px;
+  box-sizing:border-box;
 }
 .button-primary {
     display: block;

src/demo/demonav.vue

@@ -17,7 +17,7 @@ export default {
     },
     methods:{
         goback(){
-            if (self != top) { 
+            if (self != top || history.length===1) { 
                 this.$router.push('./index');
             }else{
                 history.back();

src/demo/loading.vue

@@ -7,7 +7,7 @@
         
         <a class="button button-primary" href="javascript:;" @click="showLoading2">禁止点击关闭，4秒后自动关闭</a>
         
-        <a class="button button-primary" href="javascript:;" @click="showLoading3">自定义文字及颜色</a>
+        <a class="button button-primary" href="javascript:;" @click="showLoading3">全屏+自定义文字及颜色</a>
         
         <a class="button button-primary" href="javascript:;" @click="showLoading4">渐隐渐现</a>
 
@@ -26,14 +26,14 @@ export default {
         }
     },
     mounted(){
-      this.loading1 = this.$loading({
-        iconUrl:'//misc.360buyimg.com/mtd/pc/o2_toolbar/1.0.0/home/images/loading.gif'
-      });
+      this.loading1 = this.$loading();
       this.loading2 = this.$loading({
         maxDuring:4000,
+        text:'加载中...',
         userClose:false
       });
       this.loading3 = this.$loading({
+        mini:false,
         text:'LOADING',
         textColor:'rgba(255,255,255,.7)'
       });
@@ -42,16 +42,16 @@ export default {
       });
     },
     methods:{
-      showLoading1(options){
+      showLoading1(){
         this.loading1.show();
       },
-      showLoading2(options){
+      showLoading2(){
         this.loading2.show();
       },
-      showLoading3(options){
+      showLoading3(){
         this.loading3.show();
       },
-      showLoading4(options){
+      showLoading4(){
         this.loading4.show();
       },
     }

src/demo/qrcode.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+       <nut-docheader 
+        :name="$route.name" 
+        :chName="$route.params.chnName" 
+        type="Filter" 
+        desc=""
+        :showQrCode="true"></nut-docheader>
+        <h5>示例</h5>
+        <nut-codebox :code="demo1"></nut-codebox>
+
+        <h5>Props</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+            <thead>
+                <tr>
+                <th>参数</th>
+                <th>说明</th>
+                <th>类型</th>
+                <th>默认值</th>
+                <th>可选值</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                </tr>
+            </tbody>
+            </table>
+        </div>
+        
+        <h5>Events</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+            <thead>
+                <tr>
+                <th>事件名</th>
+                <th>说明</th>
+                <th>回调参数</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+                </tr>
+            </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            demo1:`test`
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+</style>

src/demo/swiper.vue

@@ -11,7 +11,7 @@
             direction="horizontal"
              ref="demo1"
              @slideChangeEnd="slideChangeEnd">
-            <div v-for="item in dataItem" class="nut-swiper-silde"><span>page{{item.name}}</span></div>
+            <div v-for="item in dataItem" class="nut-swiper-silde" :key="item.name"><span>page{{item.name}}</span></div>
 
         </nut-swiper>
 

src/demo/timer.vue

@@ -3,26 +3,32 @@
         <nut-demoheader 
         :name="$route.name"
         ></nut-demoheader>
-
-        <nut-timer :timespacer="6000000000"></nut-timer>
-               
+        <!-- DEMO区域 -->
+        <h3>示例1</h3>
+        <nut-timer 
+        :timespacer="600000000"  
+        @end-timer="endTimer1"></nut-timer>
+        <h3>示例2</h3>
+        <nut-timer 
+        timespacer="600000000" 
+        @end-timer="endTimer2" 
+        formater="dd天hh时mm分ss秒" 
+        starttime="2018-06-05 12:30:30" 
+        endtime="2018-06-06 10:13:30"></nut-timer>       
     </div>
-
-
 </template>
 
 <script>
 export default {
     data(){
-      return {
-        demo:`<nut-timer :timespacer="6000000000"></nut-timer>`
-      }
     },
     methods:{
+      endTimer1() {
+        console.log('示例1倒计时结束了！');
+      },
+      endTimer2() {
+        console.log('示例2倒计时结束了！');
+      }
     }
 }
 </script>
-
-<style>
-
-</style>

src/package/choose/src/choose.vue

@@ -34,7 +34,7 @@
                             </li>
                         </template>
                     </ul>
-                    <div class="area-tab-con">
+                    <div class="area-tab-con" ref="areaTabCon">
                         <ul>
                             <li v-for="item in list" :class="{curr:item[onlyKey] == currItem[onlyKey]}" @click="getNextList(item)">{{item[contentKey]}}</li>
                         </ul>

src/package/coupon/src/coupon.vue

@@ -135,11 +135,10 @@ $unBeanColor: #c2c2c2;
             height: 0.6rem;
             em{
                 display: inline-block;
-                height: 0.3rem;
                 width: 0.72rem;
+                padding: 0.01rem 0;
                 border-radius: 3px;
                 margin-right: 0.06rem;
-                line-height: 0.3rem;
                 font-style: normal;
                 text-align: center;
                 font-size: 0.2rem;

src/package/datepicker/src/datepicker.vue

@@ -31,7 +31,7 @@
 					</div>
 				</div>
 				<div class="nut-datepicker-week">
-					<span v-for="week of weekArr">{{week}}</span>
+					<span v-for="week of weekArr" key="week">{{week}}</span>
 				</div>
 				<div class="nut-datepicker-days" :style="{'width': width}">
 					<div class="nut-datepicker-panel"
@@ -289,7 +289,7 @@ export default {
             let dx = this.endX - this.startX;
 
 
-			if (dx < -20 && Math.abs(dx) > 20 ) {
+			if (dx > 20 &&  Math.abs(dx) > 20) {
 				if( Math.abs(this.translateX) == '66.6') {
 					this.transitionDuration = 0;
 					this.translateX = 0;
@@ -300,7 +300,7 @@ export default {
 				    _this.translateX = index < 3 ? -33.3 * index : -33.3;
 				}, 0);
 
-			} else if (dx > 20 &&  Math.abs(dx) > 20) {
+			} else if (dx < -20 && Math.abs(dx) > 20) {
 				if( Math.abs(this.translateX) == '0') {
 					this.transitionDuration = 0;
 					this.translateX = -66.6;

src/package/dialog/src/dialog.vue

@@ -112,6 +112,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index:9998;
 }
 
 .nut-dialog {
@@ -203,19 +204,23 @@ export default {
     font-size: .32rem;
     border: none;
     background: transparent;
-    border-radius:0;
     &.disabled {
         background: #DADADA;
         color: #A3A3A3;
     }
+    &:only-child{
+        border-radius: 0 0 .2rem .2rem;
+    }
 }
 
 .nut-dialog-ok {
+    border-radius: 0 0 .2rem 0;
     background: #F23030;
     color: #FFF;
 }
 
 .nut-dialog-cancel {
+    border-radius: 0 0 0 .2rem;
     border-top: 1px solid #E0E0E0;
 }
 

src/package/docheader/src/docheader.vue

@@ -14,8 +14,10 @@
                 <use xlink:href="#method"/>
               </svg>
               <figure v-if="showQrCode" class="doc-qr-code">
-                <qriously :value="'http://nutui.jd.com/demo.html#/'+name" :size="150" />
-                <figcaption>手机扫描二维码，查看DEMO</figcaption>
+                <a :href="origin+'/demo.html#/'+name" target="_blank">
+                  <qriously :value="origin+'/demo.html#/'+name" :size="150" />
+                  <figcaption>手机扫描二维码，查看DEMO</figcaption>
+                </a>
               </figure>
           <hr>
           <div class="doc-desc">{{cpt.desc}}</div>
@@ -41,7 +43,7 @@ export default {
   },
   data() {
     return {
-
+      origin:'',
     };
   },
   computed: {
@@ -59,6 +61,7 @@ export default {
 
   },
   mounted() {
+    this.origin = window.location.origin;
   }
 };
 </script>

src/package/elevator/src/elevator.vue

@@ -4,13 +4,14 @@
             id="nut-elevator-ul"
             >
             <li 
-            v-for="(item,index) in dataArray" 
-            key="item.title"
+            v-for="item in dataArray" 
+            v-bind:key="item.title"
             class="nut-list-title" 
             >
                 <h3 class="nut-list-h" :id="item.title">{{item.title}}</h3>
                 <ul class="nut-people-list">
                     <li v-for="(list,idx) in item.list" 
+                    v-bind:key="idx"
                     class="nut-list-name" 
                     :id="list.id?list.id:'list'+item.title+idx"
                     @click="clickList(list,item)"
@@ -23,7 +24,8 @@
             @touchstart="onPointerMove($event)"
             @touchend="onPointerEnd($event)"
             >
-            <li v-for="(item,index) in dataArray" 
+            <li v-for="(item,index) in dataArray"
+            v-bind:key="index" 
             :id="'nav'+index"
             class="nut-nav-list" 
             :style="{height:navListHeight+'rem'}"
@@ -127,6 +129,7 @@ export default {
             }
         },
         onPointerMove(e){
+            e.preventDefault();
             let fontSize = this.getFontSize();
             let dataArrayLength = this.dataArray.length;
             let navHeight = document.getElementById('nut-elevator-nav').clientHeight;

src/package/loading/src/loading.js

@@ -12,6 +12,14 @@ LoadingConstructor.prototype.hide = function(){
 }
 
 let Loading = function (options) {
+    options = Object.assign({}, options);
+    if (typeof (options.mini) === 'undefined' || options.mini) {
+        typeof(options.text)==='undefined' && (options.text = '');
+        typeof(options.iconRotate) === 'undefined' && (options.iconRotate = true);
+        typeof(options.textColor) === 'undefined' && (options.textColor = '#FFF');
+        typeof(options.bgColor) === 'undefined' && (options.bgColor = 'rgba(0,0,0,.7)');
+        typeof (options.fontSize) === 'undefined' && (options.fontSize = 0.22);
+    }
     instance = new LoadingConstructor({
         data: options
     });

src/package/loading/src/loading.vue

@@ -1,20 +1,36 @@
 <template>
-	<nut-mask :visible.sync="visible" :color="bgColor" :fade="fade" :closeOnClickModal="userClose" class="nut-loading">
-    	<span class="nut-loading-icon" v-if="iconUrl"><img :src="iconUrl" alt=""/></span><span class="nut-loading-text" v-if="text" :style="{color:textColor}">{{ text }}</span>
+	<nut-mask :visible.sync="visible" :color="mini?'transparent':bgColor" :fade="fade" :closeOnClickModal="userClose" class="nut-loading">
+        <div class="inner" :style="{'background-color':mini?bgColor:'transparent','height':mini?height+'rem':'auto','width':mini?width+'rem':'auto','border-radius':borderRadius,'padding':padding+'rem'}">
+            <span class="nut-loading-icon" :class="{'rotate':iconRotate}" v-if="mini||iconUrl">
+                <img :src="iconUrl" v-if="iconUrl" alt=""/>
+                <svg v-else width="30" height="30">
+                    <use xlink:href="#loading"/>
+                </svg>
+            </span>
+            <span class="nut-loading-text" v-if="text" :style=" {'color':textColor,'font-size':fontSize+'rem'}">{{ text }}</span>
+        </div>
     </nut-mask>
 </template>
 <script>
+import loadingIcon from '../../../asset/img/svg/loading.svg';
 export default {
     name:'nut-loading',
         data() {
         return {
+            mini:true,
             visible: false,
             maxDuring: 0, //最长显示时间(毫秒),为0不消失
             timer: null,
             bgColor:'rgba(0,0,0,.5)',
             iconUrl:'',
             userClose:true,
+            padding:'0.3',
             text:'加载中...',
+            iconRotate:false,
+            height:'auto',
+            width:'auto',
+            borderRadius:'10%',
+            fontSize:0.28,
             fade:false,
             textColor:'#000000'
         }
@@ -57,9 +73,25 @@ export default {
     display: flex;
     flex-direction: column;
     user-select:none;
-    .nut-loading-icon {
-        display: inline-block;
-        margin-bottom:.2rem;
+    .inner{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing:border-box;
+        span:nth-child(2){
+            margin-top:.2rem;
+        }
+    }
+    .nut-loading-icon{
+        line-height: 0;
+    }
+    .rotate{
+        animation: rotation 2s linear infinite;
+    }
+    @keyframes rotation{
+        0% {-webkit-transform: rotate(0deg);}
+        100% {-webkit-transform: rotate(360deg);}
     }
 }
 </style>

src/package/luckycard/src/luckycard.js

@@ -3,21 +3,11 @@
  *
  * Copyright (c) 2015 Frans Lee dmon@foxmail.com
  *
- * https://github.com/Franslee/lucky-card
- *
  * Licensed under the MIT license:
  *   http://www.opensource.org/licenses/mit-license.php
  *
  * Version:  1.0.3
- *
- * Update:
- *          1.0.1 Fixed a bug with "coverImg".(Thanks to dongnanyanhai reported the problem) 2015-11-10
- *          1.0.2 Fixed a bug when page can be scrolling.(Thanks to agileago's report & Tomatoo's pull) 2016-03-17
- *          1.0.3 Fixed some bugs. 2017-08-17
- *
  */
-/* ;
-(function(window, document, undefined) { */
     'use strict';
 
     /**
@@ -194,7 +184,6 @@
         /* this.scratchDiv = document.getElementById('scratch');*/
         if (!this.scratchDiv) return;
         this.cardDiv = this.scratchDiv.querySelector('.nut-content'); 
-        console.log(this.cardDiv);
         if (!this.cardDiv) return;
         
         this.cHeight = this.cardDiv.clientHeight;
@@ -214,18 +203,4 @@
         return new LuckyCard(settings, callback);
     };
 
-
-/*     if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
-        define(function() {
-            return LuckyCard;
-        });
-    } else if (typeof module !== 'undefined' && module.exports) {
-        module.exports = LuckyCard.case;
-        module.exports.LuckyCard = LuckyCard;
-    } else {
-        window.LuckyCard = LuckyCard;
-    }
-
-})(window, document); */
-
 export default LuckyCard.case;

src/package/qrcode/index.js

@@ -0,0 +1,7 @@
+import QRCode from './src/qrcode.vue';
+
+QRCode.install = function(Vue) {
+  Vue.component(QRCode.name, QRCode);
+};
+
+export default QRCode

src/package/qrcode/src/qrcode.vue

@@ -0,0 +1,52 @@
+<template>
+	<div>
+    <div class="nut-qrcode" id="qrcode">二维码位置</div>
+    </div>
+</template>
+<script>
+import QRCode from './qrcode.js';
+export default {
+    name:'nut-qrcode',
+    props: {
+    	QCWidth:{
+    		type: Number,
+      		default: 100
+    	},
+    	QCHeight:{
+    		type: Number,
+      		default: 100
+    	},
+    	content:{
+    		type: String,
+      		required:true,
+    	},
+    	fontColor:{
+    		type: String,
+      		default: '#000'
+    	},
+    	backColor:{
+    		type: String,
+      		default: '#fff'
+    	}
+    },
+    data() {
+        return {};
+    },
+    mounted(){
+    	this.qrcode();
+    },
+    methods: {
+    	qrcode () {
+	      let qrcode = new QRCode('qrcode', {  
+	        width: this.QCWidth,  
+	        height: this.QCHeight,   // 高度  
+	        text: this.content, // 二维码内容  
+	        colorDark: this.fontColor,  
+	        colorLight: this.backColor,  
+	      })  
+	    }
+    }
+}
+</script>
+<style lang="scss">
+</style>

src/package/rate/src/rate.vue

@@ -4,6 +4,7 @@
             <template v-for="(value,index) in num">
                 <li 
                     @click="touchEvn(index)"
+                    v-bind:key="index"
                     :style="{backgroundImage: 'url('+(index<isActive?activeUrl:originalUrl)+')',height:picHeight+'rem',width:picWidth+'rem'}"
                     class='nut-list'>
                 </li>

src/package/signature/src/signature.vue

@@ -14,7 +14,7 @@ export default {
     name:'nut-signature',
     props: {
 	    lineWidth:  {
-            type: String,
+            type: Number,
             default: 2
         },
 	    strokeStyle:   {
@@ -64,7 +64,7 @@ export default {
 	        _this.moveEventHandler=  _this.moveEventHandler.bind(_this),
 	        _this.endEventHandler= _this.endEventHandler.bind(_this)
 	        _this.$refs.canvas.addEventListener(_this.events[1], _this.moveEventHandler, false);
-	        document.addEventListener(_this.events[2], _this.endEventHandler, false);
+	        _this.$refs.canvas.addEventListener(_this.events[2], _this.endEventHandler, false);
 
 	    },
 
@@ -89,7 +89,7 @@ export default {
 
 	        let _this = this;
 	        _this.$refs.canvas.removeEventListener(_this.events[1], _this.moveEventHandler, false);
-	        document.removeEventListener(_this.events[2], _this.endEventHandler, false);
+	        _this.$refs.canvas.removeEventListener(_this.events[2], _this.endEventHandler, false);
 	    },
 
 	    clear() {

src/package/steps/src/steps.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="nut-steps" :class="stepsId">
-        <div class="progress-list-box" v-for="(item,index) in stepTitleList">
+        <div class="progress-list-box" v-for="(item,index) in stepTitleList" v-bind:key="index">
             <div :class="['progress-list', {'left-border' : index !== stepTitleList.length-1}]">
                 <div class="gap no-border" v-if="index==0" :style="{height: titleTop+'rem'}"></div>
                 <div class="gap"  :style="{height: titleTop+'rem'}" v-else></div>

src/package/swiper/src/swiper.vue

@@ -2,7 +2,7 @@
     <div class="nut-swiper"
         :class="[direction,{'dragging':dragging}]"
         @touchstart="_onTouchStart($event)"
-        @mousedown="_onTouchStart($event)">
+        @mousedown="_onTouchStart($event)" @touchMove.stop>
         <div class="nut-swiper-wrap"
             :style="{
                     'transform':'translate3d('+translateX+'px,'+translateY+'px,0)',
@@ -14,7 +14,7 @@
             <slot></slot>
         </div>
         <div class="nut-swiper-pagination" v-show="paginationVisible">
-            <span class="swiper-pagination-bullet" :class="{'active':index+1 ===currentPage}" v-for="(slide,index) in slideEls" @click="paginationClickable && setPage(index+1)">
+            <span class="swiper-pagination-bullet" :class="{'active':index+1 ===currentPage}" v-for="(slide,index) in slideEls" @click="paginationClickable && setPage(index+1)" :key="index">
             </span>
         </div>
     </div>
@@ -336,7 +336,9 @@ export default {
             let selectedSlide = this.$el.querySelector('.nut-swiper-silde-selected');
             selectedSlide && selectedSlide.classList.remove('nut-swiper-silde-selected');
             this.slideEls[this.currentPage-1].classList.add('nut-swiper-silde-selected');
-
+            if(this.loop){
+                 this._setTranslate(this._getTranslateOfPage(this.currentPage));
+            }
             this.stopAutoPlay = false;
         },
         _isPageChanged(){

src/package/tab/src/tab.vue

@@ -2,7 +2,9 @@
     <div class="nut-tab" :class="{'nut-tab-leftnav' : positionNavCss}">
         <template v-if="positionNav=='top'">
             <div :class="['nut-tab-title',tabType]">
-                <span v-for="(value,index) in tabTitleList" v-on:click="switchTab(index,$event)" class="nut-title-nav-list" 
+                <span v-for="(value,index) in tabTitleList"  
+                v-bind:key="index"
+                v-on:click="switchTab(index,$event)" class="nut-title-nav-list" 
                 :class="['nut-title-nav',{'nut-tab-active' : activeIndex == index}]"
                 >
                 <a :href="value.href" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
@@ -17,7 +19,9 @@
         </template>
         <template v-else-if="positionNav=='left'">
                 <div :class="['nut-tab-title-leftnav',tabType]">
-                    <span v-for="(value,index) in tabTitleList" v-on:click="switchTab(index,$event)" class="nut-title-nav-leftnav" 
+                    <span v-for="(value,index) in tabTitleList" 
+                    v-bind:key="index"
+                    v-on:click="switchTab(index,$event)" class="nut-title-nav-leftnav" 
                     :class="['nut-title-nav',{'nut-tab-active' : activeIndex == index}]"
                     >
                     <a :href="value.href" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
@@ -35,7 +39,9 @@
                     <slot></slot>
                 </div>
                 <div :class="['nut-tab-title-rightnav',tabType]">
-                    <span v-for="(value,index) in tabTitleList" v-on:click="switchTab(index,$event)" class="nut-title-nav-leftnav" 
+                    <span v-for="(value,index) in tabTitleList" 
+                    v-bind:key="index"
+                    v-on:click="switchTab(index,$event)" class="nut-title-nav-leftnav" 
                     :class="['nut-title-nav',{'nut-tab-active' : activeIndex == index}]"
                     >
                     <a :href="value.href" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
@@ -50,7 +56,9 @@
                 <slot></slot>
             </div> 
                 <div :class="['nut-tab-title-bottomnav',tabType]">
-                <span v-for="(value,index) in tabTitleList" v-on:click="switchTab(index,$event)" class="nut-title-nav-list" 
+                <span v-for="(value,index) in tabTitleList" 
+                v-bind:key="index"
+                v-on:click="switchTab(index,$event)" class="nut-title-nav-list" 
                 :class="['nut-title-nav',{'nut-tab-active' : activeIndex == index}]"
                 >
                 <a :href="value.href" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">

src/package/timer/src/timer.vue

@@ -9,11 +9,33 @@
             'timespacer':{
                 type: [Number,String],
                 default: 0
+            },
+            'starttime': {
+                type: [Number,String],
+                default: 0
+            },
+            'endtime': {
+                type: [Number,String,Date],
+                default: 0
+            },
+            'formater': {
+                type: [Number,String,Date],
+                default: 'hh:mm:ss'
+            }
+        },
+        mounted() {
+            let self = this;
+            this.time();
+            if(self.starttime!=0 && self.endtime!=0) {
+                self.endtime = (self.endtime instanceof Date)?self.endtime:(new Date(self.endtime));
+                self.starttime = (self.starttime instanceof Date)?self.starttime:(new Date(self.starttime));
+                self.timespace = self.endtime.getTime() - self.starttime.getTime();
             }
         },
         computed: {
             timerSecond() {
-                return this.formatMs(this.timespace);
+                let self = this;
+                return self.dateFormater(self.timespace);
             }
         },
         data() {
@@ -22,9 +44,6 @@
                 timespace: this.timespacer
             }
         },
-        created() {
-            this.time();
-        },
         methods: {
             //倒计时
             time() {
@@ -35,18 +54,31 @@
                         self.$emit('end-timer');
                         clearInterval(self.timer);
                     }
-                    
                 }, 1000);
             },
-            //毫秒数格式化成为hh:mm:ss
-            formatMs(ms) {
-                let self = this;
-                let h = Math.floor(ms / 1000 / 60 / 60 % 24);
-                let m = Math.floor(ms / 1000 / 60 % 60);
-                let s = Math.floor(ms / 1000 % 60);
-                let hms = (h < 10 ? ('0' + h) : h) + ':' + (m < 10 ? ('0' + m) : m) + ':' + (s < 10 ? ('0' + s) : s);
-                return hms;
+            dateFormater: function(ms) {
+                /*日期字典*/
+                var timeMap = {
+                    'd': Math.floor(ms / 1000 / 60 / 60 / 24 % 24), //日 
+                    'h': Math.floor(ms / 1000 / 60 / 60 % 24), //小时 
+                    'm': Math.floor(ms / 1000 / 60 % 60), //分 
+                    's': Math.floor(ms / 1000 % 60), //秒 
+                };
+                var formater = this.formater;
+                /*正则替换*/
+                return formater.replace(/([yMdhmsS])+/g, function(all, t) {
+                    var v = timeMap[t];
+                    if ((String(v)).length < all.length) {
+                        var zero = '';
+                        for (var i = 0; i < all.length - String(v).length; i++) {
+                            zero += '0';
+                        }
+                        return zero + v;
+                    }
+                    return v;
+                });
             }
+
         }
     }
 </script>

src/view/loading.vue

@@ -4,17 +4,15 @@
         :name="$route.name" 
         :chName="$route.params.chnName" 
         type="Component" 
-        desc="加载等待蒙层。" 
         :showQrCode="true"></nut-docheader>
-        <!-- <h1>Loading</h1>
-        <p>“加载中”提示蒙层。</p> -->
+
         <h5>依赖</h5>
         <h6>Mask</h6>
         <h5>基本用法</h5>
         <nut-codebox code="this.$loading(options);"></nut-codebox>
-        <!-- <a class="button button-primary" href="javascript:;" @click="showLoading">Demo</a> -->
+
         <h5>示例</h5>
-        <nut-codebox :code="demo"></nut-codebox>
+        <nut-codebox :code="demo" imgUrl="../asset/img/demo/loading1.png"></nut-codebox>
         <nut-codebox code="export default {
     data(){
         return{
@@ -23,15 +21,14 @@
     },
     mounted(){
       this.loading = this.$loading({
-        maxDuring:5000,
-        iconUrl:'//misc.360buyimg.com/mtd/pc/o2_toolbar/1.0.0/home/images/loading.gif'
+        fade:true
       });
     },
     methods:{
-      showLoading(options){
+      showLoading(){
         this.loading.show();
       },
-      hideLoading(options){
+      hideLoading(){
         this.loading.hide();
       },
     }
@@ -52,6 +49,13 @@
             </thead>
             <tbody>
               <tr>
+                <td>mini</td>
+                <td>迷你模式（非全屏），默认</td>
+                <td>Boolean</td>
+                <td>true</td>
+                <td>--</td>
+              </tr>
+              <tr>
                 <td>maxDuring</td>
                 <td>最大展示时长</td>
                 <td>Number</td>
@@ -62,7 +66,7 @@
                 <td>bgColor</td>
                 <td>遮罩层颜色</td>
                 <td>String</td>
-                <td>'rgba(0,0,0,.5)'</td>
+                <td>mini模式：'rgba(0,0,0,.7)'<br>非mini模式：'rgba(0,0,0,.5)'</td>
                 <td>支持HEX、RGBA</td>
               </tr>
               <tr>
@@ -73,25 +77,59 @@
                 <td>--</td>
               </tr>
               <tr>
+                <td>iconRotate</td>
+                <td>ICON无限旋转动画，mini模式默认开启</td>
+                <td>Boolean</td>
+                <td>mini模式：true<br>非mini模式：false</td>
+                <td>--</td>
+              </tr>
+              <tr>
                 <td>text</td>
                 <td>提示文字</td>
                 <td>String</td>
-                <td>'加载中...'</td>
+                <td>mini模式：''<br>非mini模式：'加载中...'</td>
                 <td>--</td>
               </tr>
-              </tr>
               <tr>
                 <td>textColor</td>
                 <td>文字颜色</td>
                 <td>String</td>
-                <td>'#000000'</td>
+                <td>mini模式：'#FFFFFF'<br>非mini模式：'#000000'</td>
                 <td>支持HEX、RGBA</td>
               </tr>
               <tr>
-                <td>userClose</td>
-                <td>是否允许用户点击关闭</td>
-                <td>Boolean</td>
-                <td>true</td>
+                <td>fontSize</td>
+                <td>文字大小，单位rem</td>
+                <td>Number/String</td>
+                <td>mini模式：0.22<br>非mini模式：0.28</td>
+                <td>支持HEX、RGBA</td>
+              </tr>
+              <tr>
+                <td>height</td>
+                <td>mini模式框体高度，单位rem</td>
+                <td>Number/String</td>
+                <td>'auto'</td>
+                <td>--</td>
+              </tr>
+              <tr>
+                <td>width</td>
+                <td>mini模式框体宽度，单位rem</td>
+                <td>Number/String</td>
+                <td>'auto'</td>
+                <td>--</td>
+              </tr>
+              <tr>
+                <td>borderRadius</td>
+                <td>mini模式圆角边框</td>
+                <td>String</td>
+                <td>'10%'</td>
+                <td>--</td>
+              </tr>
+              <tr>
+                <td>padding</td>
+                <td>mini模式内边距，单位rem</td>
+                <td>String</td>
+                <td>'0.3'</td>
                 <td>--</td>
               </tr>
               <tr>
@@ -111,23 +149,13 @@
 export default {
     data(){
         return{
-          loading:null,
           demo:`<a href="javascript:;" @click="showLoading">Demo</a>`
         }
     },
     mounted(){
-      this.loading = this.$loading({
-        maxDuring:5000,
-        iconUrl:'//misc.360buyimg.com/mtd/pc/o2_toolbar/1.0.0/home/images/loading.gif'
-      });
+
     },
     methods:{
-      showLoading(options){
-        this.loading.show();
-      },
-      hideLoading(options){
-        this.loading.hide();
-      },
     }
 }
 </script>

src/view/qrcode.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <nut-docheader 
+        :name="$route.name" 
+        :chName="$route.params.chnName" 
+        type="Component" 
+        desc="一种可以生成二维码的组件。" 
+        :showQrCode="true"></nut-docheader>
+        <h6>默认用法</h6>
+        <nut-codebox :code="demo1"  imgUrl="../asset/img/demo/qrcode1.png"></nut-codebox>
+
+        
+        <!-- <pre><code v-highlight v-text="demo1"></code></pre> -->
+        <h6>可配置二维码内容，和配置二维码的高度和宽度</h6>
+        <!-- DEMO代码 -->
+        <nut-codebox :code="demo2"  imgUrl="../asset/img/demo/qrcode2.png"></nut-codebox>
+        <!-- <pre><code v-highlight v-text="demo2" ></code></pre> -->
+        <h5>Props</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+              <thead>
+                <tr>
+                  <th>参数</th>
+                  <th>说明</th>
+                  <th>类型</th>
+                  <th>默认值</th>
+                  <th>可选值</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>content</td>
+                  <td>二维码内容（必填）</td>
+                  <td>String</td>
+                  <td>--</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>QCWidth</td>
+                  <td>二维码图片的宽度（单位px）</td>
+                  <td>Number</td>
+                  <td>100</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>QCHeight</td>
+                  <td>二维码图片的高度（单位px）</td>
+                  <td>Number</td>
+                  <td>100</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>fontColor</td>
+                  <td>二维码前面的颜色</td>
+                  <td>Number</td>
+                  <td>0.5</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>backColor</td>
+                  <td>二维码背景色</td>
+                  <td>Number</td>
+                  <td>0.5</td>
+                  <td>--</td>
+                </tr>
+              </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            QCWidth:100,
+            QCHeight:100,
+            text:'http://www.baidu.com',
+            fontColor:'#000',
+            backColor:'#fff',
+            demo1:`<nut-qrcode content='http://www.baidu.com'></nut-qrcode>`,
+            demo2:`<nut-qrcode QCWidth=150 
+            QCHeight=150 
+            content='http://www.baidu.com' 
+            fontColor='green' 
+            backColor='#fff'>
+</nut-qrcode>`
+        }
+        
+    },
+    methods:{
+        
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/view/sideslipbutton.vue

@@ -37,6 +37,13 @@
                 <td>true</td>
                 <td>true/false</td>
               </tr>
+              <tr>
+                <td>customClass</td>
+                <td>自定义样式名</td>
+                <td>String</td>
+                <td> </td>
+                <td> </td>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -76,16 +83,21 @@
 export default {
     data(){
         return{
-            demo: `<nut-sideslipbutton @slide-left="slideLeft" @slide-right="slideRight" @slide-no="slideNo" :during="0.5">
-    <div slot="slidedom" class="slidedom">
-        <div class="addr">
-            <p class="name-mobile">159****8888</p>
-            <p class="full-addr">北京市大兴区亦庄经济开发中心京东大厦B座</p>
-        </div>
-        <a class="addr-edit" href="javascript:void(0)"></a>
-    </div>
-    <div slot="slideoper" class="slideoper">删除/收藏</div>
-</nut-sideslipbutton>`
+            demo: `<nut-sideslipbutton 
+        @slide-left="slideLeft" 
+        @slide-right="slideRight" 
+        @slide-no="slideNo" 
+        during="0.2" 
+        customClass="aaaaa">
+            <div slot="slidedom" class="slidedom">
+                <div class="addr">
+                    <p class="name-mobile">159****8888</p>
+                    <p class="full-addr">北京市大兴区亦庄经济开发中心京东大厦B座</p>
+                </div>
+                <a class="addr-edit" href="javascript:void(0)"></a>
+            </div>
+            <div slot="slideoper" class="slideoper">删除/收藏</div>
+        </nut-sideslipbutton>`
         }
     },
     methods:{

src/view/timer.vue

@@ -6,16 +6,33 @@
         type="Component" 
         desc="倒计时组件。" 
         :showQrCode="true"></nut-docheader>
-        <h5>示例</h5>
-        <nut-timer :timespacer="6000000000"  @end-timer="endTimer"></nut-timer>
-        <nut-codebox :code="demo"></nut-codebox>     
+        <h5>示例1</h5>
+        <nut-timer 
+        :timespacer="600000000"  
+        @end-timer="endTimer1"></nut-timer>
+        <nut-codebox :code="demo1"></nut-codebox>     
         <nut-codebox code="export default {
     methods:{
-      endTimer() {
-        console.log('倒计时结束了！');
+      endTimer1() {
+        console.log('示例1的倒计时结束了！');
       }
     }
-}"></nut-codebox>     
+}"></nut-codebox>   
+      <h5>示例2</h5>
+        <nut-timer 
+        timespacer="600000000" 
+        @end-timer="endTimer2" 
+        formater="dd天hh时mm分ss秒" 
+        starttime="2018-06-05 12:30:30" 
+        endtime="2018-06-06 10:13:30"></nut-timer>
+        <nut-codebox :code="demo2"></nut-codebox>     
+        <nut-codebox code="export default {
+    methods:{
+      endTimer2() {
+        console.log('示例2的倒计时结束了！');
+      }
+    }
+}"></nut-codebox>  
 
         <h5>Props</h5>
         <div class="tbl-wrapper">
@@ -32,11 +49,32 @@
           <tbody>
             <tr>
               <td>timespacer</td>
-              <td>需要倒计时的毫秒数</td>
+              <td>需要倒计时的毫秒数，如果有starttime和startend参数则此参数不生效</td>
               <td>Number</td>
               <td>0</td>
               <td>--</td>
             </tr>
+            <tr>
+              <td>formater</td>
+              <td>倒计时显示格式，d对应剩余天数，h对应剩余小时，m对应剩余分钟，s对应剩余秒</td>
+              <td>String</td>
+              <td>hh:mm:ss</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>starttime</td>
+              <td>倒计时起始时间，可以为ms格式，可以是时间格式</td>
+              <td>Number | String | Date</td>
+              <td>0</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>startend</td>
+              <td>倒计时结束时间，可以为ms格式，可以是时间格式</td>
+              <td>Number String | Date</td>
+              <td>0</td>
+              <td>--</td>
+            </tr>
           </tbody>
         </table>
         </div>
@@ -68,15 +106,24 @@
 export default {
     data(){
       return {
-        demo:`<nut-timer 
+        demo1:`<nut-timer 
 :timespacer="6000000000" 
 @end-timer="endTimer"
-></nut-timer>`
+></nut-timer>`,
+        demo2:`<nut-timer 
+        timespacer="600000000" 
+        @end-timer="endTimer2" 
+        formater="dd天hh时mm分ss秒" 
+        starttime="2018-06-05 12:30:30" 
+        endtime="2018-06-06 10:13:30"></nut-timer>`
       }
     },
     methods:{
-      endTimer() {
-        console.log('倒计时结束了！');
+      endTimer1() {
+        console.log('示例1倒计时结束了！');
+      },
+      endTimer2() {
+        console.log('示例2倒计时结束了！');
       }
     }
 }

webpack.config.js

@@ -122,7 +122,7 @@ if (isProduction) {
     webpackConfig.devServer = {
         contentBase: path.resolve(__dirname, 'dist'),
         compress: true, //gzip压缩
-        //host:'192.168.191.1',
+        //host:'10.0.39.18',
         historyApiFallback: true
     };
 }