upd:更新dialog、picker和scroller功能

Author: lilinsen

build/webpack.base.conf.js

@@ -3,14 +3,21 @@ const config = require('../package.json');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const moment = require('moment');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
 const isDev = process.env.NODE_ENV === 'development';
 var test = process.env.NODE_ENV === 'test';
 const path = require('path');
+const HappyPack = require('happypack');
+const os = require('os');
+const chalk= require('chalk');
+const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
 module.exports = {
     stats: {
         entrypoints: false,
         children: false
     },
+    stats: 'errors-only',
     resolve: {
         extensions: ['.js', '.vue', '.json'],
         alias: {
@@ -21,7 +28,7 @@ module.exports = {
         rules: [
             !test ? {
                 test: /\.(sa|sc|c)ss$/,
-                use: [
+                use: [                    
                     isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                     'css-loader',
                     'postcss-loader',
@@ -40,6 +47,7 @@ module.exports = {
             {
                 test: /\.vue$/,
                 use: [
+                    'cache-loader',
                     {
                         loader: 'vue-loader',
                         options: {
@@ -63,9 +71,7 @@ module.exports = {
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
-                use: {
-                    loader: 'babel-loader'
-                }
+                use: ['happypack/loader?id=Babel']
             }, 
             {
                 test: /\.(png|jpg|gif|webp)$/,
@@ -82,6 +88,27 @@ module.exports = {
 (c) 2017-2018 JDC
 Released under the MIT License.`
         }),
-        new VueLoaderPlugin()
+        new HappyPack({
+            //用id来标识 happypack处理那里类文件
+          id: 'Babel',
+          //如何处理  用法和loader 的配置一样
+          loaders: [{
+            loader: 'babel-loader?cacheDirectory=true',
+          }],
+          //共享进程池
+          threadPool: happyThreadPool,
+          //允许 HappyPack 输出日志
+          verbose: false,
+        }),       
+        new VueLoaderPlugin(),
+        new ProgressBarPlugin({
+            format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',      
+            clear: false, 
+            width: 100
+          }),
+          new WebpackBuildNotifierPlugin({
+            title: "My Project Webpack Build",        
+            suppressSuccess: true
+          })
     ],
 }

build/webpack.demo.base.conf.js

@@ -18,7 +18,7 @@ module.exports = merge(webpackBaseConf, {
         path: path.resolve(__dirname, '../dist/sites/'),
         chunkFilename: 'demo/js/[name].[hash:5].js',
         filename: isDev ? 'demo/js/[name].js' : 'demo/js/[name].[hash].js'
-    },
+    },    
     module: {
         rules: [
             //自定义主题

build/webpack.demo.dev.conf.js

@@ -27,6 +27,7 @@ module.exports = merge(baseConf, {
         contentBase: path.resolve(__dirname, 'dist/sites/'),
         index: 'demo.html',
         compress: true,
+        noInfo: true,      
         historyApiFallback: true,
         disableHostCheck: true
     }

docs/joinus.md

@@ -26,4 +26,4 @@
 
 ### 简历投递：
 
-nutui@jd.com
+yfzhoutao@jd.com

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "dev": "npm run dev:demo",
     "dev:carefree": "cross-env NODE_ENV=carefree carefree_env=dev webpack -w --colors --progress --config build/webpack.demo.dev.conf.js",
-    "dev:demo": "cross-env NODE_ENV=development webpack-dev-server -d --open --progress --config build/webpack.demo.dev.conf.js",
+    "dev:demo": "cross-env NODE_ENV=development webpack-dev-server -d --open  --config build/webpack.demo.dev.conf.js",
     "dev:doc": "cross-env NODE_ENV=development DOC_TYPE=true webpack-dev-server -d --open -w --progress --config build/webpack.doc.dev.conf.js",
     "build:demo": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.demo.build.conf.js",
     "build:doc": "cross-env NODE_ENV=production DOC_TYPE=true webpack --hide-modules --progress --config build/webpack.doc.build.conf.js",
@@ -48,7 +48,12 @@
   "dependencies": {
     "@babel/polyfill": "7.0.0",
     "@babel/runtime": "7.1.2",
-    "intersection-observer": "^0.5.1"
+    "cache-loader": "^4.1.0",
+    "happypack": "^5.0.1",
+    "intersection-observer": "^0.5.1",
+    "os": "^0.1.1",
+    "progress-bar-webpack-plugin": "^1.12.1",
+    "webpack-build-notifier": "^1.1.1"
   },
   "peerDependencies": {
     "vue": "^2.6.10"
@@ -73,7 +78,7 @@
     "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
     "babel-preset-env": "1.7.0",
     "babel-preset-stage-2": "6.24.1",
-    "chalk": "2.4.1",
+    "chalk": "^2.4.2",
     "chokidar": "^2.0.4",
     "clipboard": "2.0.1",
     "copy": "0.3.2",

src/packages/dialog/demo.vue

@@ -71,9 +71,30 @@
       </nut-cell>
     </div>
     <!-- 以标签形式调用Dialog -->
-    <nut-dialog title="标签形式调用" :visible="dialogShow" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
+    <nut-dialog title="标签形式调用" :visible="dialogShow" :cancelAutoClose="false" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
+      
       <a href="javascript:;" @click="dialogShow=false" :noCancelBtn="true">点我可以直接关闭对话框</a>
     </nut-dialog>
+    <nut-actionsheet :is-visible="isEditor" > 
+      <div slot="custom"> 
+        <nut-cell title="选择货品" :showIcon="true" :isLink="true" @click.native="isItem=true"> 
+          <div slot="desc" class="selected-option">{{item.name!='' ? item.name : '请选择'}}</div>
+        </nut-cell> 
+        <nut-cell :isLink="true" > 
+          <div slot="title" class="selected-option">
+          <nut-textinput v-model="item.num" :hasBorder="false" placeholder="请输入数量" :clearBtn="true" :disabled="false"/> </div> 
+        </nut-cell>
+        <nut-cell :isLink="true" > 
+           <div slot="title" class="selected-option"> 
+             <nut-textinput v-model="item.price" :hasBorder="false" placeholder="请输入价格" :clearBtn="true" :disabled="false"/> 
+          </div> 
+        </nut-cell> 
+        <nut-buttongroup shape="circle" style="margin-top:10px;padding:10px;">
+           <nut-button color="#333" style="background:#eee" @click.native="isEditor=false"> 取消 </nut-button> 
+           <nut-button style="background:#42b983" @click.native="addItem"> 确定 </nut-button> 
+        </nut-buttongroup>
+      </div> 
+    </nut-actionsheet>
   </div>
 </template>
 
@@ -85,7 +106,11 @@ export default {
   mixins: [locale],
   data() {
     return {
-      dialogShow: false
+      dialogShow: false,
+      isEditor:true,
+      item:{
+        
+      }
     };
   },
   methods: {

src/packages/dialog/dialog.vue

@@ -194,12 +194,16 @@ export default {
         this.onOkBtn.call(this);
       }
     },
-    cancelBtnClick(autoClose) {
+    cancelBtnClick(autoClose) {      
+      if(!autoClose){
+        return
+      }
       this.$emit("cancel-btn-click");
       if (typeof this.onCancelBtn === "function") {
         if (this.onCancelBtn.call(this) === false) return;
       }
-      autoClose && this.close("cancelBtn");
+      this.close("cancelBtn");
+         
     },
     closeBtnClick() {
       if (typeof this.onCloseBtn === "function") {

src/packages/picker/picker-slot.vue

@@ -5,14 +5,14 @@
             :class="{'nut-picker-roller-item-hidden': isHidden(index + 1)}"
             v-for="(item,index) in listData"
             :style="setRollerStyle(index + 1)"
-            :key="index">
-                {{item}}
+            :key="item.label ? item.label : index">
+                {{item.value ? item.value : item}}
         </div>
     </div>
     <div class="nut-picker-content">
         <div class="nut-picker-list-panel" ref="list">
             <div class="nut-picker-item" v-for="(item,index) in listData"
-                :key="index">{{item}}
+                :key="item.label ? item.label : index">{{item.value ? item.value : item}}
             </div>
         </div>
     </div>

src/packages/scroller/vertical-scroll.vue

@@ -56,12 +56,18 @@ export default {
             type: Number,
             default: 100
         },
+        propsTime: {
+            type:Number,
+            default: 3000
+        }
     },
     watch: {
         'isLoading': function(status) {
             if (!status && this.realMove === 0) {
                 clearTimeout(this.timer);
-                this.setTransform(this.realMove, 'end', 0);
+                this.timer = setTimeout(() => {
+                    this.setTransform(this.realMove, 'end', 0);
+                }, this.propsTime);
             }
         },
         'isUnMore': function() {