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

最新推荐文章于 2024-08-18 18:30:07 发布

原创

最新推荐文章于 2024-08-18 18:30:07 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

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

话不多说，先上代码，习惯性在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}}</Button>              
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            flag: false,// 弹