前端开发Vue3.0 标签setup语法『UI组件库』之『模态框』【业务提升必备】

 封装模态框需要定义的参数

  title //弹窗标题
  show   // 是否显示弹窗
  width  // 弹窗宽度
  height  // 弹窗高度
  borderRadius   // 弹窗圆角
  headerColor // 弹窗顶部颜色
  contentText // 内容文本
  contentTextCorder //内容文本颜色
  position // 标题的位置
  btnGroupShow // 按钮的显示隐藏
  confirmText // 确认按钮的文本
  cancelText // 取消按钮的文本

封装模态框需要定义的方法

const cancelHandler = () => {
    // 关闭弹窗的方法
}

const confirmHandler = () => {
   // 弹窗点击确认的方法
}

在components文件新建一个modal-dialog.vue文件

1、defineProps 在Vue 3中，defineProps 是一个用于定义传入组件的 Props 的函数。它通常用在组合式 API 或 Composition API 中。

2、defineEmits 的用法 defineEmits的用法是在子组件中定义接收父组件传过来的方法

index.vue主组件