vue-popup-mixin
1.0.6 • Public • Published 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: {
overlayClick () {
this.show = false
},
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
Readme
Keywords
nonePackage Sidebar
Install
Weekly Downloads