From 2fe99d031abea86349e8b652ce655dd0a98d8a51 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Thu, 9 Mar 2017 20:29:41 +0800
Subject: [PATCH] popup component demo

---
 build/webpack.config.js            |  3 +-
 docs/components/mobile-computed.js | 19 +++++++++++++
 docs/components/mobile-popup.vue   | 45 ++++++++++++++++++++++++++++++
 docs/examples-dist/dialog.vue      | 19 ++++++++++++-
 docs/examples-dist/field.vue       | 21 +++++++++++---
 docs/examples-dist/icon.vue        | 33 ++++++++++++++++++++++
 docs/examples-dist/popup.vue       | 31 ++++++++++++++------
 docs/examples-docs/actionsheet.md  |  9 ++++++
 docs/examples-docs/dialog.md       | 25 +++++++++++++++++
 docs/examples-docs/popup.md        | 36 ++++++++++++++++++------
 10 files changed, 219 insertions(+), 22 deletions(-)
 create mode 100644 docs/components/mobile-computed.js
 create mode 100644 docs/components/mobile-popup.vue
 create mode 100644 docs/examples-dist/icon.vue

diff --git a/build/webpack.config.js b/build/webpack.config.js
index 06f6c5859..1d311de95 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -43,7 +43,8 @@ module.exports = {
       'zanui': path.join(__dirname, '..'),
       'src': path.join(__dirname, '../src'),
       'packages': path.join(__dirname, '../packages'),
-      'lib': path.join(__dirname, '../lib')
+      'lib': path.join(__dirname, '../lib'),
+      'components': path.join(__dirname, '../docs/components')
     }
   },
   module: {
diff --git a/docs/components/mobile-computed.js b/docs/components/mobile-computed.js
new file mode 100644
index 000000000..fafec730d
--- /dev/null
+++ b/docs/components/mobile-computed.js
@@ -0,0 +1,19 @@
+import MobilePopup from 'components/mobile-popup.vue';
+
+export default {
+  components: {
+    MobilePopup
+  },
+
+  computed: {
+    mobileUrl() {
+      return '/examples.html' + location.hash;
+    }
+  },
+
+  data() {
+    return {
+      mobileShow: false
+    };
+  }
+};
diff --git a/docs/components/mobile-popup.vue b/docs/components/mobile-popup.vue
new file mode 100644
index 000000000..fb8b7f4e6
--- /dev/null
+++ b/docs/components/mobile-popup.vue
@@ -0,0 +1,45 @@
+<template>
+  <zan-popup v-model="currentValue">
+    <div class="mobile-popup">
+      <iframe :src="url" class="mobile-popup-iframe"></iframe>
+    </div>
+  </zan-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    url: String,
+    value: {}
+  },
+
+  data() {
+    return {
+      currentValue: this.value
+    };
+  },
+
+  watch: {
+    currentValue(val) {
+      this.$emit('input', val);
+    },
+    value(val) {
+      console.log(val);
+      this.currentValue = val;
+    }
+  }
+};
+</script>
+
+<style>
+.mobile-popup {
+  width: 380px;
+  height: 500px;
+  border: 5px solid #e5e5e5;
+}
+
+.mobile-popup-iframe {
+  width: 100%;
+  height: 500px;
+}
+</style>
diff --git a/docs/examples-dist/dialog.vue b/docs/examples-dist/dialog.vue
index 84234f0c7..fdcd93c61 100644
--- a/docs/examples-dist/dialog.vue
+++ b/docs/examples-dist/dialog.vue
@@ -6,12 +6,29 @@
 
 
               </example-block></section></template>
-
+<style>
+@component-namespace demo {
+  @b dialog {
+    .zan-button {
+      margin: 15px;
+    }
+  }
+}
+</style>
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 import { Dialog } from 'src/index';
+import MobileComputed from 'components/mobile-computed';
 
 export default {
+  mixins: [MobileComputed],
+
+  computed: {
+    mobileUrl() {
+      return '/examples.html' + location.hash;
+    }
+  },
+
   methods: {
     handleAlertClick() {
       Dialog.alert({
diff --git a/docs/examples-dist/field.vue b/docs/examples-dist/field.vue
index af4575e8e..af1f3104c 100644
--- a/docs/examples-dist/field.vue
+++ b/docs/examples-dist/field.vue
@@ -1,6 +1,6 @@
 <template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
                 <zan-cell-group>
-  <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
+  <zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username"></zan-field>
   <zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
   <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
 </zan-cell-group>
@@ -10,12 +10,25 @@
   <zan-field type="text" placeholder="请输入用户名"></zan-field>
 </zan-cell-group>
 
-              </example-block><example-block title="监听change事件">
+              </example-block><example-block title="禁用的输入框">
                 <zan-cell-group>
-  <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
+  <zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
+</zan-cell-group>
+
+              </example-block><example-block title="错误的输入框">
+                <zan-cell-group>
+  <zan-field label="用户名：" type="text" placeholder="请输入用户名" error=""></zan-field>
 </zan-cell-group>
 
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+export default {
+  data() {
+    return {
+      username: 'zhangmin'
+    };
+  }
+};
+</script>
\ No newline at end of file
diff --git a/docs/examples-dist/icon.vue b/docs/examples-dist/icon.vue
new file mode 100644
index 000000000..ed8d981e1
--- /dev/null
+++ b/docs/examples-dist/icon.vue
@@ -0,0 +1,33 @@
+<template><section class="demo-icon"><h1 class="demo-title">icon</h1><example-block title="所有Icon">
+                <zan-icon name="album"></zan-icon>
+<zan-icon name="arrow"></zan-icon>
+<zan-icon name="camera"></zan-icon>
+<zan-icon name="certificate"></zan-icon>
+<zan-icon name="check"></zan-icon>
+<zan-icon name="checked"></zan-icon>
+<zan-icon name="close"></zan-icon>
+<zan-icon name="gift"></zan-icon>
+<zan-icon name="home"></zan-icon>
+<zan-icon name="location"></zan-icon>
+<zan-icon name="message"></zan-icon>
+<zan-icon name="send"></zan-icon>
+<zan-icon name="shopping-cart"></zan-icon>
+<zan-icon name="sign"></zan-icon>
+<zan-icon name="store"></zan-icon>
+<zan-icon name="topay"></zan-icon>
+<zan-icon name="tosend"></zan-icon>
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b icon {
+
+    .zan-icon {
+      margin: 10px;
+      font-size: 45px;
+    }
+  }
+} 
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples-dist/popup.vue b/docs/examples-dist/popup.vue
index e928446d9..21ebd7bfc 100644
--- a/docs/examples-dist/popup.vue
+++ b/docs/examples-dist/popup.vue
@@ -1,9 +1,9 @@
 <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>
+  <zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
 </div>
 <zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
-  <zan-button @click="handlePopupButtonClick" type="primary">从中间弹出popup</zan-button>
+  更新成功
 </zan-popup>
 
 <div class="zan-row">
@@ -29,6 +29,7 @@
 
 
 
+
               </example-block></section></template>
 <style>
 @component-namespace demo {
@@ -40,16 +41,36 @@
       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%;
       height: 200px;
     }
+
+    .zan-button {
+      margin: 15px;
+    }
   }
 }
 </style>
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import MobileComputed from 'components/mobile-computed';
+
 export default {
+  mixins: [MobileComputed],
+
   data() {
     return {
       popupShow1: false,
@@ -67,12 +88,6 @@ export default {
         }, 2000);
       }
     }
-  },
-
-  methods: {
-    handlePopupButtonClick() {
-      this.popupShow4 = true;
-    }
   }
 };
 </script>
\ No newline at end of file
diff --git a/docs/examples-docs/actionsheet.md b/docs/examples-docs/actionsheet.md
index ff6021f63..9918c4945 100644
--- a/docs/examples-docs/actionsheet.md
+++ b/docs/examples-docs/actionsheet.md
@@ -17,7 +17,11 @@
 </style>
 
 <script>
+import MobileComputed from 'components/mobile-computed';
+
 export default {
+  mixins: [MobileComputed],
+
   data() {
     return {
       show1: false,
@@ -87,6 +91,11 @@ export default {
 ```
 :::
 
+点击以下按钮查看手机端效果：
+
+<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
+<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
diff --git a/docs/examples-docs/dialog.md b/docs/examples-docs/dialog.md
index aa9c2e495..fbb032793 100644
--- a/docs/examples-docs/dialog.md
+++ b/docs/examples-docs/dialog.md
@@ -1,7 +1,26 @@
+<style>
+@component-namespace demo {
+  @b dialog {
+    .zan-button {
+      margin: 15px;
+    }
+  }
+}
+</style>
+
 <script>
 import { Dialog } from 'src/index';
+import MobileComputed from 'components/mobile-computed';
 
 export default {
+  mixins: [MobileComputed],
+
+  computed: {
+    mobileUrl() {
+      return '/examples.html' + location.hash;
+    }
+  },
+
   methods: {
     handleAlertClick() {
       Dialog.alert({
@@ -66,6 +85,12 @@ export default {
 ```
 :::
 
+点击以下按钮查看手机端效果：
+
+<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
+<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
+
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index b1b21909a..c7d79faf9 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -8,16 +8,36 @@
       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%;
       height: 200px;
     }
+
+    .zan-button {
+      margin: 15px;
+    }
   }
 }
 </style>
 
 <script>
+import MobileComputed from 'components/mobile-computed';
+
 export default {
+  mixins: [MobileComputed],
+
   data() {
     return {
       popupShow1: false,
@@ -35,12 +55,6 @@ export default {
         }, 2000);
       }
     }
-  },
-
-  methods: {
-    handlePopupButtonClick() {
-      this.popupShow4 = true;
-    }
   }
 };
 </script>
@@ -52,10 +66,10 @@ export default {
 :::demo 基础用法
 ```html
 <div class="zan-row">
-  <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
+  <zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
 </div>
 <zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
-  <zan-button @click="handlePopupButtonClick" type="primary">从中间弹出popup</zan-button>
+  更新成功
 </zan-popup>
 
 <div class="zan-row">
@@ -101,9 +115,15 @@ export default {
   }
 };
 </script>
+
 ```
 :::
 
+点击以下按钮查看手机端效果：
+
+<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
+<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |