popup component demo

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>