本文只是作为练习弹出框，弹框内部的东西需要进行自定义添加，主要对更新，删除，新建 ，提示四种弹框进行实现，例子中只是简单的组件应用
Modal.vue文件
<template>
<div id ="modalPopBox" v-if="innerAriaShow">
<div class="el-modal-wrapper">
<div class="el-modal-box">
<div class="el-modal-header">
<span class="el-modal-title">{{ariaLabel}}</span>
<span class="close" @click="closeModal()">x</span>
</div>
<div class="el-modal-content">
<slot name="body"></slot>
</div>
<div class="el-modal-btns">
<slot name="btns"></slot>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
name:'modalPopBox',
props:{
ariaLabel:{
type:String,
default:'prompt'
},
ariaShow:{
type:Boolean,
default:false
},
itemId:{
type:Number
}
},
data:function(){
return {
innerAriaShow:this.ariaShow,
updateModal:'',
deleteModal:'',
addModal:'',
promptModal:''
}
},
methods:{
closeModal:function(){
this.innerAriaShow = false;
if(this.ariaLabel=='Update'){
this.updateModal=false;
this.$emit('getUpdateModal',this.updateModal);
}
if(this.ariaLabel=='Delete'){
this.deleteModal=false;
this.$emit('getDeleteModal',this.deleteModal);
}
if(this.ariaLabel=='New'){
this.addModal = false;
this.$emit('getAddModal',this.addModal);
}
if(this.ariaLabel=='Prompt'){
this.promptModal = false;
this.$emit('getPromptModal',this.promptModal);
}
}
}
}
</script>
<style>
#modalPopBox{
position: fixed;
z-index: 9998;
top: 0;
left: 0;
100%;
height: 100%;
/*background-color: rgba(0, 0, 0, .5);*/
display: table;
transition: height 2s ease;
}
.el-modal-wrapper{
display:table-cell;
vertical-align:middle;
}
.el-modal-box{
400px;
margin:0 auto;
border-radius:6px;
/*height:300px;*/
padding:10px 30px;
background-color:#fff;
border-radius:2px;
box-shadow:0 2px 8px ragb(0,0,0,0.33);
/*transition:all 1s ease;*/
font-family:Helvetica,Arial,sans-serif;
transition: height 2s ease;
}
.el-modal-header{
height:30px;
line-height:30px;
}
.el-modal-header .el-modal-title{
font-size:16px;
font-weight: bold;
color:#333;
}
.el-modal-header .close{
position:relative;
top:0;
left:350px;
30px;
height:30px;
cursor:pointer;
}
.el-modal-header .close:hover{
color:#f44;
}
.el-modal-content{
margin:0 auto;
text-align:center;
padding:10px 10px;
}
.el-modal-btns{
text-align:center;
padding:10px 0;
}
.el-modal-btns button{
/*60px;*/
border-radius:5px;
background-color: #409eff;
padding:6px 10px;
cursor:pointer;
color:#fff;
border-color:#409eff;
border-style:none;
}
</style>
在其他组件中应用
<template>
<div id = "outletapp">
<div class="btns">
<tr class="data-tr" v-for="(item,index) in itemList">
<td class="data-td">{{item.value1}}</td>
<td class="data-td">{{item.value2}}</td>
<td class="data-td">
<button class="buttonCurd" @click="update(item)">Update</button> |
<button class="buttonCurd" @click="del(item.id)">Delete</button>
</td>
</tr>
</div>
<div class="modal-mask" v-if="updateModal">
<modal-pop-box :ariaLabel="modalName" :ariaShow=true :itemId="countInfo.itemId" @getUpdateModal="getUpdateModal">
<div slot="body">
<table>
<tr>
<td class="alignright"><label for="manage_accout">key1:</label></td>
<td class="alignleft"><input name="manage_accout" type="text" v-model="pars.value1"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td class="alignright"><label for="queue_accout">key2:</label></td>
<td class="alignleft"><input name="queue_accout" type="text" v-model="pars.value2"></td>
</tr>
</table>
</div>
<div slot="btns">
<button type="submit" @click="updateSubmit(pars.id)">Submit</button>
</div>
</modal-pop-box>
</div>
<div class="modal-mask" v-if="deleteModal">
<modal-pop-box :ariaLabel="modalName" :ariaShow=true v-if="deleteModal" :itemId="countInfo.itemId" @getDeleteModal="getDeleteModal">
<div slot="body">
确认删除该条信息么？
</div>
<div slot="btns">
<button @click="deleteSubmit(pars.id)">确认</button>
<button @click="deleteClose()">取消</button>
</div>
</modal-pop-box>
</div>
<div class="modal-mask" v-if="promptModal">
<modal-pop-box :ariaLabel="modalName" :ariaShow=true v-if="promptModal" @getPromptModal="getPromptModal">
<div slot="body">
{{desc}}
</div>
<div slot="btns">
<button @click="closePrompt()">OK</button>
</div>
</modal-pop-box>
</div>
</div>
</template>
<script>
import modalPopBox from '../components/modal.vue'
var vm = {
data:function(){
return {
updateModal:false,
deleteModal:false,
promptModal:false,
pars:{
value1:'',
value2:'',
id:0
},
desc:'',
modalName:'',
itemList:{},
parentTotal:0,
parentCurrentPage:1,
parentPagesize:10,
queryParams:{
otherParams:'',
pagesize:10,
pageNum:1
},
}
},
methods:{
update:function(obj){
this.updateModal = true;
this.pars.itemId = parseInt(obj.id);
this.pars.value1 = obj.value1;
this.pars.value2 = obj.value2;
this.modalName = "Update"
},
del:function(idx){
this.deleteModal = true;
this.pars.id = parseInt(idx);
this.modalName = "Delete"
},
updateSubmit:function(idx){
this.pars.id=idx;
this.$http.post('',this.pars,{emulateJSON:true}).then(function(res){
this.updateModal = false;
this.parentCallback(this.queryParams);
},function(res){
this.desc= res.desc;
this.promptModal = true;
}
)
},
deleteSubmit:function(idx){
this.pars.id=idx;
this.$http.post('',this.pars.id,{emulateJSON:true}).then(function(res){
this.deleteModal = false;
this.parentCallback(this.queryParams);
},function(res){
this.desc= 'ajax failure';
this.deleteModal = false;
this.promptModal = true;
this.modalName = "Prompt"
}
)
},
deleteClose:function(){
this.deleteModal = false;
},
getUpdateModal:function(par){
this.updateModal = par;
},
getDeleteModal:function(par){
this.deleteModal = par;
},
getPromptModal:function(par){
this.promptModal = par;
},
closePrompt:function(){
this.promptModal = false;
}
},
beforeCreate:function(){
// 初始化请求一下数据,本例中使用的是本地数据
var res= jsontest2;
var tem = res;
this.itemList = tem.rows;
this.parentTotal = parseInt(tem.total);
},
created:function(){
var _self = this;
_self.parentCallback(_self.queryParams);
},
components:{
modalPopBox
}
}
export default vm
// vm.testhook = 2
</script>
<style>
.modal-mask{
position: fixed;
z-index: 9998;
top: 0;
left: 0;
100%;
height: 100%;
background-color: rgba(100, 100, 100, .5);
display: table;
transition: opacity 1s ease;
}
.buttonCurd{
color:#0000ff;
cursor:pointer;
}
.buttonCurd:hover{
color:#882222;
}
.alignright{
text-align:right;
padding-right:6px;
}
.alignleft{
text-align:left;
}
</style>