定义模态框：合理使用插槽
model.vue
<!-- 模态弹窗 -->
<template>
<div class="self-modal" v-show='showModal' @click="cancelClick" v-bind:style="styleObj" @touchmove.stop.prevent>
<!-- 自定义内容 -->
<slot></slot>
</div>
</template>
<script>
export default {
name: 'selfModal',
data () {
return {
showModal: false
}
},
props: {
styleObj: { // 用于承接样式类
type: Object,
default: function () {
return {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
width: '100%',
background: 'rgba(113,111,111,0.5)'
}
}
}
},
methods: {
// 确定
sureClick () {
this.showModal = true
return new Promise(function (resolve) {
resolve('sure')
}, function (reject) {})
},
// 取消
cancelClick () {
this.showModal = false
return new Promise(function (resolve) {
resolve('cancel')
}, function (reject) {})
}
}
}
</script>
<style scoped lang='scss'>
.self-modal{
z-index: 3000;
}
</style>
正确的使用方式：
import selfModal from '@/base/selfModal/modal'
<selfModal ref="incomeSelect" :styleObj="styleObj">
<div class="career-content" @click.prevent.stop>
<div class="mark-title">
请选择年收入
</div>
<div class="mark-wrapper" @click.stop="getIncome('1')">
<p class="nav-mark no-sub-mark">小于10万</p>
</div>
<div class="mark-wrapper" @click.stop="getIncome('2')">
<p class="nav-mark no-sub-mark">10万-30万</p>
</div>
<div class="mark-wrapper " @click.stop="getIncome('3')">
<p class="nav-mark no-sub-mark">大于30万</p>
</div>
<div class="mark-wrapper no-border-bottom">
<p class="btn-mark" @click.stop="getIncome()">取消</p>
</div>
</div>
</selfModal>
data () {
styleObj: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
background: 'rgba(113, 111, 111, 0.5)',
width: '100%'
},
}
methods () {
selectIncome () {
this.$refs.incomeSelect.showModal = true
}
使用插槽，实现弹框内容自定义，样式自定义,