修改select异步多次请求问题。

：

browserslist

@@ -0,0 +1,3 @@
+> 1%
+Android >= 4
+iOS >= 8

config.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.7",
+  "version": "1.2.9",
   "packages": [
     {
       "name": "DatePicker",
@@ -245,6 +245,7 @@
       "name": "Handle",
       "chnName": "工具函数",
       "type": "filter",
+      "showDemo":false,
       "desc": "工具函数。"
     },
     {
@@ -291,6 +292,20 @@
       "desc": "一种可以配置的二维码生成组件",
       "type": "component",
       "showDemo": false
+    },
+    {
+      "name": "Animate",
+      "chnName": "动画指令",
+      "desc": "基于animate.css的动画指令",
+      "type": "directive",
+      "showDemo": true
+    },
+    {
+      "name": "Progress",
+      "chnName": "进度条",
+      "desc": "进度条",
+      "type": "component",
+      "showDemo": true
     }
   ]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nutui/nutui",
   "description": "基于Vue2的轻量级移动端UI组件库",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "author": "jdc-fe",
   "main": "dist/nutui.js",
   "keywords": [

postcss.config.js

@@ -1,7 +1,5 @@
 module.exports = {
     plugins: [
-        require('autoprefixer')({
-                            browsers: ['last 2 versions', 'Android >= 4.0','iOS >= 8.0','last 5 QQAndroid versions','last 5 UCAndroid versions']
-                        })
+        require('autoprefixer')()
     ]
 }

scripts/rmDist.js

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

src/app.vue

@@ -1,7 +1,7 @@
 <template>
   <div @click="wrapperClick" class="sys-box">
     <!-- <vue-progress-bar></vue-progress-bar> -->
-    <div class="sys-header"><div class="sys-inner"><a href="javascript:;" class="sys-logo pc-logo">NutUI</a>
+    <div class="sys-header"><div class="sys-inner"><a href="//nutui.jd.com/" class="sys-logo pc-logo">NutUI</a>
     <a href="javascript:;" @click.stop="toggleMenu()"  class="sys-logo m-logo">NutUI</a>
     <ul class="sys-menu">
           <li><a href="https://github.com/jdf2e/nutui" class="github">

src/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-wrapper">
     <router-view class="demo-nav" name="demonav"></router-view>
-    <keep-alive include="index">
+    <keep-alive include="index" exclude="luckycard,lazyload">
       <router-view class="demo" name="main" v-transition></router-view>
     </keep-alive>
   </div>

src/demo/choose.vue

@@ -10,7 +10,7 @@
         </div>
         <nut-choose 
         :visibile="showChoose"
-        :needCache="true"
+        :needCache="false"
         @init-choose="initChoose" 
         @close-choose="closeChoose" 
         @choose-item="closeItem"

src/demo/lazyload.vue

@@ -3,8 +3,6 @@
         <nut-demoheader 
         :name="$route.name"
         ></nut-demoheader>
-        <!-- DEMO区域 -->
-        <!-- <nut-switch :height="30" :width="60" @switch-on="switchOn" @switch-off="switchOff"></nut-switch> -->
         
         <!-- DEMO代码 -->
         <div 
@@ -29,6 +27,7 @@ import Vue from 'vue';
 import lazyload from '../package/lazyload/index.js';
 
 export default {
+    name:'lazyload',
     data(){
         return{
         }

src/demo/luckycard.vue

@@ -16,6 +16,7 @@
 
 <script>
 export default {
+  name:'luckycard',
   data() {
     return {
         coverImage:'../asset/img/luckycard-demo.png'

src/demo/progress.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <p>默认用法</p>
+        <nut-progress percent="15" height="10px"/>
+        <p>设置高度和颜色</p>
+        <nut-progress height="18px" color="#33C3F0" percent="23" />
+        <p>内联显示进度数</p>
+        <nut-progress percent="20" showText="in" height="20px" />
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/demo/textbox.vue

@@ -35,7 +35,8 @@
         <p>不显示字数限制</p>
         <nut-textbox :limitShow="false" :maxNum="10" ></nut-textbox>
        
-        
+        <h6>输入回调返回文字</h6>
+        <nut-textbox  :maxNum="10" txtAreaH="2" @inputFunc="inputText" ></nut-textbox>
     </div>
 </template>
 
@@ -71,6 +72,9 @@ textBgColor="#feefef">
     methods:{
         overLength(){
             alert('字数超出');
+        },
+        inputText(val){
+           alert(val);
         }
     }
 }

src/package/animate/index.js

@@ -0,0 +1,2 @@
+import Animate from './src/index.js';
+export default Animate;

src/package/animate/src/animate.scss

@@ -0,0 +1,10 @@
+// Our animations
+.animated {
+	animation-duration: 1s;
+	animation-fill-mode: both;
+}
+@import "./bounce/bounce";
+@import "./fade/fade";
+@import "./rotate/rotate";
+@import "./slide/slide";
+@import "./zoom/zoom";

src/package/animate/src/bounce/bounce.scss

@@ -0,0 +1,240 @@
+/*bounceIn, bounceOut*/
+@keyframes bounceIn {
+    from,
+    20%,
+    40%,
+    60%,
+    80%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    0% {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+
+    20% {
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    40% {
+        transform: scale3d(.9, .9, .9);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(1.03, 1.03, 1.03);
+    }
+
+    80% {
+        transform: scale3d(.97, .97, .97);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+    }
+}
+@keyframes bounceOut {
+    20% {
+        transform: scale3d(.9, .9, .9);
+    }
+
+    50%,
+    55% {
+        opacity: 1;
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+}
+
+/*bounceInUp, bounceOutUp*/
+@keyframes bounceInUp {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    from {
+        opacity: 0;
+        transform: translate3d(0, 3000px, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(0, -20px, 0);
+    }
+
+    75% {
+        transform: translate3d(0, 10px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, -5px, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes bounceOutUp {
+    20% {
+        transform: translate3d(0, -10px, 0);
+    }
+
+    40%,
+    45% {
+        opacity: 1;
+        transform: translate3d(0, 20px, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, -2000px, 0);
+    }
+}
+
+/*bounceInDown, bounceOutDown*/
+@keyframes bounceInDown {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(0, -3000px, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(0, 25px, 0);
+    }
+
+    75% {
+        transform: translate3d(0, -10px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, 5px, 0);
+    }
+
+    to {
+        transform: none;
+    }
+}
+@keyframes bounceOutDown {
+    20% {
+        transform: translate3d(0, 10px, 0);
+    }
+
+    40%,
+    45% {
+        opacity: 1;
+        transform: translate3d(0, -20px, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, 2000px, 0);
+    }
+}
+
+/*bounceInLeft, bounceOutLeft*/
+@keyframes bounceInLeft {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(-3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(-10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+    }
+}
+@keyframes bounceOutLeft {
+    20% {
+        opacity: 1;
+        transform: translate3d(20px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(-2000px, 0, 0);
+    }
+}
+
+/*bounceInRight, bounceOutRight*/
+@keyframes bounceInRight {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    from {
+        opacity: 0;
+        transform: translate3d(3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(-25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(-5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+    }
+}
+@keyframes bounceOutRight {
+    20% {
+        opacity: 1;
+        transform: translate3d(-20px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(2000px, 0, 0);
+    }
+}

src/package/animate/src/fade/fade.scss

@@ -0,0 +1,148 @@
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fadeOutDown {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        transform: translate3d(-100%, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fadeOutLeft {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        transform: translate3d(100%, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fadeOutRight {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@keyframes fadeInRightBig {
+    from {
+        opacity: 0;
+        transform: translate3d(2000px, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fadeOutRightBig {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(2000px, 0, 0);
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fadeOutUp {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+@keyframes fadeInUpBig {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 2000px, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+

src/package/animate/src/rotate/rotate.scss

@@ -0,0 +1,135 @@
+@keyframes rotateIn {
+    from {
+        transform-origin: center;
+        transform: rotate3d(0, 0, 1, -200deg);
+        opacity: 0;
+    }
+
+    to {
+        transform-origin: center;
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes rotateOut {
+    from {
+        transform-origin: center;
+        opacity: 1;
+    }
+
+    to {
+        transform-origin: center;
+        transform: rotate3d(0, 0, 1, 200deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateInDownLeft {
+    from {
+        transform-origin: left bottom;
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+
+    to {
+        transform-origin: left bottom;
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes rotateOutDownLeft {
+    from {
+        transform-origin: left bottom;
+        opacity: 1;
+    }
+
+    to {
+        transform-origin: left bottom;
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateInDownRight {
+    from {
+        transform-origin: right bottom;
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+
+    to {
+        transform-origin: right bottom;
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes rotateOutDownRight {
+    from {
+        transform-origin: right bottom;
+        opacity: 1;
+    }
+
+    to {
+        transform-origin: right bottom;
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateInUpLeft {
+    from {
+        transform-origin: left bottom;
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+
+    to {
+        transform-origin: left bottom;
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes rotateOutUpLeft {
+    from {
+        transform-origin: left bottom;
+        opacity: 1;
+    }
+
+    to {
+        transform-origin: left bottom;
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateInUpRight {
+    from {
+        transform-origin: right bottom;
+        transform: rotate3d(0, 0, 1, -90deg);
+        opacity: 0;
+    }
+
+    to {
+        transform-origin: right bottom;
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes rotateOutUpRight {
+    from {
+        transform-origin: right bottom;
+        opacity: 1;
+    }
+
+    to {
+        transform-origin: right bottom;
+        transform: rotate3d(0, 0, 1, 90deg);
+        opacity: 0;
+    }
+}
+

src/package/animate/src/slide/slide.scss

@@ -0,0 +1,87 @@
+@keyframes slideInDown {
+    from {
+        transform: translate3d(0, -100%, 0);
+        visibility: visible;
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideOutDown {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        visibility: hidden;
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+@keyframes slideInLeft {
+    from {
+        transform: translate3d(-100%, 0, 0);
+        visibility: visible;
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideOutLeft {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        visibility: hidden;
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes slideInUp {
+    from {
+        transform: translate3d(0, 100%, 0);
+        visibility: visible;
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideOutUp {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        visibility: hidden;
+        transform: translate3d(0, -100%, 0);
+    }
+}

src/package/animate/src/zoom/zoom.scss

@@ -0,0 +1,142 @@
+/*zoomIn, zoomOut*/
+@keyframes zoomIn {
+    from {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+@keyframes zoomOut {
+    from {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+/*zoomInUp, zoomOutUp*/
+@keyframes zoomInUp {
+    from {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+@keyframes zoomOutUp {
+    40% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+        transform-origin: center bottom;
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+/*zoomInDown，zoomOutDown*/
+@keyframes zoomInDown {
+    from {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+@keyframes zoomOutDown {
+    40% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+        transform-origin: center bottom;
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+/*zoomInLeft, zoomOutLeft*/
+@keyframes zoomInLeft {
+    from {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+@keyframes zoomOutLeft {
+    40% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(.1) translate3d(-2000px, 0, 0);
+        transform-origin: left center;
+    }
+}
+
+/*zoomInRight, zoomOutRight*/
+@keyframes zoomInRight {
+    from {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+@keyframes zoomOutRight {
+    40% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(.1) translate3d(2000px, 0, 0);
+        transform-origin: right center;
+    }
+}

src/package/choose/src/choose.vue

@@ -101,7 +101,7 @@ export default {
     watch:{
         'visibile'(val,oldVal){
             if(!val) {
-                this.$emit('close-choose');
+                // this.$emit('close-choose');
                 if(!this.needCache) {
                     this.resetData();
                 }
@@ -146,6 +146,7 @@ export default {
         },
         getNextList(item){
             this.tempDatas[this.tabIndex-1].item = item;
+            this.currItem = item;
             this.$emit('choose-item',item,this.tabIndex);
         },
         getCurrList(index){

src/package/progress/index.js

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

src/package/progress/src/progress.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="nut-progress">
+        <div :class="['nut-progress-cont', showText !== 'out'? 'nut-progress-in': 'nut-progress-out']" :style="{height}">
+            <div class="nut-progress-bar" :style="{background: color, width: per}">
+                <div class="nut-progress-text" :style="{lineHeight: height}" v-if="showText !== 'out'">{{per}}</div>
+            </div>
+        </div>
+        <div class="nut-progress-text" :style="{lineHeight: height}" v-if="showText === 'out'">{{per}}</div>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-progress',
+    props: {
+        percent: {
+            type: [String, Number],
+            default: '0'
+        },
+        color: {
+            type: String,
+            default: '#f23030'
+        },
+        height: {
+            type: String,
+            default: '.06rem'
+        },
+        showText: {
+            type: String,
+            default: 'out'
+        }
+    },
+    computed: {
+        per() {
+            let per = String(this.percent);
+            if(per.lastIndexOf('%') == per.length - 1) {
+                per = parseFloat(per.slice(0, -1));
+            }else{
+                per = parseFloat(per);
+            }
+            return Math.min(per, 100) + '%';
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+    }
+}
+</script>
+<style lang="scss">
+.nut-progress{
+    position: relative;
+}
+.nut-progress-cont{
+    border-radius: 100px;
+    background-color: #ebeef5;
+    overflow: hidden;
+    position: relative;
+}
+.nut-progress-bar{
+    border-radius: 100px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+}
+.nut-progress-text{
+    float: right;
+    font-size: .14rem;
+    color: #fff;
+}
+.nut-progress-in{
+    .nut-progress-text{
+        margin-right: 5px;
+    }
+}
+.nut-progress-out{
+    margin-right: 38px;
+    &+.nut-progress-text{
+        width: 31px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: #666;
+    }
+}
+</style>

src/package/textbox/src/textbox.vue

@@ -68,6 +68,8 @@ export default {
            	}else{
                 this.errorState = false;
            	}
+            this.$emit('inputFunc',this.textInfo);
+
         }
     }
 }

src/router.js

@@ -5,7 +5,7 @@ import Conf from '../config.json';
 const Nav = () => import('./view/nav.vue');
 const Intro = () => import('./view/intro.vue');
 const Phone = () => import('./view/phone.vue');
-
+const Cases = () => import('./view/cases.vue');
 Vue.use(VueRouter);
 
 const routes = [
@@ -30,6 +30,13 @@ const routes = [
       phone:Phone,
       
     }
+  },
+  { 
+    name:'cases',
+    path: '/cases', 
+    components:{
+      main:Cases,
+    }
   }
 ];
 

src/view/animate.vue

@@ -0,0 +1,96 @@
+<template>
+    <div>
+      <nut-docheader
+        :name="$route.name"
+        :chName="$route.params.chnName"
+        type="directive"
+        desc="基于animate.css的动画指令"
+        :showQrCode="true"></nut-docheader>
+        <h5>示例</h5>
+        <nut-codebox :code="demo1"></nut-codebox>
+        <h5>Options</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>v-nut-animate</td>
+              <td>指令</td>
+              <td>String</td>
+              <td>--</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>name</td>
+              <td>绑定的动画keyframe名称</td>
+              <td>String</td>
+              <td>必填</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>customAnimations</td>
+              <td>animate.css之外自定义的动画</td>
+              <td>Array</td>
+              <td>--</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>delay</td>
+              <td>规定在动画开始之前的延迟</td>
+              <td>Number</td>
+              <td>--</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>duration</td>
+              <td>规定完成动画所花费的时间</td>
+              <td>Number</td>
+              <td>--</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>iterationCount</td>
+              <td>规定动画应该播放的次数</td>
+              <td>String</td>
+              <td>1</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>fillMode</td>
+              <td>规定是否应该轮流反向播放动画</td>
+              <td>String</td>
+              <td>--</td>
+              <td>--</td>
+            </tr>
+          </tbody>
+        </table>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+          demo1:`<div v-nut-animate='{
+      name: "dash",
+      delay: 1000,
+      duration: 1500,
+      iterationCount: "infinite"
+}'>测试</div>`,
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style>
+</style>

src/view/cases.vue

@@ -0,0 +1,368 @@
+<template>
+    <div class="wrapper">
+        <h1 class="title-box">实践案例</h1>
+        <p>从NUTUI诞生起，就逐渐应用在多个项目中，相信以后会有越来越多的项目接入到NUTUI中。以下是应用了NUTUI的项目示例。</p>
+        <h4 class="nav-box"><b class="icon"></b>京东&nbsp;APP</h4>
+        <div class="box" v-for="(item,index) in appList" v-bind:key="index">
+            <p class="box-title"><b class="title-round"></b>{{item.title}}</p>
+            <div class="box-entry">{{item.entry}}</div>
+            <div class="box-intro">{{item.intro}}</div>
+            <div class="box-image">
+                <img :src='item.imageSrc' class="images" />
+            </div>
+        </div>
+        <h4 class="nav-box"><b class="icon"></b>京东&nbsp;ME</h4>
+        <ul class="logos">
+            <li v-for="(list,index) in meList" v-bind:key="index">
+                <img class="logos-img" :src="list.imageSrc"/>
+                <p class="logos-text">{{list.title}}</p>
+            </li>
+        </ul>
+        <div class="line"></div>
+        <h4 class="nav-box"><b class="icon"></b>大客户</h4>
+        <ul class="logos">
+            <li v-for="(list,index) in clientList" v-bind:key="index">
+                <div class="client-big" v-if="list.title == '生活杉德'">
+                    <img class="logos-img client-bigimg" :src="list.imageSrc"/>
+                </div>
+                
+                <img class="logos-img client-img" :src="list.imageSrc" v-if="list.title !== '生活杉德'"/>
+                <p class="logos-text">{{list.title}}</p>
+            </li>
+        </ul>
+        <div class="line"></div>
+        <h4 class="nav-box"><b class="icon"></b>其他</h4>
+        <ul class="logos">
+            <li v-for="(list,index) in otherList" v-bind:key="index">
+                <img class="logos-img other-img" :src="list.imageSrc"/>
+                <p class="logos-text">{{list.title}}</p>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+          appList:[
+            {
+              title:'PLUS会员',
+              entry:'京东APP首页—PLUS会员',
+              intro:'京东为向核心客户提供更优质的购物体验，推出了京东PLUS会员，包含购物回馈、自营运费补贴、畅读电子书、退换无忧、专属客服和专享商品等权益，全方位提升和丰富网购特权。',
+              imageSrc:'//img10.360buyimg.com/uba/jfs/t23413/151/250900924/114472/8b24b17f/5b2a2b55Ndc255cf7.png'
+            },
+            {
+              title:'京保养',
+              entry:'京东APP-车保养-京保养',
+              intro:'京保养实现了汽车服务市场的业务快速接入，提供购买保养套餐后的绑车、预约门店进行保养等一系列移动端线上操作功能，让用户购买一次，多个门店可选择并进行爱车保养。',
+              imageSrc:'//img11.360buyimg.com/uba/jfs/t20998/154/1477000841/77697/dc24002b/5b2a0f0eNfcdaa2f2.jpg'
+            },
+            {
+              title:'宽带办理',
+              entry:'京东APP-充值缴费-宽带办理',
+              intro:'宽带项目作为电商进入客户家庭的关键入口，利用运营商现有渠道，能集约对接各省市运营商，且支持线下/第三方各渠道下单。',
+              imageSrc:'//img11.360buyimg.com/uba/jfs/t22624/176/252723731/122091/20837dc4/5b2a17baNe4cc750f.png'
+            },
+            {
+              title:'TELink联合校招',
+              entry:'京东APP-校园生活-大学生活-校园招聘',
+              intro:'Telink无界选人移动端业务旨在联合企业、校园、学生，进行无界联合招聘，为联合招聘提供移动端的支持。与校园业务结合达成合作。京东校园协调全国2000余所院校的500万认证学生资源以及各品牌方，开展线下校园招聘会，并提供TElink无界招聘在京东app的专属入口。',
+              imageSrc:'//img14.360buyimg.com/uba/jfs/t21133/306/1869282378/85523/4acb84e9/5b3c8ca6Nec7cf1b3.jpg'
+            }
+          ],
+          meList:[
+            {
+                title:'预约中心',
+                imageSrc:'../asset/img/cases/yuyue_icon.png',
+            },
+            {
+                title:'用户之声',
+                imageSrc:'../asset/img/cases/user_icon.png',
+            },
+            {
+                title:'一线支援',
+                imageSrc:'../asset/img/cases/online_icon.png',
+            },
+            {
+                title:'e维平台',
+                imageSrc:'../asset/img/cases/e_platform.png',
+            },
+            {
+                title:'差旅服务',
+                imageSrc:'../asset/img/cases/travel.png',
+            },
+            {
+                title:'智能停车场',
+                imageSrc:'../asset/img/cases/car_stop.png',
+            },
+            {
+                title:'访客预约',
+                imageSrc:'../asset/img/cases/visitor.png',
+            },
+            {
+                title:'京东福利',
+                imageSrc:'../asset/img/cases/fuli.png',
+            }
+          ],
+          clientList:[
+            {
+                title:'年节福利',
+                imageSrc:'../asset/img/cases/jingxi.png',
+            },
+            {
+                title:'生活杉德',
+                imageSrc:'../asset/img/cases/shande_icon.png',
+            }
+          ],
+          otherList:[
+            {
+                title:'智慧党建',
+                imageSrc:'../asset/img/cases/dangjian_icon.png',
+            }
+          ]
+        }
+    },
+    components: {
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper{
+    padding-bottom:50px;
+    background:#fff;
+}
+.title-box{
+    color: #0f0649;
+    margin-bottom: 20px;
+    margin-top: 8px;
+    font-size: 30px;
+    line-height: 38px;
+}
+p{
+    color: #314659;
+    font-size: 16px;
+    line-height: 2;
+}
+.nav-box{
+    display:inline-block;
+    font-size: 26px;
+    height:25px;
+    line-height: 25px;
+    color:#a38249;
+    &:hover{
+        animation: swing 1s linear both;
+    }
+    .line{
+        vertical-align:middle;
+        width:15px;
+        height:5px;
+        background:#a38249;
+        display:inline-block;
+        margin-right:10px;
+    }
+    .icon{
+        margin-right:10px;
+        display:inline-block;
+        width:11px;
+        height:16px;
+        background:url('../asset/img/cases/right-icon.png') no-repeat;
+    }
+    @-webkit-keyframes swing{
+        20% {
+            -webkit-transform: rotate3d(0, 0, 1, 15deg);
+            transform: rotate3d(0, 0, 1, 15deg);
+        }
+        40% {
+            -webkit-transform: rotate3d(0, 0, 1, -10deg);
+            transform: rotate3d(0, 0, 1, -10deg);
+        }
+        60% {
+            -webkit-transform: rotate3d(0, 0, 1, 5deg);
+            transform: rotate3d(0, 0, 1, 5deg);
+        }
+        80% {
+            -webkit-transform: rotate3d(0, 0, 1, -5deg);
+            transform: rotate3d(0, 0, 1, -5deg);
+        }
+        to {
+            -webkit-transform: rotate3d(0, 0, 1, 0deg);
+            transform: rotate3d(0, 0, 1, 0deg);
+        }
+    }
+}
+.box{
+    border-bottom:2px solid #eee;
+    margin-bottom:20px;
+    padding-bottom:40px;
+    .box-title{
+        font-size: 20px;
+        margin-bottom:0px;
+        font-weight:bold;
+        .title-round{
+            display:inline-block;
+            width:10px;
+            height:10px;
+            background:#314659;
+            border-radius:50%;
+            margin-right:10px;
+            margin-bottom: 2px;
+        }
+    }
+    .box-entry, .box-intro{
+        font-size: 16px;
+    }
+    .box-intro{
+        margin-bottom:35px;
+    }
+    .box-entry{
+        color:#2d336a;
+        margin-bottom:10px;
+    }
+    .box-image{
+        img{
+            display:block;
+            //margin:0 auto;
+            box-shadow: 0px 15px 38px 1px #eee;
+            animation: bounceInRight 1s linear both;
+            @-webkit-keyframes bounceInRight{
+
+                from, 60%, 75%, 90%, to {
+                    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+                    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+                }
+                from {
+                    opacity: 0;
+                    -webkit-transform: translate3d(3000px, 0, 0);
+                    transform: translate3d(3000px, 0, 0);
+                }
+                60% {
+                    opacity: 1;
+                    -webkit-transform: translate3d(-25px, 0, 0);
+                    transform: translate3d(-25px, 0, 0);
+                }
+                75% {
+                    -webkit-transform: translate3d(10px, 0, 0);
+                    transform: translate3d(10px, 0, 0);
+                }
+                90% {
+                    -webkit-transform: translate3d(-5px, 0, 0);
+                    transform: translate3d(-5px, 0, 0);
+                }
+                to {
+                    -webkit-transform: none;
+                    transform: none;
+                }
+                }
+        
+            }
+            .images{
+                width:350px
+            }
+            @media (max-width: 450px) {
+                .images{
+                    width:250px
+                }
+            }
+    }
+}
+.logos{
+    padding:0px;
+    margin:0px;
+    //width:80%;
+    margin:0 auto;
+    box-sizing:border-box;
+    list-style-type:none;
+    display:flex;
+    //justify-content: center;
+    flex-wrap: wrap;
+    li{
+        float:left;
+        padding:0px;
+        margin:20px;
+        width:80px;
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        &:hover{
+            animation: rubberBand 1s linear both;
+            .logos-text{
+                color:red;
+            }
+        }
+        @-webkit-keyframes rubberBand{
+
+        from {
+            -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+        }
+        30% {
+            -webkit-transform: scale3d(1.25, 0.75, 1);
+            transform: scale3d(1.25, 0.75, 1);
+        }
+        40% {
+            -webkit-transform: scale3d(0.75, 1.25, 1);
+            transform: scale3d(0.75, 1.25, 1);
+        }
+        50% {
+            -webkit-transform: scale3d(1.15, 0.85, 1);
+            transform: scale3d(1.15, 0.85, 1);
+        }
+        65% {
+            -webkit-transform: scale3d(.95, 1.05, 1);
+            transform: scale3d(.95, 1.05, 1);
+        }
+        75% {
+            -webkit-transform: scale3d(1.05, .95, 1);
+            transform: scale3d(1.05, .95, 1);
+        }
+        to {
+            -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+        }
+        }
+        
+        .logos-img{
+            display:block;
+            width:56px;
+            height:56px;
+            background-size:56px 56px;
+            background-repeat:no-repeat;
+            background-position:center center;
+        } 
+        .client-img{
+            width:85px;
+            height:65px;
+            background-size:85px 65px;
+        }
+        .client-big{
+            width:85px;
+            height:65px;
+            display:flex;
+            justify-content:center;
+            align-items:center;
+        }
+        .client-bigimg{
+            width:89px;
+            height:36px;
+            background-size:89px 36px;
+        }
+        .other-img{
+            width:65px;
+            height:65px;
+            background-size:65px 65px;
+        }
+        .logos-text{
+            margin-top: 10px;
+        }
+    }
+}
+.line{
+    border-bottom:2px solid #eee;
+    margin-bottom:20px;
+}
+</style>

src/view/intro.vue

@@ -31,7 +31,7 @@
 <h5>联系我们</h5>
 <p>如果您在使用组件的过程中遇到了什么问题，或者有什么意见建议，都欢迎与我们联系：<a href="mailto:nutui@jd.com">nutui@jd.com</a></p>
 <h5>使用项目</h5>
-<p>如果您在项目里使用了NutUI，欢迎告知。</p>
+<p><router-link  tag="a" to="/cases" :class="{ current:path=='/cases' }" target='_blank'>点击查看正在使用项目。</router-link>如果您在项目里使用了NutUI，欢迎告知。</p>
     </div>
 </template>
 

src/view/progress.vue

@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <nut-docheader 
+        :name="$route.name" 
+        :showQrCode="true"></nut-docheader>
+        <h5>示例</h5>
+        <h6>默认用法</h6>
+        <nut-codebox code="<nut-progress 
+percent='15'
+height='10px' />" />
+        <div class="cont">
+          <nut-progress percent="15" height="10px" />
+        </div>
+        <h6>设置高度和颜色</h6>
+        <nut-codebox code="<nut-progress 
+height='18px' 
+color='#33C3F0' />" />
+        <div class="cont">
+          <nut-progress height="18px" color="#33C3F0" percent="23" />
+        </div>
+        <h6>内联显示进度数</h6>
+        <nut-codebox code="<nut-progress 
+height='0.25rem' 
+percent='20' 
+showText='in' />" />
+        <div class="cont">
+          <nut-progress percent="20" showText="in" height="20px" />
+        </div>
+        <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>percent</td>
+                  <td>百分比</td>
+                  <td>String, Number</td>
+                  <td>0</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>color</td>
+                  <td>背景色</td>
+                  <td>String</td>
+                  <td>#f23030</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>height</td>
+                  <td>高度</td>
+                  <td>String</td>
+                  <td>.06rem</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>showText</td>
+                  <td>显示百分比的位置</td>
+                  <td>String</td>
+                  <td>out</td>
+                  <td>--</td>
+                </tr>
+              </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style>
+.cont{
+  width: 450px;
+}
+</style>

src/view/textbox.vue

@@ -41,6 +41,14 @@
 
         <h6>不显示字数限制</h6>
         <nut-codebox :code="demo8" imgUrl="../asset/img/demo/textbox7.png"></nut-codebox>
+
+        <h6>输入回调返回文字</h6>
+        <nut-textbox 
+          :maxNum="10" 
+          txtAreaH="2"  
+          @inputFunc="inputText" 
+          ></nut-textbox>
+        <nut-codebox :code="demo9" ></nut-codebox>
         
         <h5>Props</h5>
         <div class="tbl-wrapper">
@@ -116,6 +124,11 @@
               <td>输入字数超过限定字数时触发事件</td>
               <td>--</td>
             </tr>
+            <tr>
+              <td>inputText</td>
+              <td>文字输入事件回调，默认传回输入文本</td>
+              <td>--</td>
+            </tr>
           </tbody>
         </table>
         </div>
@@ -164,11 +177,22 @@ textBgColor="#feefef">
             demo8:`<nut-textbox 
 :limitShow="false">
 </nut-textbox>`,
+            demo9:` <nut-textbox :maxNum="10" txtAreaH="2" @inputFunc="inputText" ></nut-textbox>
+export default {
+  methods:{
+      inputText(val){
+           alert(val);
+      }
+  }
+}`
         }
     },
     methods:{
         overLength(){
             alert('字数超出');
+        },
+        inputText(val){
+           alert(val);
         }
     }
 }

webpack.config.js

@@ -6,7 +6,6 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 var autoprefixer = require('autoprefixer');
-
 var webpackConfig = module.exports = {};
 var isProduction = process.env.NODE_ENV === 'production';
 
@@ -33,11 +32,14 @@ webpackConfig.module = {
         use: ['style-loader', 'css-loader', 'postcss-loader']
     }, {
         test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
+            use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
     }, {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
+            loaders: {
+                scss: 'vue-style-loader!css-loader!sass-loader'
+            },
             postcss: [autoprefixer()]
         }
     }, {