popup component demo

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>