Dialog: remove v-model dependency of manual manipulation (#1038)

package.json

@@ -46,7 +46,7 @@
     "async-validator": "^1.6.6",
     "deepmerge": "^1.2.0",
     "throttle-debounce": "^1.0.1",
-    "vue-popup": "^0.2.10",
+    "vue-popup": "^0.2.12",
     "wind-dom": "0.0.3"
   },
   "peerDependencies": {

packages/dialog/src/component.vue

 <template>
   <transition name="dialog-fade">
-    <div class="el-dialog__wrapper" v-show="value" @click.self="handleWrapperClick">
+    <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
       <div
         class="el-dialog"
         :class="[sizeClass, customClass]"
@@ -75,9 +75,18 @@
         default: '15%'
       }
     },
+    data() {
+      return {
+        visible: false
+      };
+    },
 
     watch: {
       value(val) {
+        this.visible = val;
+      },
+      visible(val) {
+        this.$emit('input', val);
         if (val) {
           this.$emit('open');
           this.$nextTick(() => {
@@ -101,7 +110,7 @@
     methods: {
       handleWrapperClick() {
         if (this.closeOnClickModal) {
-          this.$emit('input', false);
+          this.close();
         }
       }
     },

test/unit/specs/dialog.spec.js

@@ -6,7 +6,7 @@ describe('Dialog', () => {
     destroyVM(vm);
   });
 
-  it('create', () => {
+  it('create', done => {
     vm = createVue({
       template: `
         <div>
@@ -22,9 +22,12 @@ describe('Dialog', () => {
       }
     }, true);
     const dialog = vm.$children[0];
-    expect(document.querySelector('.v-modal')).to.exist;
-    expect(vm.$el.querySelector('.el-dialog__title').textContent).to.equal('dialog test');
-    expect(dialog.$el.style.display).to.not.equal('none');
+    setTimeout(() => {
+      expect(document.querySelector('.v-modal')).to.exist;
+      expect(vm.$el.querySelector('.el-dialog__title').textContent).to.equal('dialog test');
+      expect(dialog.$el.style.display).to.not.equal('none');
+      done();
+    }, 10);
   });
 
   it('render correct content', done => {