Vue组件封装 ——dialog对话框组件

 一、基础准备工作

1、创建一个基础的vue项目包

2、创建components文件夹，用于存放组件，新建dialog.vue组件，可以自己取个名字

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

3、在main.js中引入组件

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

4、App.vue中使用组件

二、dialog组件结构搭建

       dialog对话框，整体有一个动画效果，vue的动画效果，使用transition包裹需要动画展示的元素，那么这个元素在显示/隐藏时自动添加一些类名，此例详见后续代码

        对话框分为三部分：

        1、头部：左侧为标题，使用具名插槽 title 占位，右侧为按钮/图标（关闭）

        2、主体内容，使用不具名的插槽占位

        3、底部：一般都是一些操作，使用具名插槽 footer 占位，通常内容是取消/确认按钮

        需要传入的参数：

        title：头部标题

        width：对话框宽度

        top：对话框距离顶部的距离

        visible：对话框的显示/隐藏

页面效果：

       

 

dialog.vue 具体代码如下，style样式太多，不逐一列出了，可根据需求自己定义： 

<template>
  <transition name="dialog-fade">
    <!--self：事件修饰符，只有点击自己才触发，点击子元素不触发  -->
    <div class="cat-dialog__wrapper" v-show="visible" @click.self="handleClose">
      <!-- 对话框 -->
      <div class="cat-dialog" :style="{ width, marginTop: top }">

        <!-- 对话框顶部 标题 + 关闭按钮 -->
        <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>

        <!-- 对话框内容 -->
        <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: "提示",
    },
    // 弹框宽度
    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>

 transition动画代码：

<style lang="scss">
// 进入动画
.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>

App.vue使用dialog组件：

<template>
  <div>
    <Cat-button type="primary" @click="visible = true">点击弹出</Cat-button>
    <!-- 
      sync：事件修饰符，是一个语法糖写法，实现子组件修改父组件传入的props
      父：visible.sync="visible"
      子：this.$emit("update:visible", false) 
    -->
    <Cat-dialog width="25%" top="100px" :visible.sync="visible">
      <template v-slot:title>
        <h3>标题</h3>
      </template>
      <template>
        <p>主体内容，随便写点什么...</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>