popup component demo

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: {

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
+    };
+  }
+};

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>

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({

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>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+export default {
+  data() {
+    return {
+      username: 'zhangmin'
+    };
+  }
+};
+</script>

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>

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>

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
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |

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
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |

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
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |