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/components/GuipSelect.vue

@@ -61,6 +61,13 @@ export default {
     processedOptions() {
       // 处理options为空的情况
       let options = this.options || [];
+      // 如果是 [1,12,22] 格式
+      if (Array.isArray(options) && options.every(item => typeof item !== 'object')) {
+        return options.map((item, index) => ({
+          [this.valueKey]: index,
+          [this.labelKey]: item
+        }));
+      }
       
       // 如果是对象格式，转换为数组
       if (options && !Array.isArray(options)) {

src/views/elementGroups.vue

@@ -75,12 +75,17 @@
                         value-key="id" />
                 </div>
                 <div class="ele-item">
-                    <label for="">普通数组类型下拉框：</label>
+                    <label for="">数组套对象类型下拉框：</label>
                     <!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
                     <GuipSelect width="150px" v-model="form.card" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
                         prop="card" :options="options" valueKey="id1" labelKey="id2" :extraItem="{label:'全部',value:'99999'}"/>
                 </div>
                 <div class="ele-item">
+                    <label for="">纯数组[1,2]下拉框：</label>
+                    <GuipSelect width="150px" v-model="form.card" clearable label="卡片" @change="selectChangeTest"
+                        prop="card" :options="['麻辣烫','提拉米苏']" />
+                </div>
+                <div class="ele-item">
                     <label for="">对象格式下拉框：</label>
                     <GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
                         prop="card" :options="languageOptions"/>
@@ -521,6 +526,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,12 +561,27 @@
                     <p>这是一个自定义内容的弹框。</p>
                 </div>
             </GuipDialog>
-            <GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题" :show-close-button="false"
-                :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
+            <GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题"
+                @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>
@@ -672,6 +694,7 @@ export default {
             switchValue1: 1,
             switchValue2: '0',
             dialogVisible1: false,
+            dialogVisible2: false,
             dialogVisible: false,//是否展示弹框
             showCancelButton: true, // 控制是否显示取消按钮
             showCloseButton: true, // 控制是否显示关闭按钮
@@ -1110,6 +1133,9 @@ export default {
         openDialog1() {
             this.dialogVisible1 = true;
         },
+        openDialog2() {
+            this.dialogVisible2 = true;
+        },
         // 确认按钮事件
         handleConfirm() {
             this.$message.success('点击了确认按钮');
@@ -1120,11 +1146,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 +1378,9 @@ export default {
         background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
     }
 }
+.btns{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
 </style>