From f480c73622d6eb80acf7fa8889bda1693d720aba Mon Sep 17 00:00:00 2001
From: dolymood <dolymood@gmail.com>
Date: Wed, 6 Jun 2018 15:57:04 +0800
Subject: [PATCH] docs(Popup): position and mask-closable doc

---
 document/components/docs/en-US/popup.md | 29 ++++++++++++++++++++
 document/components/docs/zh-CN/popup.md | 35 +++++++++++++++++++------
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/document/components/docs/en-US/popup.md b/document/components/docs/en-US/popup.md
index 46053419..fbe156af 100644
--- a/document/components/docs/en-US/popup.md
+++ b/document/components/docs/en-US/popup.md
@@ -65,6 +65,33 @@ __Notice:__ All the components above used create-api, so you should read [create
 
   You only need to pass the HTML fragment on to `content`.
 
+- Control the content position & mask closable<sup>1.9.6</sup>
+  ```html
+  <cube-popup type="my-popup" :position="position" :mask-closable="true" ref="myPopup4">My Popup Content 4</cube-popup>
+  <cube-button @click="showPopup">top/right/bottom/left/center</cube-button>
+  ```
+  ```js
+  const positions = ['top', 'right', 'bottom', 'left', 'center']
+  let cur = 0
+  export default {
+    data() {
+      return {
+        position: ''
+      }
+    },
+    methods: {
+      showPopup() {
+        const component = this.$refs.myPopup4
+        component.show()
+        setTimeout(() => {
+          component.hide()
+        }, 2000)
+      }
+    }
+  }
+  ```
+  You can use `position` to control the content's position and use `mask-closable` to control mask closable.
+
 - Setting to bottom
 
   ```html
@@ -133,6 +160,8 @@ __Notice:__ All the components above used create-api, so you should read [create
 | mask | whether to show background layer | Boolean | true/false | true |
 | content | content, HTML string, valid when there's no slot | String | - | '' |
 | center | whether to be in center in horizontal and vertical direction | Boolean | true/false | true |
+| position<sup>1.9.6</sup> | content position, if set position then `center` will be ignored | String | top/right/bottom/left/center | '' |
+| mask-closable<sup>1.9.6</sup> | whether hide the component when clicked the mask layer | Boolean | true/false | false |
 
 ### Events
 
diff --git a/document/components/docs/zh-CN/popup.md b/document/components/docs/zh-CN/popup.md
index 3d0ddf6a..52f664c1 100644
--- a/document/components/docs/zh-CN/popup.md
+++ b/document/components/docs/zh-CN/popup.md
@@ -56,16 +56,33 @@ __注：__ 以上组件都是基于 create-api 实现，所以在使用之前，
   </cube-button>
   ```
   只需要传入 `content`，内容是一段 HTML 片段
-- 置底
+- 控制位置&蒙层点击隐藏<sup>1.9.6</sup>
   ```html
-  <cube-popup type="my-popup" :center="false" ref="myPopup4">
-    My Popup Content 4
-  </cube-popup>
-  <cube-button @click="showPopup('myPopup4')">
-    Show Popup - bottom
-  </cube-button>
+  <cube-popup type="my-popup" :position="position" :mask-closable="true" ref="myPopup4">My Popup Content 4</cube-popup>
+  <cube-button @click="showPopup">top/right/bottom/left/center</cube-button>
+  ```
+  ```js
+  const positions = ['top', 'right', 'bottom', 'left', 'center']
+  let cur = 0
+  export default {
+    data() {
+      return {
+        position: ''
+      }
+    },
+    methods: {
+      showPopup() {
+        const component = this.$refs.myPopup4
+        component.show()
+        setTimeout(() => {
+          component.hide()
+        }, 2000)
+      }
+    }
+  }
   ```
-  考虑移动端场景，大部分时候弹层类都是居中或置底的（置底的时候是在水平方向铺满的），所以如果设置了 `center` 为 `false` 的话，就是置底的效果
+  可通过 `position` 控制内容出现位置，通过 `mask-closable` 控制点击蒙层是否关闭。
+
 - 上层封装
   ```html
   <template>
@@ -120,6 +137,8 @@ __注：__ 以上组件都是基于 create-api 实现，所以在使用之前，
 | mask | 是否显示背景层 | Boolean | true/false | true |
 | content | 内容，HTML 字符串，在无插槽的时候有效 | String | - | '' |
 | center | 是否水平垂直居中的 | Boolean | true/false | true |
+| position<sup>1.9.6</sup> | 内容展示位置，优先级比 center 高 | String | top/right/bottom/left/center | '' |
+| mask-closable<sup>1.9.6</sup> | 点击蒙层是否隐藏 | Boolean | true/false | false |
 
 ### 事件
 
-- 
GitLab