iview常用组件封装-modal3

<template
<Modal v-model=“visible” class=“modal-wrap” :mask-closable=“false” :title=“params.title” :style=“iStyle” @on-cancel=“cancel”>
<slot name=“content” /
<div slot=“footer” class=“btn-wrap”
<i-button v-for="(item, index) in params.btns" :key=“index” :size=“item.size” style=“margin-right: 8px;” :type=“item.type” @click=“btnHandle(item.event)”>
{{ item.text }}
</i-button
</div
</Modal
</template

script
export default {
name: ‘ModalCommon’,
props: {
params: {
type: Object,
default: () => {}
},
modalwidth: {
type: Number,
default: 350
},
title: {
type: String,
default: ‘a’
},
contenttitle: {
type: String,
default: ‘’
},
datas: {
type: Array,
default: () => []
},
btns: {
type: Array,
default: () => []
},
visible: {
type: Boolean,
default: false
}
},
component: {
},
data () {
return {
// visible: false
}
},
computed: {
iStyle () {
let oStyle = {}
oStyle = {
width: ${this.modalwidth}px
}
return oStyle
}
},
mounted () {
},
methods: {
cancel () {
console.log(‘cancel’)
this.KaTeX parse error: Expected 'EOF', got '}' at position 33: …s', false) }̲, btnHandle…emit(event, this.datas)
}
}
}
}
/script

style lang=“scss” scoped
.modal-wrap {
margin-top: 1.25rem;
text-align: left;

.label {
font-size: 18px;
text-align: center;
margin-bottom: 10px;
}

.btn-wrap {
text-align: center;

.btn-cancel {
  margin-right: .625rem;
}

}
}
/style

style lang=“scss”
// .modal-wrap {

// .form-wrap {

// .ivu-form-item {
// margin-bottom: 20px;
// }

// &.formvertical {
// margin-left: 2.5rem;

// .btn-wrap {
// margin-left: 6.125rem;
// margin-top: 20px;
// }
// }
// min-width: 5rem;
// margin-top: 12px;

// .ivu-form-item-content {
// margin-left: 0 !important;
// }

// .btn-wrap {
// // margin-left: 2.5rem;
// }
// }
// }
/style