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}

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