From 7d33dd275b1dcf4c0a83a99a4555c1607f25a625 Mon Sep 17 00:00:00 2001
From: liuhanchen <liuhanchen@zeyihuoyun.com>
Date: Mon, 5 Dec 2022 10:44:42 +0800
Subject: [PATCH] feat: 优化自定义弹窗标题

---
 examples/views/docs/component/schema-page.md | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/schema-page/index.vue               | 10 ++++++++++
 2 files changed, 75 insertions(+), 0 deletions(-)

diff --git a/examples/views/docs/component/schema-page.md b/examples/views/docs/component/schema-page.md
index 80d1e38..c041e44 100644
--- a/examples/views/docs/component/schema-page.md
+++ b/examples/views/docs/component/schema-page.md
@@ -589,6 +589,71 @@ export default {
 
 :::
 
+## 弹窗标题
+
+对于一些特殊情形下，需要定制化弹窗标题样式，可以使用全局的`dialog-title`插槽和可双向绑定的插槽返回参数`dialogType`来完成；也可直接使用弹窗类型对应的`dialog-xxx-title`插槽来实现。
+
+::: snippet 由于弹窗同时只会存在一个实例，因此通过`dialog-title`插槽自定义全局弹窗标题，再用`dialogType`来具体判断适用于哪一个弹窗；也可直接为指定的弹窗配置标题插槽；
+
+```html
+<template>
+  <z-schema-page :schema="schema" :value-table.sync="tableModel">
+    <template #dialog-title="{ dialogType }">
+      <div v-if="dialogType === 'new'">
+        <span>这里是新增弹窗的</span>
+        <span style="color: red">自定义</span>
+        <b>标题</b>
+      </div>
+    </template>
+    <template #dialog-edit-title>
+      <div style="color: blue">这里是编辑弹窗的自定义标题</div>
+    </template>
+  </z-schema-page>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schema: {
+        filter: {
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名' },
+          ]
+        },
+        table: {
+          items: [
+            { prop: 'name', label: '姓名' },
+            { prop: 'age', label: '年龄' },
+            { prop: 'address', label: '地址' },
+            { prop: 'status', label: '状态', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
+          ]
+        },
+        form: {
+          props: { labelWidth: '70px', size: 'small', span: 12 },
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
+            { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
+            { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
+          ]
+        },
+        operation: { width: 120 }
+      },
+      tableModel: [
+        { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+        { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+        { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+        { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+        { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+      ],
+    }
+  },
+}
+</script>
+```
+
+:::
+
 ## 按钮权限
 
 本组件不包含自定义业务逻辑，因此配置项不包含权限判断，如果需要按钮的权限判断，可以通过`action`插槽和`operation`插槽将渲染逻辑暴露在视图模板中，然后进行自定义判断。
diff --git a/packages/schema-page/index.vue b/packages/schema-page/index.vue
index e6f442c..6f1cd1b 100644
--- a/packages/schema-page/index.vue
+++ b/packages/schema-page/index.vue
@@ -98,9 +98,18 @@
       </template>
     </el-drawer>
     <el-dialog :visible="_modalComponent === 'el-dialog' && visible" v-bind="_dialogProps" v-on="_modalListeners">
+      <!-- 弹窗实例的所有插槽 -->
       <template v-for="item in getSlotKeys('dialog-')" #[item.name]="slotScope">
         <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
       </template>
+      <!-- 自定义具名弹窗title插槽 -->
+      <template v-if="getSlot(`dialog-${modalType}-title`)" #title>
+        <slot :name="`dialog-${modalType}-title`" v-bind="_slotScope"></slot>
+      </template>
+      <!-- 自定义具名弹窗footer插槽 -->
+      <template v-if="getSlot(`dialog-${modalType}-footer`)" #footer>
+        <slot :name="`dialog-${modalType}-footer`" v-bind="_slotScope"></slot>
+      </template>
       <!-- 弹出框内容渲染状态，用于关闭时销毁已渲染的内容 -->
       <div v-if="_modalComponent === 'el-dialog' && modalRender" v-loading="dialogLoading">
         <!-- 自定义弹出框内容 -->
@@ -277,6 +286,7 @@ export default {
       const defaultScope = {
         size: this._size,
         loading: this.tableLoading,
+        dialogType: this.modalType,
       };
       return [...properties, ...methods].reduce((result, current) => {
         result[current] = this[current];
--
libgit2 0.21.0