封裝一個彈窗元件。

　　思路：一般我們都會用父子通訊傳參，但是父子通訊把彈窗顯示後，當點選彈窗的右上角的‘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