vue2.0实现一个模态弹框，内容自定义（使用slot）

定义模态框：合理使用插槽

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

}

使用插槽，实现弹框内容自定义，样式自定义,