Commit 7d33dd275b1dcf4c0a83a99a4555c1607f25a625
1 parent
73fcbd39
Exists in
master
and in
2 other branches
feat: 优化自定义弹窗标题
Showing
2 changed files
with
75 additions
and
0 deletions
Show diff stats
examples/views/docs/component/schema-page.md
| @@ -589,6 +589,71 @@ export default { | @@ -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 | 本组件不包含自定义业务逻辑，因此配置项不包含权限判断，如果需要按钮的权限判断，可以通过`action`插槽和`operation`插槽将渲染逻辑暴露在视图模板中，然后进行自定义判断。 | 659 | 本组件不包含自定义业务逻辑，因此配置项不包含权限判断，如果需要按钮的权限判断，可以通过`action`插槽和`operation`插槽将渲染逻辑暴露在视图模板中，然后进行自定义判断。 |
packages/schema-page/index.vue
| @@ -98,9 +98,18 @@ | @@ -98,9 +98,18 @@ | ||
| 98 | </template> | 98 | </template> |
| 99 | </el-drawer> | 99 | </el-drawer> |
| 100 | <el-dialog :visible="_modalComponent === 'el-dialog' && visible" v-bind="_dialogProps" v-on="_modalListeners"> | 100 | <el-dialog :visible="_modalComponent === 'el-dialog' && visible" v-bind="_dialogProps" v-on="_modalListeners"> |
| 101 | + <!-- 弹窗实例的所有插槽 --> | ||
| 101 | <template v-for="item in getSlotKeys('dialog-')" #[item.name]="slotScope"> | 102 | <template v-for="item in getSlotKeys('dialog-')" #[item.name]="slotScope"> |
| 102 | <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot> | 103 | <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot> |
| 103 | </template> | 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 | <div v-if="_modalComponent === 'el-dialog' && modalRender" v-loading="dialogLoading"> | 114 | <div v-if="_modalComponent === 'el-dialog' && modalRender" v-loading="dialogLoading"> |
| 106 | <!-- 自定义弹出框内容 --> | 115 | <!-- 自定义弹出框内容 --> |
| @@ -277,6 +286,7 @@ export default { | @@ -277,6 +286,7 @@ export default { | ||
| 277 | const defaultScope = { | 286 | const defaultScope = { |
| 278 | size: this._size, | 287 | size: this._size, |
| 279 | loading: this.tableLoading, | 288 | loading: this.tableLoading, |
| 289 | + dialogType: this.modalType, | ||
| 280 | }; | 290 | }; |
| 281 | return [...properties, ...methods].reduce((result, current) => { | 291 | return [...properties, ...methods].reduce((result, current) => { |
| 282 | result[current] = this[current]; | 292 | result[current] = this[current]; |