[Doc] add Popup english document

docs/examples-docs/zh-CN/popup.md

@@ -1,35 +1,33 @@
 <style>
 .demo-popup {
   .van-button {
-    margin: 10px 15px;
+    margin: 10px 0 10px 15px;
   }
 
-  .van-popup-1 {
+  .van-popup {
     width: 60%;
-    box-sizing: border-box;
     padding: 20px;
     border-radius: 5px;
-    text-align: center;
-  }
-
-  .van-popup-2 {
-    width: 100%;
-    height: 200px;
     box-sizing: border-box;
-    padding: 20px;
-  }
 
-  .van-popup-3 {
-    line-height: 50px;
-    text-align: center;
-    background-color: rgba(0, 0, 0, 0.701961);
-    color: #fff;
-  }
+    &--bottom {
+      width: 100%;
+      height: 200px;
+    }
 
-  .van-popup-4,
-  .van-popup-5 {
-    width: 100%;
-    height: 100%;
+    &--top {
+      color: #fff;
+      width: 100%;
+      border-radius: 0;
+      line-height: 20px;
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    &--left,
+    &--right {
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 </style>
@@ -40,19 +38,18 @@ import Dialog from 'packages/dialog';
 export default {
   data() {
     return {
-      popupShow1: false,
-      popupShow2: false,
-      popupShow3: false,
-      popupShow4: false,
-      popupShow5: false
+      show1: false,
+      show2: false,
+      show3: false,
+      show4: false
     }
   },
 
   watch: {
-    popupShow3(val) {
+    show3(val) {
       if (val) {
         setTimeout(() => {
-          this.popupShow3 = false;
+          this.show3 = false;
         }, 2000);
       }
     }
@@ -63,11 +60,7 @@ export default {
       Dialog.confirm({
         title: 'confirm标题',
         message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      }).then((action) => {
-        console.log(action);
-      }, (error) => {
-        console.log(error);
-      });
+      })
     }
   }
 };
@@ -85,53 +78,43 @@ Vue.component(Popup.name, Popup);
 ### 代码演示
 
 #### 基础用法
-
-`popup`默认情况下是从中间弹出。
+`popup`默认从中间弹出
 
 :::demo 基础用法
 ```html
-<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
-<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
-  从中间弹出popup
-</van-popup>
+<van-button @click="show1 = true">弹出 Popup</van-button>
+<van-popup v-model="show1">内容</van-popup>
 ```
 
 ```javascript
 export default {
   data() {
     return {
-      popupShow1: false
+      show1: false
     }
   }
 };
 ```
 :::
 
-#### 从不同位置弹出层
+#### 弹出位置
+通过`position`属性设置 Popup 弹出位置
 
-可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
-
-:::demo 从不同位置弹出层
+:::demo 弹出位置
 ```html
-<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
-<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
-  <van-button @click="showDialog">弹出dialog</van-button>
+<van-button @click="show2 = true;">底部弹出</van-button>
+<van-popup v-model="show2" position="bottom">
+  <van-button @click="showDialog">弹出 Dialog</van-button>
 </van-popup>
 
-<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
-<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
+<van-button @click="show3 = true">顶部弹出</van-button>
+<van-popup v-model="show3" position="top" :overlay="false">
   更新成功
 </van-popup>
 
-<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
-<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
-  <van-button @click.native="popupShow4 = false">关闭 popup</van-button>
-</van-popup>
-
-
-<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
-<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
-  <van-button @click.native="popupShow5 = false">关闭 popup</van-button>
+<van-button @click="show4 = true">右侧弹出</van-button>
+<van-popup v-model="show4" position="right" :overlay="false">
+  <van-button @click="show4 = false">关闭弹层</van-button>
 </van-popup>
 ```
 
@@ -139,18 +122,17 @@ export default {
 export default {
   data() {
     return {
-      popupShow1: false,
-      popupShow2: false,
-      popupShow3: false,
-      popupShow4: false
+      show1: false,
+      show2: false,
+      show3: false
     }
   },
 
   watch: {
-    popupShow2(val) {
+    show2(val) {
       if (val) {
         setTimeout(() => {
-          this.popupShow2 = false;
+          this.show2 = false;
         }, 2000);
       }
     }
@@ -161,12 +143,12 @@ export default {
 
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 当前组件是否显示 | `Boolean`  | `false` | - |
-| overlay | 是否显示背景遮罩层 | `Boolean`  | `true` | -  |
-| lockOnScroll | 背景是否跟随滚动 | `Boolean`  | `false` | - |
-| position | 弹出层位置 | `String`  | - | `top`, `bottom`, `right`, `left`  |
-| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean`  | `true` | - |
-| transition | 弹出层的`transition` | `String`  | `popup-slide` |   |
-| preventScroll | 是否防止滚动穿透 | `Boolean`  | `false` | -  |
+| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
+| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
+| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
+| position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` |
+| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
+| transition | 弹出层的`transition` | `String` | `popup-slide` | |
+| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |