增加自定义按钮弹出框

src/components/GuipDialog.vue

@@ -11,7 +11,6 @@
     >
         <!-- 自定义内容 -->
         <slot></slot>
-        <slot name="footer"></slot>
         <!-- 底部按钮 -->
         <span v-if="showFooterButton" slot="footer" :class="[type == 'center' ? 'dialog-footer-center' : 'dialog-footer-normal', 'flex']" style="justify-content: space-between;">
             <GuipButton v-if="showCancelButton" @click="handleCancel" type="ignore" >{{ cancelText }}</GuipButton>

src/views/elementGroups.vue

@@ -521,6 +521,8 @@
                 </GuipButton>
                 <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）
                 </GuipButton>
+                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog2">打开弹框-放弃原按钮，自定义
+                </GuipButton>
                 <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
             </div>
 
@@ -554,14 +556,29 @@
                     <p>这是一个自定义内容的弹框。</p>
                 </div>
             </GuipDialog>
-            <GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题" :show-close-button="false"
+            <GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题"
-                :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
                 @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
                 <!-- 自定义内容 -->
                 <div>
                     <p>这是一个自定义内容的弹框。</p>
                 </div>
             </GuipDialog>
+            <GuipDialog type="center" :dialogVisible="dialogVisible2" title="自定义标题、内容、按钮"
+            :showFooterButton="false"
+                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
+                <!-- 自定义内容 -->
+                <div>
+                    <p>这是一个自定义内容的弹框。</p>
+                    <p>这是一个自定义内容的弹框。</p>
+                    <p>这是一个自定义内容的弹框。</p>
+                    <p>这是一个自定义内容的弹框。</p>
+                    <!-- 样式自定义 -->
+                    <div class="btns gap10 mt24" style="width:100%">
+                        <GuipButton type="ignore">取消</GuipButton>
+                        <GuipButton :btnstyle="{width:'240px'}">⚡️咖啡不加糖喔</GuipButton>
+                   </div>
+                </div>
+            </GuipDialog>
         </div>
     </div>
 </template>
@@ -672,6 +689,7 @@ export default {
             switchValue1: 1,
             switchValue2: '0',
             dialogVisible1: false,
+            dialogVisible2: false,
             dialogVisible: false,//是否展示弹框
             showCancelButton: true, // 控制是否显示取消按钮
             showCloseButton: true, // 控制是否显示关闭按钮
@@ -1110,6 +1128,9 @@ export default {
         openDialog1() {
             this.dialogVisible1 = true;
         },
+        openDialog2() {
+            this.dialogVisible2 = true;
+        },
         // 确认按钮事件
         handleConfirm() {
             this.$message.success('点击了确认按钮');
@@ -1120,11 +1141,14 @@ export default {
             this.$message.warning('点击了取消按钮');
             this.dialogVisible = false;
             this.dialogVisible1 = false;
+            this.dialogVisible2 = false;
         },
         // 关闭弹框事件
         handleClose() {
             this.$message.info('弹框已关闭');
             this.dialogVisible = false;
+            this.dialogVisible1 = false;
+            this.dialogVisible2 = false;
         },
         dialogVisibleChange(data) {
             console.log(data, 'data098908090');
@@ -1349,4 +1373,9 @@ export default {
         background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
     }
 }
+.btns{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
 </style>