popup component

2017-02-15 21:03:07 +08:00
parent 8f474da314
commit 82bb27896e
15 changed files with 673 additions and 4 deletions
@@ -0,0 +1,71 @@
+<template>
+  <transition :name="currentTransition">
+    <div v-show="currentValue" class="o2-popup" :class="[position ? 'o2-popup--' + position : '']">
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from 'src/mixins/popup';
+
+export default {
+  name: 'o2-popup',
+
+  mixins: [Popup],
+
+  props: {
+    overlay: {
+      default: true
+    },
+
+    lockOnScroll: {
+      default: false
+    },
+
+    closeOnClickOverlay: {
+      default: true
+    },
+
+    transition: {
+      type: String,
+      default: 'popup-slide'
+    },
+
+    position: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      currentValue: false,
+      currentTransition: this.transition
+    };
+  },
+
+  watch: {
+    currentValue(val) {
+      this.$emit('input', val);
+    },
+
+    value(val) {
+      this.currentValue = val;
+    }
+  },
+
+  beforeMount() {
+    if (this.transition !== 'popup-fade') {
+      this.currentTransition = `popup-slide-${ this.position }`;
+    }
+  },
+
+  mounted() {
+    if (this.value) {
+      this.currentValue = true;
+      this.open();
+    }
+  }
+};
+</script>