Skip to content

Commit

Permalink
fix(dialog): 1、修复普通对话框 不脱离文档流
Browse files Browse the repository at this point in the history 
1、修复普通对话框 不脱离文档流

fix Tencent#993
  • Loading branch information
18651688439 committed Jun 13, 2022
1 parent 42c106f commit 2d17ef1
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 26 deletions.
13 changes: 13 additions & 0 deletions examples/dialog/demos/modal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<t-button theme="primary" @click="visibleModal = true">模态对话框</t-button>
<t-button theme="primary" @click="visibleModelessDrag = true">非模态对话框</t-button>
<t-button theme="primary" @click="visibleModeless = true">模态对话框-不可拖拽</t-button>
<t-button theme="primary" @click="visibleNormal = true">普通对话框-不可拖拽</t-button>

<t-dialog
header="模态对话框"
Expand Down Expand Up @@ -50,6 +51,17 @@
<div>对话框内容</div>
</div>
</t-dialog>

<t-dialog
header="普通对话框-不可拖拽"
:visible.sync="visibleNormal"
mode="normal"
:onConfirm="() => (this.visibleNormal = false)"
>
<div slot="body">
<div>对话框内容</div>
</div>
</t-dialog>
</div>
</template>
<script>
Expand All @@ -59,6 +71,7 @@ export default {
visibleModal: false,
visibleModelessDrag: false,
visibleModeless: false,
visibleNormal: false,
};
},
methods: {},
Expand Down
31 changes: 24 additions & 7 deletions src/dialog/dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
isModeLess(): boolean {
return this.mode === 'modeless';
},
// 是否普通对话框，没有脱离文档流的对话框
isNormal(): boolean {
return this.mode === 'normal';
},
maskClass(): ClassName {
return [`${name}__mask`, !this.showOverlay && `${prefix}-is-hidden`];
},
Expand All @@ -70,9 +74,17 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
return dialogClass;
},
positionClass(): ClassName {
const dialogClass = [`${name}__position`, !!this.top && `${name}--top`, `${this.placement && !this.top ? `${name}--${this.placement}` : ''}`];
if (this.isNormal) return [];
const dialogClass = [
`${name}__position`,
!!this.top && `${name}--top`,
`${this.placement && !this.top ? `${name}--${this.placement}` : ''}`,
];
return dialogClass;
},
wrapClass(): ClassName {
return [!this.isNormal && `${name}__wrap`];
},

positionStyle(): Styles {
const topStyle = {} as Styles;
Expand Down Expand Up @@ -236,8 +248,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
this.disY = targetEvent.clientY - target.offsetTop;
this.dialogW = target.offsetWidth;
this.dialogH = target.offsetHeight;
this.windowInnerWidth = (window.innerWidth || document.documentElement.clientWidth);
this.windowInnerHeight = (window.innerHeight || document.documentElement.clientHeight);
this.windowInnerWidth = window.innerWidth || document.documentElement.clientWidth;
this.windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
// 如果弹出框超出屏幕范围 不能进行拖拽
if (this.dialogW > this.windowInnerWidth || this.dialogH > this.windowInnerHeight) return;
// 元素按下时注册document鼠标监听事件
Expand Down Expand Up @@ -311,12 +323,17 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
);
const bodyClassName = this.theme === 'default' ? `${name}__body` : `${name}__body__icon`;
// 此处获取定位方式 top 优先级较高 存在时 默认使用top定位

return (
// /* 非模态形态下draggable为true才允许拖拽 */
<div class={`${name}__wrap`} onClick={this.overlayAction} >
<div class={this.wrapClass} onClick={this.overlayAction}>
<div class={this.positionClass} style={this.positionStyle}>
<div key="dialog" ref="dialog" class={this.dialogClass} style={this.dialogStyle}>
<div
key="dialog"
ref="dialog"
class={this.dialogClass}
style={this.dialogStyle}
onClick={(e: MouseEvent) => e.stopPropagation()}
>
<div class={`${name}__header`}>
{this.getIcon()}
{renderTNodeJSX(this, 'header', defaultHeader)}
Expand All @@ -332,8 +349,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
<div class={bodyClassName}>{body}</div>
<div class={`${name}__footer`}>{renderTNodeJSX(this, 'footer', defaultFooter)}</div>
</div>
</div>
</div>
</div>
);
},
},
Expand Down
3 changes: 2 additions & 1 deletion test/ssr/__snapshots__/ssr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5249,7 +5249,8 @@ exports[`ssr snapshot test renders ./examples/dialog/demos/icon.vue correctly 1`
`;

exports[`ssr snapshot test renders ./examples/dialog/demos/modal.vue correctly 1`] = `
<div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">模态对话框</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">非模态对话框</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">模态对话框-不可拖拽</span></button>
<div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">模态对话框</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">非模态对话框</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">模态对话框-不可拖拽</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">普通对话框-不可拖拽</span></button>
<div duration="300" name="t-dialog-zoom__vue"></div>
<div duration="300" name="t-dialog-zoom__vue"></div>
<div duration="300" name="t-dialog-zoom__vue"></div>
<div duration="300" name="t-dialog-zoom__vue"></div>
Expand Down
20 changes: 10 additions & 10 deletions test/unit/config-provider/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1035,10 +1035,10 @@ exports[`ConfigProvider ConfigProvider dialogVue demo works fine 1`] = `
class="t-dialog__ctx"
>
<div
class="t-dialog__wrap"
class=""
>
<div
class="t-dialog__position t-dialog--top"
class=""
>
<div
class="t-dialog t-dialog--default t-dialog__modal-default"
Expand Down Expand Up @@ -1112,10 +1112,10 @@ exports[`ConfigProvider ConfigProvider dialogVue demo works fine 1`] = `
class="t-dialog__ctx"
>
<div
class="t-dialog__wrap"
class=""
>
<div
class="t-dialog__position t-dialog--top"
class=""
>
<div
class="t-dialog t-dialog--default t-dialog__modal-info"
Expand Down Expand Up @@ -1202,10 +1202,10 @@ exports[`ConfigProvider ConfigProvider dialogVue demo works fine 1`] = `
class="t-dialog__ctx"
>
<div
class="t-dialog__wrap"
class=""
>
<div
class="t-dialog__position t-dialog--top"
class=""
>
<div
class="t-dialog t-dialog--default t-dialog__modal-warning"
Expand Down Expand Up @@ -1292,10 +1292,10 @@ exports[`ConfigProvider ConfigProvider dialogVue demo works fine 1`] = `
class="t-dialog__ctx"
>
<div
class="t-dialog__wrap"
class=""
>
<div
class="t-dialog__position t-dialog--top"
class=""
>
<div
class="t-dialog t-dialog--default t-dialog__modal-danger"
Expand Down Expand Up @@ -1382,10 +1382,10 @@ exports[`ConfigProvider ConfigProvider dialogVue demo works fine 1`] = `
class="t-dialog__ctx"
>
<div
class="t-dialog__wrap"
class=""
>
<div
class="t-dialog__position t-dialog--top"
class=""
>
<div
class="t-dialog t-dialog--default t-dialog__modal-success"
Expand Down
107 changes: 99 additions & 8 deletions test/unit/dialog/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1957,10 +1957,10 @@ exports[`Dialog Dialog iconVue demo works fine 1`] = `
class="t-dialog__ctx"
>
<div
class="t-dialog__wrap"
class=""
>
<div
class="t-dialog__position t-dialog--top"
class=""
>
<div
class="t-dialog t-dialog--default t-dialog__modal-info"
Expand Down Expand Up @@ -2047,10 +2047,10 @@ exports[`Dialog Dialog iconVue demo works fine 1`] = `
class="t-dialog__ctx"
>
<div
class="t-dialog__wrap"
class=""
>
<div
class="t-dialog__position t-dialog--top"
class=""
>
<div
class="t-dialog t-dialog--default t-dialog__modal-warning"
Expand Down Expand Up @@ -2137,10 +2137,10 @@ exports[`Dialog Dialog iconVue demo works fine 1`] = `
class="t-dialog__ctx"
>
<div
class="t-dialog__wrap"
class=""
>
<div
class="t-dialog__position t-dialog--top"
class=""
>
<div
class="t-dialog t-dialog--default t-dialog__modal-danger"
Expand Down Expand Up @@ -2227,10 +2227,10 @@ exports[`Dialog Dialog iconVue demo works fine 1`] = `
class="t-dialog__ctx"
>
<div
class="t-dialog__wrap"
class=""
>
<div
class="t-dialog__position t-dialog--top"
class=""
>
<div
class="t-dialog t-dialog--default t-dialog__modal-success"
Expand Down Expand Up @@ -2354,6 +2354,17 @@ exports[`Dialog Dialog modalVue demo works fine 1`] = `
</span>
</button>
<button
class="t-button t-size-m t-button--variant-base t-button--theme-primary"
type="button"
>
<span
class="t-button__text"
>
普通对话框-不可拖拽
</span>
</button>
<transition-stub
duration="300"
name="t-dialog-zoom__vue"
Expand Down Expand Up @@ -2680,6 +2691,86 @@ exports[`Dialog Dialog modalVue demo works fine 1`] = `
</div>
</div>
</transition-stub>
<transition-stub
duration="300"
name="t-dialog-zoom__vue"
>
<div
class="t-dialog__ctx"
style="display: none;"
>
<div
class=""
>
<div
class=""
>
<div
class="t-dialog t-dialog--default t-dialog__modal-default"
>
<div
class="t-dialog__header"
>
普通对话框-不可拖拽
</div>
<span
class="t-dialog__close"
>
<svg
class="t-icon t-icon-close"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
<div
class="t-dialog__body"
>
<div>
<div>
对话框内容
</div>
</div>
</div>
<div
class="t-dialog__footer"
>
<div>
<button
class="t-button t-size-m t-button--variant-base t-button--theme-default t-dialog__cancel"
type="button"
>
<span
class="t-button__text"
>
取消
</span>
</button>
<button
class="t-button t-size-m t-button--variant-base t-button--theme-primary t-dialog__confirm"
type="button"
>
<span
class="t-button__text"
>
确认
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</transition-stub>
</div>
`;

Expand Down

0 comments on commit 2d17ef1

Please sign in to comment.