feat: 优化自定义弹窗标题

liuhanchen
1 parent 73fcbd39
Showing 2 changed files with 75 additions and 0 deletions Show diff stats
examples/views/docs/component/schema-page.md
packages/schema-page/index.vue
@@ -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`插槽将渲染逻辑暴露在视图模板中，然后进行自定义判断。
@@ -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];
...	...	@@ -589,6 +589,71 @@ export default {
589	589
590	590	:::
591	591
	592	+## 弹窗标题
	593	+
	594	+对于一些特殊情形下，需要定制化弹窗标题样式，可以使用全局的`dialog-title`插槽和可双向绑定的插槽返回参数`dialogType`来完成；也可直接使用弹窗类型对应的`dialog-xxx-title`插槽来实现。
	595	+
	596	+::: snippet 由于弹窗同时只会存在一个实例，因此通过`dialog-title`插槽自定义全局弹窗标题，再用`dialogType`来具体判断适用于哪一个弹窗；也可直接为指定的弹窗配置标题插槽；
	597	+
	598	+```html
	599	+<template>
	600	+ <z-schema-page :schema="schema" :value-table.sync="tableModel">
	601	+ <template #dialog-title="{ dialogType }">
	602	+ <div v-if="dialogType === 'new'">
	603	+ <span>这里是新增弹窗的</span>
	604	+ <span style="color: red">自定义</span>
	605	+ <b>标题</b>
	606	+ </div>
	607	+ </template>
	608	+ <template #dialog-edit-title>
	609	+ <div style="color: blue">这里是编辑弹窗的自定义标题</div>
	610	+ </template>
	611	+ </z-schema-page>
	612	+</template>
	613	+
	614	+<script>
	615	+export default {
	616	+ data() {
	617	+ return {
	618	+ schema: {
	619	+ filter: {
	620	+ items: [
	621	+ { is: 'el-input', prop: 'name', label: '姓名' },
	622	+ ]
	623	+ },
	624	+ table: {
	625	+ items: [
	626	+ { prop: 'name', label: '姓名' },
	627	+ { prop: 'age', label: '年龄' },
	628	+ { prop: 'address', label: '地址' },
	629	+ { prop: 'status', label: '状态', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
	630	+ ]
	631	+ },
	632	+ form: {
	633	+ props: { labelWidth: '70px', size: 'small', span: 12 },
	634	+ items: [
	635	+ { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
	636	+ { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
	637	+ { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
	638	+ ]
	639	+ },
	640	+ operation: { width: 120 }
	641	+ },
	642	+ tableModel: [
	643	+ { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
	644	+ { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
	645	+ { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
	646	+ { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
	647	+ { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
	648	+ ],
	649	+ }
	650	+ },
	651	+}
	652	+</script>
	653	+```
	654	+
	655	+:::
	656	+
592	657	## 按钮权限
593	658
594	659	本组件不包含自定义业务逻辑，因此配置项不包含权限判断，如果需要按钮的权限判断，可以通过`action`插槽和`operation`插槽将渲染逻辑暴露在视图模板中，然后进行自定义判断。
...	...
...	...	@@ -98,9 +98,18 @@
98	98	</template>
99	99	</el-drawer>
100	100	<el-dialog :visible="_modalComponent === 'el-dialog' && visible" v-bind="_dialogProps" v-on="_modalListeners">
	101	+ <!-- 弹窗实例的所有插槽 -->
101	102	<template v-for="item in getSlotKeys('dialog-')" #[item.name]="slotScope">
102	103	<slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
103	104	</template>
	105	+ <!-- 自定义具名弹窗title插槽 -->
	106	+ <template v-if="getSlot(`dialog-${modalType}-title`)" #title>
	107	+ <slot :name="`dialog-${modalType}-title`" v-bind="_slotScope"></slot>
	108	+ </template>
	109	+ <!-- 自定义具名弹窗footer插槽 -->
	110	+ <template v-if="getSlot(`dialog-${modalType}-footer`)" #footer>
	111	+ <slot :name="`dialog-${modalType}-footer`" v-bind="_slotScope"></slot>
	112	+ </template>
104	113	<!-- 弹出框内容渲染状态，用于关闭时销毁已渲染的内容 -->
105	114	<div v-if="_modalComponent === 'el-dialog' && modalRender" v-loading="dialogLoading">
106	115	<!-- 自定义弹出框内容 -->
...	...	@@ -277,6 +286,7 @@ export default {
277	286	const defaultScope = {
278	287	size: this._size,
279	288	loading: this.tableLoading,
	289	+ dialogType: this.modalType,
280	290	};
281	291	return [...properties, ...methods].reduce((result, current) => {
282	292	result[current] = this[current];
...	...