vue 定义公共弹窗自定义弹窗内容与按钮形式

最新推荐文章于 2024-04-20 13:24:32 发布

灰小小小熊

最新推荐文章于 2024-04-20 13:24:32 发布

阅读量994

点赞数 1

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_44883642/article/details/105655954

版权

这篇博客介绍了如何在Vue项目中创建一个名为commonConfirm的公共弹窗组件，通过在components目录下定义.vue文件和index.js来实现。组件允许自定义弹窗内容和按钮形式，可以在组件内部import或者在main.js全局引用。博主分享了具体的代码实现，并鼓励如果有更好的实现方式可以进行交流。

摘要由CSDN通过智能技术生成

话不多说，先上代码，习惯性在components里定义自己的公共组件，名称看个人习惯，我的叫做commonConfirm，定义一个对应的.vue文件以及index.js

首先你的commonConfirm.vue 文件

<template>
    <transition name="fade">
        <div class="com-confirm-mask" v-if="flag" @click="flag=false">
            <div class="com-confirm" @click.stop>
                <i class="com-confirm-close" @click="flag=false"></i>
                <div class="confirm-body">{
  {content}}</div>
                <div class="confirm-btns">
                    <Button type="primary"  v-if="cancelFlag" @click="sure">{
  {okText}}</Button>
                    <Button type="primary"  ghost v-if="okFlag" @click="no">{
  {cancelText}}<