x-dialog: Add prop:show, supports the .sync modifier (#1698)

airyland · Jul 17, 2017 · 63bc525 · 63bc525
1 parent 2f1ddab
commit 63bc525
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 17 deletions.
diff --git a/src/components/x-dialog/index.vue b/src/components/x-dialog/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="vux-x-dialog" @touchmove="onTouchMove">
     <transition :name="maskTransition">
-      <div class="weui-mask" @click="hideOnBlur && (currentValue = false)" v-show="currentValue"></div>
+      <div class="weui-mask" @click="hide" v-show="show"></div>
     </transition>
     <transition :name="dialogTransition">
-      <div :class="dialogClass" v-show="currentValue" :style="dialogStyle">
+      <div :class="dialogClass" v-show="show" :style="dialogStyle">
         <slot></slot>
       </div>
     </transition>
@@ -14,8 +14,12 @@
 <script>
 export default {
   name: 'x-dialog',
+  model: {
+    prop: 'show',
+    event: 'change'
+  },
   props: {
-    value: {
+    show: {
       type: Boolean,
       default: false
     },
@@ -39,25 +43,20 @@ export default {
     }
   },
   watch: {
-    value: {
-      handler: function (val) {
-        this.currentValue = val
-      },
-      immediate: true
-    },
-    currentValue (val) {
+    show (val) {
+      this.$emit('update:show', val)
       this.$emit(val ? 'on-show' : 'on-hide')
-      this.$emit('input', val)
-    }
-  },
-  data () {
-    return {
-      currentValue: false
     }
   },
   methods: {
-    onTouchMove: function (event) {
+    onTouchMove (event) {
       !this.scroll && event.preventDefault()
+    },
+    hide () {
+      if (this.hideOnBlur) {
+        this.$emit('update:show', false)
+        this.$emit('change', false)
+      }
     }
   }
 }

diff --git a/src/components/x-dialog/metas.yml b/src/components/x-dialog/metas.yml
@@ -96,6 +96,11 @@ slots:
     en: main content of the dialog
     zh-CN: 弹窗的主体内容
 changes:
+  next:
+    en:
+      - '[feature] Add prop:show, supports the .sync modifier'
+    zh-CN:
+      - '[feature] 新增 prop:show 并且支持.sync修饰符'
   v2.2.2:
     en:
       - '[feature] Support prop:dialog-style #1282'

diff --git a/src/demos/XDialog.vue b/src/demos/XDialog.vue
@@ -3,6 +3,7 @@
 
     <group>
       <x-switch v-model="show" :title="$t('Toggle')"></x-switch>
+      <x-switch v-model="show2" :title="$t('use .sync')"></x-switch>
       <x-switch v-model="showHideOnBlur" :title="$t('hide on clicking mask')"></x-switch>
       <x-switch v-model="showDialogStyle" :title="$t('Toggle')" :inline-desc="$t('custom dialog style')"></x-switch>
     </group>
@@ -22,6 +23,17 @@
       </x-dialog>
     </div>
 
+    <div v-transfer-dom>
+      <x-dialog :show.sync="show2" class="dialog-demo">
+        <div class="img-box">
+          <img src="../assets/demo/dialog/01.jpg" style="max-width:100%">
+        </div>
+        <div @click="show2=false">
+          <span class="vux-close"></span>
+        </div>
+      </x-dialog>
+    </div>
+
     <div v-transfer-dom>
       <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
         <div class="img-box">
@@ -79,6 +91,8 @@ hide on clicking mask:
   zh-CN: 点击遮罩自动关闭
 Toggle:
   zh-CN: 显示/隐藏
+use .sync:
+  zh-CN: 使用 .sync
 disable background scrolling:
   zh-CN: 背景不可滚动
 long long content:
@@ -103,6 +117,7 @@ export default {
   data () {
     return {
       show: false,
+      show2: false,
       showNoScroll: false,
       showHideOnBlur: false,
       showScrollBox: false,