<script>
export default {
  name: "CatDialog",
};
</script>

import CatDialog from "./components/dialog.vue";
Vue.component(CatDialog.name, CatDialog);

<template>
  <transition name="dialog-fade">
    <!--self：事件修飾符，只有點擊自己才觸發(fā)，點擊子元素不觸發(fā)  -->
    <div class="cat-dialog__wrapper" v-show="visible" @click.self="handleClose">
      <!-- 對話框 -->
      <div class="cat-dialog" :style="{ width, marginTop: top }">
 
        <!-- 對話框頂部 標(biāo)題 + 關(guān)閉按鈕 -->
        <div class="cat-dialog__header">
          <slot name="title">
            <span class="cat-dialog__title">{{ title }}</span>
          </slot>
          <button class="cat-dialog__headerbtn" @click="handleClose">
            <i class="cat-icon-close"></i>
          </button>
        </div>
 
        <!-- 對話框內(nèi)容 -->
        <div class="cat-dialog__body">
          <slot></slot>
        </div>
 
        <!-- 對話框底部 一般都是一些操作，沒有傳入footer插槽就不顯示v-if -->
        <div class="cat-dialog__footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "CatDialog",
  props: {
    title: {
      type: String,
      default: "提示",
    },
    // 彈框?qū)挾?
    width: {
      type: String,
      default: "30%",
    },
    // 彈框距離頂部距離
    top: {
      type: String,
      default: "15vh",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClose() {
      //visible是父組件傳過來的props，子組件不能直接修改，需要子傳父
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss">
// 進(jìn)入動畫
.dialog-fade-enter-active {
  animation: dialog-fade-in 0.4s;
}
// 離開動畫
.dialog-fade-leave-active {
  animation: dialog-fade-out 0.4s;
}
 
@keyframes dialog-fade-in {
  0% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
 
@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
</style>

<template>
  <div>
    <Cat-button type="primary" @click="visible = true">點擊彈出</Cat-button>
    <!-- 
      sync：事件修飾符，是一個語法糖寫法，實現(xiàn)子組件修改父組件傳入的props
      父：visible.sync="visible"
      子：this.$emit("update:visible", false) 
    -->
    <Cat-dialog width="25%" top="100px" :visible.sync="visible">
      <template v-slot:title>
        <h3>標(biāo)題</h3>
      </template>
      <template>
        <p>主體內(nèi)容，隨便寫點什么...</p>
        <input type="text" placeholder="請輸入信息" />
      </template>
      <template v-slot:footer>
        <Cat-button @click="visible = false">取消</Cat-button>
        <Cat-button type="primary" @click="visible = false">確定</Cat-button>
      </template>
    </Cat-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.cat-button {
  margin-right: 10px !important;
}
</style>