vmodal
基于vue.js2.0+的弹窗组件
- 参数，是一个对象*
modalData:{
show: false, //是否显示弹窗，必填参数，modalData的必填参数
title: '是否删除？', //弹窗标题，默认值是“是否删除？”
body: '是否确定删除？删除不可回复！', // 弹窗内容，默认值是 “是否确定删除？删除不可恢复”
width: '420px', //容器宽度 默认值是 “420px”
showTitle: true, //显示标题 默认值是 true
titleAnchor: 'center', //标题文字位置 默认值是center居中，另外一个参数是‘left’居左
bottomClass：['confirm', 'cancle'], //按钮添加样式，必须同时存在，若某个按钮不需添加则为空, 样式需要添加 !important
titleClass: 'active', //标题添加样式，样式需要添加 !important
}
-
监听的回调方法 a. on-cancle ; 取消按钮的回调方法，参数是false b. on-confirm； 确认按钮回调方法，参数是false
-
因为自组件是不能改变父组件的数据状态，所以必须通过组件的回调方法，动态修改组件的是否显示状态
-
该组件提供了4个可自主置换的slot插槽，可自定义自己的样式和添加自定义的dom节点
a. 标题区的插槽：<slot name="modal-header"> </slot>
b. 内容区的插槽：<slot name="modal-body"></slot>
c. 底部按钮区的插槽：<slot name="modal-fooder"></slot>
d. 关闭图标的插槽：<slot name="modal-close"></slot> //避免该组件关闭按钮和系统ui设计不一致，可替换
-
注意事项 a. 置换样式时，需要注意样式的专有缓存，scoped时当前组件特有的，需注意两者关系 b. 在通过script直接引入的组件，数据传递:modalData="modalData"需要写成 :modal-Data="modalData"
-
用法
Import 引入：
npm install vue-modal-ponicy --save //npm 安装该组件包
import modal from 'vue-modal-ponicy' // 导入该组件
Vue.use(modal ); //全局注册该组件，在入口文件中倒入注册
//在组件中调用，vmodal是组件名
<vmodal :modalData.sync="modalData" @on-cancle="cancleHandle" @on-confirm="confirmHandle" />
export default{
data(){
return{
modalData: false
}
}
}
Script 引入：
<body>
<div id="app">
<div @click.stop.prevent="show">显示</div>
<vmodal :modal-Data="modalData" @on-cancle="cancleHandle" @on-confirm="confinrHandel"></vmodal>
</div>
</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./js/vueModal.js"></script> //直接引入会自动全局注册
var vm = new Vue({
el: '#app',
data:{
modalData: {
show: false,
}
},
methods: {
show: function() {
this.modalData.show = true; //显示弹窗
},
cancleHandle: function (boolean) {
this.modalData.show = boolean; //隐藏弹窗
},
confinrHandel: function (boolean) {
this.modalData.show = boolean; //隐藏弹窗
}
}
});
- 兼容IE9+，Firefox，chrome，360，QQ
License
MIT