vue3【组件封装】确认对话框 Modal

src/components/Modal.vue

html 复制代码
<template>
  <transition name="fade">
    <div
      class="fixed w-full h-full z-100 top-0 left-0 bg-black bg-opacity-30 flex transition-all"
      v-if="show"
    >
      <div class="w-80 m-auto bg-white border shadow-lg rounded-2 px-4 py-6">
        <slot></slot>
        <div class="flex justify-end pt-4">
          <div class="btn-plain px-6 mr-4" @click="show = false">取消</div>
          <div
            class="btn px-6"
            @click="
              () => {
                show = false
                $emit('confirm')
              }
            "
          >
            确定
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
defineEmits(['confirm'])
const show = defineModel({ default: false })
</script>

使用

html 复制代码
  <button @click="show_confirmWin = true">删除</button>

  <teleport to="body">
    <Modal v-model="show_confirmWin" @confirm="del"> 确定删除吗? </Modal>
  </teleport>
ts 复制代码
const show_confirmWin = ref(false)
const del = () => {
  alert('删除成功!')
}
相关推荐
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
JosieBook2 天前
【前端】Vue3 前端项目实现动态显示当前系统时间
前端·vue3·系统时间
摆烂式编程2 天前
APP端定位实现(uniapp Vue3)(腾讯地图)
uni-app·app·vue3·定位·腾讯
一只小阿乐3 天前
前端vue3 H5实现 静态页面使用本地json 并且需要上下滑动 可以切换tabs 栏
前端·json·vue3·h5开发
知识分享小能手3 天前
Vue3 学习教程,从入门到精通,Vue 3 表单控件绑定详解与案例(7)
前端·javascript·vue.js·学习·前端框架·vue3·anti-design-vue
梁辰兴4 天前
企业培训笔记:宠物信息管理--实现宠物信息分页查询
笔记·elementui·mybatis·vue3·springboot·宠物
爱看书的小沐6 天前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow
梁辰兴7 天前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
知识分享小能手9 天前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3