popup docs

2025-04-06 03:57:59 +08:00 · 2017-03-31 20:12:45 +08:00 · 2017-03-31 20:12:45 +08:00 · 4d974ce619
commit 4d974ce619
parent adff0129dc
7 changed files with 81 additions and 69 deletions
--- a/build/bin/build-entry.js
+++ b/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));

--- a/build/genExamples.js
+++ b/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!'));

--- a/build/webpack.config.js
+++ b/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
  ]
 };

--- a/docs/components/mobile-popup.vue
+++ b/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>
--- a/docs/examples-dist/popup.vue
+++ b/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 @click="popupShow1 = true;">从下方弹出popup</zan-button>
-</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">
+                <zan-button block="" @click="popupShow1 = true">从中间弹出popup</zan-button>
+<zan-popup v-model="popupShow1" class="zan-popup-1">
  从中间弹出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);
      }
    }
--- a/docs/examples-docs/popup.md
+++ b/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;
    }
  }
 }
--- a/package.json
+++ b/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",