添加modal demo

Author: zepang

docs/.vuepress/components/modal-demo.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="">
+    <lai-button @click.native="value = !vlaue">Toggle Modal</lai-button>
+    <lai-modal v-model="value"></lai-modal>
+  </div>
+</template>
+<script>
+import LaiModal from './modal'
+import LaiButton from './lai-button'
+export default {
+  data () {
+    return {
+      value: false
+    }
+  },
+  components: { LaiModal, LaiButton }
+}
+</script>

docs/.vuepress/components/modal/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <transition name="fade">
+    <div class="modal-wrapper" v-if="isShow">
+      <div class="modal-mask"></div>
+      <div class="modal-main" :style="styles" v-click-outside="hide">
+        <slot></slot>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+import clickOutside from '../../directives/click-outside'
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    styles: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      isShow: this.value
+    }
+  },
+  directives: {
+    'click-outside': clickOutside
+  },
+  methods: {
+    hide () {
+      this.isShow = false
+      this.$emit('input', this.isShow)
+    }
+  },
+  watch: {
+    value (val) {
+      if (this.ishow !== val) {
+        this.isShow = val
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.modal-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  overflow: hidden;
+  .modal-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+    background-color: rgba(0,0,0,.4);
+    z-index: 90;
+  }
+  .modal-main {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+    margin: auto;
+    width: 430px;
+    height: 300px;
+    background-color: #ffffff;
+    border-radius: 4px;
+    box-shadow: 0px 0px 6px rgba(0, 0, 0, .1);
+  }
+}
+</style>
+

docs/.vuepress/config.js

@@ -34,7 +34,8 @@ module.exports = {
         collapsable: false,
         children: [
           '/posts/components/button',
-          '/posts/components/message'
+          '/posts/components/message',
+          '/posts/components/modal'
         ]
       }
     ]

docs/posts/components/modal.md

@@ -0,0 +1,39 @@
+# Modal 模态框
+
+# Alert 消息
+
+##### 示例
+<box>
+<modal-demo></modal-demo>
+</box>
+
+##### 代码
+```vue
+<lai-button @click.native="alert" type="ok">message</lai-button>
+...
+<script>
+  let _uid = 0
+  export default {
+    ....
+    alert () {
+      const types = ['success', 'info', 'warn', 'error']
+      this.$alert({
+        content: 'There is one message',
+        duration: 2000,
+        type: types[_uid%4]
+      })
+    }
+  }
+</script>
+```
+
+##### API
+<box>
+<mk>
+| 属性     | 说明                                            | 类型   | 默认值  |
+| -------- | ----------------------------------------------- | ------ | ------- |
+| content  | 消息内容                                        | string | 无      |
+| type     | 消息类型，可选值`success` `info` `warn` `error` | string | success |
+| duration | 消息框存在的时间                                | number | 3000    |
+</mk>
+</box>