修改弹出框自定义标题问题

src/components/GuipDialog.vue

@@ -1,7 +1,6 @@
 <template>
     <el-dialog
         :visible.sync="dialogShow"
-        :title="title"
         v-bind="$attrs"
         append-to-body
         :width="width"
@@ -10,6 +9,12 @@
         :class="type == 'center' ?'center' : 'normal'"
         :close-on-click-modal="closeOnClickModal"
     >
+    <template #title>
+      <slot v-if="$slots.title" name="title"></slot>
+      <span v-else class="default-header">{{ title }}</span>
+    </template>
+
+    <!-- 默认内容插槽 -->
         <!-- 自定义内容 -->
         <slot></slot>
         <!-- 底部按钮 -->

src/views/agent/checkOrderList.vue

@@ -4,22 +4,29 @@
         <div class="pageheader flex-between">
             <span class="pagetitle">{{ pageTitle }}</span>
             <GuipButton size="table" type="ignore" @click="showPddSetting">拼多多发货</GuipButton>
-
-            <GuipDialog :dialogVisible="dialogVisiblePddSetting" title="" :confirmText="pddSettingConfirmText"
+            <GuipDialog :dialogVisible="dialogVisiblePddSetting" title="999" :confirmText="pddSettingConfirmText"
                 cancelText="取消" :show-close-button="false" :show-cancel-button="true" @confirm="pddSetting"
                 @cancel="closePddSetting" @close="closePddSetting" @dialogVisibleChange="dialogVisibleChange">
                 <!-- 自定义内容 -->
+                <template #title>
+                    <div class="custom-header">
+                    <el-tabs v-model="pddSettingActiveName">
+                        <el-tab-pane label="拼多多手工发货" name="1"></el-tab-pane>
+                        <el-tab-pane label="拼多多自动发货" name="2"></el-tab-pane>
+                    </el-tabs>
+                    <i class="el-icon-close close-icon" @click="dialogVisiblePddSetting = false"></i>
+                    </div>
+                </template>
                 <el-form>
-                    <el-tabs v-model="pddSettingActiveName" @tab-click="handleClick">
-                        <el-tab-pane label="拼多多手工发货" name="1">
-                            <PromptText text='导出待发货订单excel，到拼多多导入该excel进行发货' :type="1" />
+                    <div v-if="pddSettingActiveName == '1'">
+                        <PromptText text='导出待发货订单excel，到拼多多导入该excel进行发货' :type="1" />
                             <GuipSelect class="mt-16" label="选择站点" v-model="pddExportUid"
                                 @change="selectPddExportSite()" :options="searchSiteList" valueKey="uid" labelKey="name"
                                 :extraItem="{ label: '请选择站点', value: '0' }" placeholder="" clearable width="300px" />
 
-                        </el-tab-pane>
-                        <el-tab-pane label="拼多多自动发货" name="2">
-                            <PromptText text='需要自己在拼多多购买自动发货软件，并设置下方规则' :type="1" />
+                    </div>
+                    <div v-if="pddSettingActiveName == '2'">
+                        <PromptText text='需要自己在拼多多购买自动发货软件，并设置下方规则' :type="1" />
                             <div class="flex-wrap mt-16">
                                 <div class="mb-16">
                                     <p>提交规则</p>
@@ -36,8 +43,7 @@
                                     </div>
                                 </div>
                             </div>
-                        </el-tab-pane>
-                    </el-tabs>
+                    </div>
                 </el-form>
             </GuipDialog>
         </div>
@@ -764,6 +770,12 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.custom-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}
 .pageheader {
     display: flex;
     justify-content: space-between;