popup docs

build/bin/build-entry.js

@@ -3,6 +3,7 @@ var fs = require('fs');
 var render = require('json-templater/string');
 var uppercamelcase = require('uppercamelcase');
 var path = require('path');
+var chalk = require('chalk');
 
 var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
@@ -70,5 +71,5 @@ var template = render(MAIN_TEMPLATE, {
 });
 
 fs.writeFileSync(OUTPUT_PATH, template);
-console.log('[build entry] DONE:', OUTPUT_PATH);
+console.log(chalk.green('[build entry] DONE:' + OUTPUT_PATH));
 

build/genExamples.js

@@ -3,6 +3,7 @@ var markdownItContainer = require('markdown-it-container');
 var fs = require('fs');
 var path = require('path');
 var cheerio = require('cheerio');
+var chalk = require('chalk');
 var striptags = require('./strip-tags');
 var navs = require('../docs/nav.config.json');
 navs = navs['zh-CN'];
@@ -106,5 +107,5 @@ for (var i = 0; i < components.length; i++) {
   });
 }
 
-console.log('generate examples success!');
+console.log(chalk.green('generate examples success!'));
 

build/webpack.config.js

@@ -48,7 +48,7 @@ module.exports = {
       path.join(__dirname, '../node_modules'),
       'node_modules'
     ],
-    extensions: ['.js', '.vue', '.pcss'],
+    extensions: ['.js', '.vue', '.css'],
     alias: {
       'vue$': 'vue/dist/vue.runtime.common.js',
       'zanui': path.join(__dirname, '..'),
@@ -97,20 +97,7 @@ module.exports = {
   },
   devtool: 'source-map',
   plugins: [
-    StyleExtractPlugin,
     new ProgressBarPlugin(),
-    new HtmlWebpackPlugin({
-      chunks: ['vendor', 'zan-docs'],
-      template: 'docs/index.tpl',
-      filename: 'index.html',
-      inject: true
-    }),
-    new HtmlWebpackPlugin({
-      chunks: ['vendor', 'zan-examples'],
-      template: 'docs/index.tpl',
-      filename: 'examples.html',
-      inject: true
-    }),
     new webpack.LoaderOptionsPlugin({
       minimize: true,
       options: {
@@ -160,7 +147,20 @@ module.exports = {
           }
         }
       }
-    })
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['vendor', 'zan-docs'],
+      template: 'docs/index.tpl',
+      filename: 'index.html',
+      inject: true
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['vendor', 'zan-examples'],
+      template: 'docs/index.tpl',
+      filename: 'examples.html',
+      inject: true
+    }),
+    StyleExtractPlugin
   ]
 };
 

docs/components/mobile-popup.vue

@@ -1,5 +1,5 @@
 <template>
-  <zan-popup v-model="currentValue">
+  <zan-popup v-model="currentValue" :lock-on-scroll="true">
     <div class="mobile-popup">
       <iframe :src="url" class="mobile-popup-iframe"></iframe>
     </div>

docs/examples-dist/popup.vue

@@ -1,59 +1,44 @@
 <template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
-                <div class="zan-row">
+                <zan-button block="" @click="popupShow1 = true">从中间弹出popup</zan-button>
-  <zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
+<zan-popup v-model="popupShow1" class="zan-popup-1">
-</div>
-<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
-  <zan-button @click="showDialog">弹出dialog</zan-button>
-</zan-popup>
-
-<div class="zan-row">
-  <zan-button @click="popupShow2 = true">从上方弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
-  更新成功
-</zan-popup>
-
-<div class="zan-row">
-  <zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
-  <zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
-</zan-popup>
-
-<div class="zan-row">
-  <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow4" class="zan-popup-4">
   从中间弹出popup
 </zan-popup>
 
 
 
+              </example-block><example-block title="从不同位置弹出菜单">
+                <zan-button block="" @click="popupShow2 = true;">从下方弹出popup</zan-button>
+<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
+  <zan-button @click="showDialog">弹出dialog</zan-button>
+</zan-popup>
+
+<zan-button block="" @click="popupShow3 = true">从上方弹出popup</zan-button>
+<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
+  更新成功
+</zan-popup>
+
+<zan-button block="" @click="popupShow4 = true">从右方弹出popup</zan-button>
+<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
+  <zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
+</zan-popup>
+
+<zan-button block="" @click="popupShow5 = true">从左方弹出popup</zan-button>
+<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
+  <zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
+</zan-popup>
+
+
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b popup {
+    .examples,
+    .example-block {
+      padding: 0 15px;
+    }
+
     .zan-popup-1 {
-      width: 100%;
-      height: 200px;
-      box-sizing: border-box;
-      padding: 20px;
-    }
-
-    .zan-popup-2 {
-      line-height: 50px;
-      text-align: center;
-      background-color: rgba(0, 0, 0, 0.701961);
-      color: #fff;
-    }
-
-    .zan-popup-3 {
-      width: 100%;
-      height: 100%;
-    }
-
-    .zan-popup-4 {
       width: 60%;
       box-sizing: border-box;
       padding: 20px;
@@ -61,8 +46,28 @@
       text-align: center;
     }
 
+    .zan-popup-2 {
+      width: 100%;
+      height: 200px;
+      box-sizing: border-box;
+      padding: 20px;
+    }
+
+    .zan-popup-3 {
+      line-height: 50px;
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.701961);
+      color: #fff;
+    }
+
+    .zan-popup-4,
+    .zan-popup-4 {
+      width: 100%;
+      height: 100%;
+    }
+
     .zan-button {
-      margin: 15px;
+      margin: 10px 0;
     }
   }
 }
@@ -80,15 +85,16 @@ export default {
       popupShow1: false,
       popupShow2: false,
       popupShow3: false,
-      popupShow4: false
+      popupShow4: false,
+      popupShow5: false
     }
   },
 
   watch: {
-    popupShow2(val) {
+    popupShow3(val) {
       if (val) {
         setTimeout(() => {
-          this.popupShow2 = false;
+          this.popupShow3 = false;
         }, 2000);
       }
     }

docs/examples-docs/popup.md

@@ -1,7 +1,10 @@
 <style>
 @component-namespace demo {
   @b popup {
-    padding: 0 15px;
+    .examples,
+    .example-block {
+      padding: 0 15px;
+    }
 
     .zan-popup-1 {
       width: 60%;
@@ -26,13 +29,13 @@
     }
 
     .zan-popup-4,
-    .zan-popup-4 {
+    .zan-popup-5 {
       width: 100%;
       height: 100%;
     }
 
     .zan-button {
-      margin: 0 10px;
+      margin: 10px 0;
     }
   }
 }

package.json

@@ -62,6 +62,7 @@
     "babel-preset-es2015": "^6.16.0",
     "babel-runtime": "^6.11.0",
     "chai": "^3.5.0",
+    "chalk": "^1.1.3",
     "cheerio": "^0.22.0",
     "copy-webpack-plugin": "^4.0.1",
     "cp-cli": "^1.0.2",