modal2vue
v1.0.5
Published
a simple modal for vue based on vue2
Downloads
10
Readme
modal2vue
A simple modal component based on Vue, service to Vue project
安装
npm i modal2vue
全局使用
import Modal2vue from "modal2vue";
Vue.use(Modal2vue);
具体编码
<template>
<button @click="openModal" class="info-btn">Info</button>
<modal2vue />
</template>
export default {
methods: {
openModal() {
let config = {
title: "title",//标题
message: "message is here to show",//内容
cancelBtnText: "cancel",//取消按钮文本
confirmBtnText: "confirm",//确定按钮文本
onCancel: null,//取消按钮点击事件
onConfirm: null,//确定按钮点击事件
showCancel: true,//是否展示取消按钮
showClose: true,//是否展示关闭小叉号
showMask: true,//是否展示蒙层
maskClosable: true,//是否可以通过点击蒙层关闭modal
afterClose: null,//关闭之后的回调
type: 'info',//弹出类型 "info"|"warning"|"error"|"success"
smooth: true,//是否使用平滑进出场动画
}
$modal2vue.onopen(config);
}
}
}
api
$modal2vue.onopen(config);//关闭modal
$modal2vue.onclose();//关闭modal
$modal2vue.onconfirm();//调用确定按钮的点击事件
$modal2vue.oncancel();//调用取消按钮的点击事件