基于vue开发的popup 的mixins 用于管理弹出框的遮盖层
Switch branches/tags
Clone or download
Latest commit f8bbc30 Sep 9, 2016
Permalink
Failed to load latest commit information.
build 修改发布文件信息 Sep 7, 2016
config 修改发布文件方式 Sep 7, 2016
dist fixed bugs Sep 9, 2016
examples first commit Sep 4, 2016
src 导出getZIndex Sep 9, 2016
.babelrc first commit Sep 4, 2016
.editorconfig first commit Sep 4, 2016
.eslintignore first commit Sep 4, 2016
.eslintrc.js first commit Sep 4, 2016
.gitignore 修改发布文件方式 Sep 7, 2016
.npmignore 修改发布文件方式 Sep 7, 2016
LICENSE first commit Sep 4, 2016
README.md 修改发布文件方式 Sep 7, 2016
package.json fixed bugs Sep 9, 2016

README.md

vue-popup-mixin

基于vue开发的popup 的mixins 用于管理弹出框的遮盖层

安装

npm install vue-popup-mixin --save

使用

<template>
  <div class="dialog"
    v-show="show"
    transition="dialog-fade">
    <div class="dialog-content">
      <slot></slot>
    </div>
  </div>
</template>

<style>
  .dialog {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    width: 90%;
  }

  .dialog-content {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
  }

  .dialog-fade-transition {
    transition: opacity .3s linear;
  }

  .dialog-fade-enter,
  .dialog-fade-leave {
    opacity: 0;
  }
</style>

<script>
import 'vue-popup-mixin/dist/VuePopupMixin.css';
import Popup from 'vue-popup-mixin'

export default {
  mixins: [Popup],
  methods: {
    // 响应 overlay事件
    overlayClick () {
      this.show = false
    },
    // 响应 esc 按键事件
    escPress () {
      this.show = false
    }
  }
}
</script>

默认使用 show 控制弹出层是否显示, 这里我使用了 v-show 也可以使用 v-if , 当遮盖层点击之后会调用实例中的 overlayClick 方法,如果不实现这个方法,则不做响应, escPress 方法是当敲下 esc 键响应事件

API

参数 描述 参数类型 默认值
show 是否显示 Boolean false
overlay 是否创建一个遮盖层 Boolean true
overlayOpacity 遮盖层的透明度 Number 0.4
overlayColor 遮盖层的颜色 String #000

License

MIT

Copyright (c) 2016 myron