封装一个弹窗

封装一个弹窗组件。

　　思路：一般我们都会用父子通信传参，但是父子通信把弹窗显示后，当点击弹窗的右上角的‘X’的时候，子组件里面把`v-if`的值设为false的时候，要通过子传父自定义事件触发，把值给传过去，这里我们为了代码更灵活，可以用指令`v-model`,在子组件调用的地方绑定`v-model`,通过传参用`v-if`绑定`v-model`的值来控制组件的显示与隐藏。父组件的代码如下:

<template>
  <div class="home">
    <button @click="dialogHandle">显示</button>
    <Dialog v-model="abc" @isokay="isokayHandle">
        <template v-slot:header>
          <div>自定义标题</div>
        </template>
    </Dialog>
  </div>
</template>
<script>
// @ is an alias to /src
import Dialog from '@/components/Dialog/index'
export default {
  name: 'Home',
  data () {
    return {
      abc: false
      // 当不使用slot定义内容的时候，可以使用title、desc属性把内容传参
      // title: '大标题大标题',
      // desc: '简介简介简介简介简介'
    }
  },
  components: {
    Dialog
  },
  methods: {
    dialogHandle () {
      this.abc = true
    },
    cancelHandle () {
    },
    isokayHandle () {
      console.log(123)
    }
  }
}
</script>

子组件的代码如下：

<template>
  <transition name="fade">
    <div class="dialog" v-if="show" @click="handleClose">
      <div class="container" :style="{width: width + 'px', minHeight: height + 'px'}" @click.stop>
        <slot name="header">
          <v-header :title="title"/>
        </slot>
        <slot name="close">
          <v-close @close="handleClose()"/>
        </slot>
        <slot>
          <v-content :desc="desc"/>
        </slot>
        <slot name="footer">
          <v-footer @cancel="cancelHandle()" @okay="isokayHandle" />
        </slot>
      </div>
    </div>
  </transition>
</template>
<script>
/*
  组件使用方式：
  1. show 参数表示控制弹窗组件的显示和隐藏， true表示显示false表示隐藏 主要:需要使用v-model 进行绑定
  2. title 参数是代表要传入标题文本，类型是字符串
  3. desc  参数是代表要传入的描述文本，类型是字符串
  4. width 参数是一个数值，代表整个弹窗的宽，默认值是400
  5. height 参数是一个数值，代表整个弹窗的高，默认值是154
  6. @cancel 用于做弹窗的取消的自定义事件
  7. @isokay 用于做弹窗的确定自定义事件
  8. slot 插槽，当属性title传入值的时候，slot则要注释，当不需要title传值的时候，则在插槽内定义需要传递的内容，具名插槽对应相应的模块
*/
import Header from '@/components/Dialog/Header'
import Close from '@/components/Dialog/Close'
import Content from '@/components/Dialog/Content'
import Footer from '@/components/Dialog/Footer'

export default {
  name: 'Dialog',
  props: {
    show: { // v-model绑定的show
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '只是标题'
    },
    desc: {
      type: String,
      default: '这是一段描述'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 154
    }
  },
  model: { // v-model绑定的自定义事件
    prop: 'show',
    event: 'close'
  },
  data () {
    return {}
  },
  components: {
    vHeader: Header,
    vClose: Close,
    vContent: Content,
    vFooter: Footer
  },
  methods: {
    handleClose () {
      this.$emit('close', false)
    },
    cancelHandle () {
      this.$emit('cancel')
      this.handleClose()
    },
    isokayHandle () {
      this.$emit('isokay')
      this.handleClose()
    }

  }
}

效果图如下：

 

 还要注意一点的是当我们点击遮罩的时候，弹窗隐藏，点击白色盒子部分，弹窗还是显示，如上代码在子组件最外一层元素身上绑定一个点击事件`handleClose`，将弹窗的心事隐藏的初始值设置为false,通过子传父触发传递，在子元素`.container`身上阻止事件冒泡`@click.stop`

　　详细代码可访问gitee。地址：https://gitee.com/milaliao/Dialog/tree/master/src