dialog component

packages/dialog/src/dialog.js

@@ -0,0 +1,98 @@
+import Vue from 'vue';
+import Dialog from './dialog.vue';
+import merge from 'src/utils/merge';
+
+const DialogConstructor = Vue.extend(Dialog);
+
+let currentDialog;
+let instance;
+let dialogQueue = [];
+
+const defaultCallback = action => {
+  if (currentDialog) {
+    let callback = currentDialog.callback;
+
+    if (typeof callback === 'function') {
+      callback(action);
+    }
+
+    if (currentDialog.resolve && action !== 'cancel') {
+      currentDialog.resolve(action);
+    } else {
+      currentDialog.reject(action);
+    }
+  }
+};
+
+var initInstance = () => {
+  instance = new DialogConstructor({
+    el: document.createElement('div')
+  });
+
+  instance.callback = defaultCallback;
+};
+
+var showNextDialog = () => {
+  if (!instance) {
+    initInstance();
+  }
+
+  if (!instance.value && dialogQueue.length > 0) {
+    currentDialog = dialogQueue.shift();
+
+    let options = currentDialog.options;
+
+    for (let prop in options) {
+      if (options.hasOwnProperty(prop)) {
+        instance[prop] = options[prop];
+      }
+    }
+    console.log(instance)
+
+    if (options.callback === undefined) {
+      instance.callback = defaultCallback;
+    }
+
+    document.body.appendChild(instance.$el);
+
+    Vue.nextTick(() => {
+      instance.value = true;
+    });
+  }
+};
+
+var DialogBox = options => {
+  console.log(options)
+  return new Promise((resolve, reject) => { // eslint-disable-line
+    dialogQueue.push({
+      options: merge({}, options),
+      callback: options.callback,
+      resolve: resolve,
+      reject: reject
+    });
+
+    showNextDialog();
+  });
+};
+
+DialogBox.alert = function(options) {
+  return DialogBox(merge({
+    type: 'alert',
+    closeOnClickOverlay: false
+  }, options));
+};
+
+DialogBox.confirm = function(options) {
+  return DialogBox(merge({
+    type: 'confirm',
+    showCancelButton: true
+  }, options));
+};
+
+DialogBox.close = function() {
+  instance.value = false;
+  dialogQueue = [];
+  currentDialog = null;
+};
+
+export default DialogBox;

packages/dialog/src/dialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <transition name="dialog-fade">
+    <div class="o2-dialog-wrapper">
+      <div class="o2-dialog" v-show="value">
+        <div class="o2-dialog-header" v-if="title">
+          <div class="o2-dialog-title" v-text="title"></div>
+        </div>
+        <div class="o2-dialog-content" v-if="message">
+          <div class="o2-dialog-message" v-html="message"></div>
+        </div>
+        <div class="o2-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+          <button class="o2-dialog-btn o2-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="o2-dialog-btn o2-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from 'packages/popup';
+
+const CANCEL_TEXT = '取消';
+const CONFIRM_TEXT = '确认';
+
+export default {
+  name: 'o2-dialog',
+
+  mixins: [Popup],
+
+  props: {
+    overlay: {
+      default: true
+    },
+    closeOnClickOverlay: {
+      default: true
+    },
+    lockOnScroll: {
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      title: '提示',
+      message: '',
+      type: '',
+      showConfirmButton: true,
+      showCancelButton: false,
+      confirmButtonText: CONFIRM_TEXT,
+      cancelButtonText: CANCEL_TEXT,
+      callback: null
+    };
+  },
+
+  methods: {
+    handleAction(action) {
+      this.value = false;
+      this.callback && this.callback(action);
+    }
+  }
+};
+</script>