feat(components): 新增提示信息弹框组件 PopupDialog

CONTRIBUTING.md

@@ -204,6 +204,62 @@ export default {}
 <common-header>提现</common-header>
 ```
 
+### 提示信息弹框 PopupDialog
+
+`@/components/PopupDialog.vue`
+
+用于各种临时信息展示，如规则展示，协议弹框展示，首次进入某功能弹框提示信息。
+
+``` vue
+<template>
+  <div>
+    <button @click="showDialog">show dialog</button>
+    <popup-dialog ref="dialog" title="充值提现规则" @confirm="onConfirm">
+      {{ 今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎... }}
+    </popup-dialog>
+  <div>
+</template>
+
+<script>
+export default {
+  methods: {
+    showDialog() { this.$refs.dialog.show() },
+    onConfirm() { console.log('confirm clicked!') }
+  }
+}
+</script>
+```
+
+#### Slots
+
+含有一个匿名 slot，为 dialog 主要内容
+
+#### Props
+
+##### title
+
+可选，弹框标题
+
+##### confirmText
+
+可选，弹框的确定按钮文案。默认值为“知道了”
+
+#### Events
+
+##### confirm
+
+当按下确定按钮时的回调事件
+
+#### Methods
+
+##### show
+
+显示 dialog，缓慢上移淡入的动画。
+
+#### hide
+
+隐藏 dialog，缓慢下移淡出的动画
+
 ### 图片上传组件 ImagePoster
 
 `@/components/ImagePoster.vue`

src/components/PopupDialog.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    :class="{show: isShow}"
+    class="c-popup-dialog">
+    <div class="panel">
+      <header v-if="title">
+        {{ title }}
+      </header>
+      <main>
+        <slot/>
+      </main>
+      <footer @click="onConfirm">
+        {{ confirmText }}
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PopupDialog",
+  props: {
+    title: { type: String, default: "" },
+    confirmText: { type: String, default: "知道了" }
+  },
+  data() {
+    return {
+      isShow: false
+    };
+  },
+  methods: {
+    show() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+    onConfirm() {
+      this.$emit("confirm");
+      this.hide();
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.c-popup-dialog {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  top: -80px;
+  height: calc(~"100% + 200px");
+  left: -100px;
+  right: -100px;
+  padding: 100px;
+  background-color: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  z-index: -1;
+  transition: 0.3s;
+
+  &.show {
+    z-index: 100;
+    opacity: 1;
+    top: -100px;
+  }
+
+  .panel {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    width: 80%;
+    margin: 0 auto;
+    border-radius: 10px;
+    padding: 0 38px;
+    max-height: 70%;
+  }
+
+  header {
+    flex: none;
+    padding: 38px 0;
+  }
+
+  main {
+    flex: auto;
+    overflow: auto;
+    border: 1px solid #ededed;
+    border-width: 1px 0;
+    padding: 20px 0;
+  }
+
+  footer {
+    flex: none;
+    color: #59b6d7;
+    text-align: center;
+    width: 100%;
+    padding: 38px 0;
+  }
+}
+</style>