自定义提示确认弹窗-vue

最初可运行代码

弹窗组件代码:

(后来发现以下代码可运行,但打包 typescript 类型检查出错,可打包的代码在文末)

html 复制代码
<template>
  <div v-if="isVisible" class="dialog">
    <div class="dialog-content">
      <div style="padding: 40px 40px; text-align: center">{{message}}</div>
      <div style="display: flex; border-top: 1px solid #d2d0d0">
        <div @click="cancel" class="dialog-button">取消</div>
        <div style="border-right: 1px solid #d2d0d0"></div>
        <div @click="handleConfirm" class="dialog-button" style="color: #4e8fd3">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isVisible = ref(false);
const message = ref('');
const confirmCallback = ref(null)
const cancelCallback = ref(null);

const showDialog = (params = {} ) => {
  isVisible.value = true;
  message.value = params.message || '提示内容';
  confirmCallback.value = params.confirmCallback || null;
  cancelCallback.value = params.cancelCallback || null;
};

const handleConfirm = () => {
  if (confirmCallback.value) {
    confirmCallback.value();
  }
  isVisible.value = false;
};

const cancel = () => {
  if (cancelCallback.value) {
    cancelCallback.value();
  }
  isVisible.value = false;
};

defineExpose({
  showDialog
});
</script>

<style scoped>
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.dialog-content {
  background-color: #fff;
  border-radius: 10px;
  width: 80%;
}

.dialog-button {
  flex-grow: 1;
  text-align: center;
  padding: 20px 0;
}
</style>

效果:更适用于移动端

弹窗显示:

html 复制代码
<template>
  <div>
    <button @click="openDialog">打开弹窗</button>
    <ChildDialg ref="dialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
    // 1. 引入子组件
import ChildDialg from "@/views/components/ChildDialg.vue";
    // 2. 定义子组件 ref 参数
const dialogRef = ref(null);

const openDialog = () => {
    // 3. 弹窗显示
  dialogRef.value.showDialog({
      message: '内容',
      confirCallback: () => {
          
      }
  });
};
</script>

打包 typescript 检查错误修复

######## 项目打包,typescript 类型检查报错 ###########

  1. 函数接收类没有属性定义
  1. 调用弹窗时未作 组件 非空判断
  1. 接收的回调函数参数,定义的初始值为 null ,无法以函数方式调用
  1. 定义的组件 ref 参数默认值为 null ,无法调用子组件暴露的函数
  1. 子组件定义的参数 与 父组件传递的参数不一致(定义了取消回调,但没有传入)

可以选择传入"取消"操作的回调函数 ,但考虑到此组件在我实际运用时取消没有其它操作,便选择不定义其回调函数

最终可打包的代码

html 复制代码
<template>
  <div v-if="isVisible" class="dialog">
    <div class="dialog-content">
      <div style="padding: 40px 40px; text-align: center">{{message}}</div>
      <div style="display: flex; border-top: 1px solid #d2d0d0">
        <div @click="cancel" class="dialog-button">取消</div>
        <div style="border-right: 1px solid #d2d0d0"></div>
        <div @click="handleConfirm" class="dialog-button" style="color: #4e8fd3">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isVisible = ref(false);
const message = ref('');
const confirmCallback = ref(() => {})
const cancelCallback = ref(() => {});

const showDialog = (params = {
  message: '提示内容',
  confirmCallback: () => {}
} ) => {
  isVisible.value = true;
  message.value = params.message;
  confirmCallback.value = params.confirmCallback;
};

const handleConfirm = () => {
  if (confirmCallback.value) {
    confirmCallback.value();
  }
  isVisible.value = false;
};

const cancel = () => {
  if (cancelCallback.value) {
    cancelCallback.value();
  }
  isVisible.value = false;
};

defineExpose({
  showDialog
});
</script>

<style scoped>
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.dialog-content {
  background-color: #fff;
  border-radius: 10px;
  width: 80%;
}

.dialog-button {
  flex-grow: 1;
  text-align: center;
  padding: 20px 0;
}
</style>
html 复制代码
<template>
  <div>
    <button @click="openDialog">打开弹窗</button>
    <ChildDialg ref="dialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
    // 1. 引入子组件
import ChildDialg from "@/views/components/ChildDialg.vue";
    // 2. 定义子组件 ref 参数
const dialogRef = ref<InstanceType<typeof  DialogView> | null>(null)

const openDialog = () => {
    // 3. 弹窗显示
  if(dialogRef.value) {
    dialogRef.value.showDialog({
      message: '内容',
      confirCallback: () => {
          
      }
    });
  }
};
</script>
相关推荐
古斯塔斯hugh1 分钟前
VUE学习笔记10__vue指令v-on配置method函数
vue.js·笔记·学习
陶甜也3 分钟前
uniapp 自定义日历组件 源码
前端·javascript·css·vue.js·uni-app
计算机-秋大田3 分钟前
基于微信小程序的摄影竞赛系统设计与实现(LW+源码+讲解)
java·前端·后端·微信小程序·小程序·课程设计
nfenghklibra3 分钟前
npm的包管理
前端·npm·node.js
大王在路上7 分钟前
Ant Design Vue --- select组件静态实现模糊搜索
前端·javascript·vue.js·anti-design-vue
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS欢迪迈手机商城(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
远洋录2 小时前
Electron 开发者的 Tauri 2.0 实战指南:文件系统操作
前端·人工智能·react
兔帮大人2 小时前
npm配置electron专属的淘宝镜像进行安装
前端·electron·npm
m0_748248652 小时前
【JavaEE】Spring Web MVC
前端·spring·java-ee
涔溪2 小时前
使用 electron-builder 构建一个 Electron 应用程序 常见问题以及解决办法
前端·javascript·electron