Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(dialog): 非模态对话框 优化拖拽事件鼠标表现 #1474

Merged
merged 2 commits into from
Aug 25, 2022
Merged

fix(dialog): 非模态对话框 优化拖拽事件鼠标表现 #1474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e0014de
fix(dialog): fix(dialog): 非模态对话框 优化拖拽事件鼠标表现
Aug 22, 2022
9b8749a
fix(dialog): common id 更新
Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 24 additions & 11 deletions examples/dialog/demos/modal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<template>
<div>
<t-button theme="primary" @click="visibleNormalDrag = true">普通对话框 </t-button>
<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="visibleModal = true"> 模态对话框-不可拖拽 </t-button>

<t-dialog
v-model:visible="visibleNormalDrag"
Expand All @@ -17,32 +18,43 @@
</template>
</t-dialog>
<t-dialog
v-model:visible="visibleModal"
header="模态对话框"
mode="modal"
v-model:visible="visibleModelessDrag"
header="非模态对话框"
mode="modeless"
draggable
:on-confirm="() => (visibleModal = false)"
:on-confirm="() => (visibleModelessDrag = false)"
>
<template #body>
<div>默认点击蒙层或按ESC可关闭</div>
<div>我是内容</div>
<div>我是内容</div>
<div>我是内容</div>
</template>
</t-dialog>

<t-dialog
v-model:visible="visibleModelessDrag"
header="非模态对话框"
v-model:visible="visibleModeless"
header="非模态对话框-不可拖拽"
mode="modeless"
draggable
:on-confirm="() => (visibleModelessDrag = false)"
:on-confirm="() => (visibleModeless = false)"
>
<template #body>
<div>我是内容</div>
<div>我是内容</div>
<div>我是内容</div>
</template>
</t-dialog>
<t-dialog
v-model:visible="visibleModal"
header="模态对话框"
mode="modal"
draggable
:on-confirm="() => (visibleModal = false)"
>
<template #body>
<div>默认点击蒙层或按ESC可关闭</div>
<div>我是内容</div>
<div>我是内容</div>
</template>
</t-dialog>
</div>
</template>
<script setup>
Expand All @@ -51,6 +63,7 @@ import { ref } from 'vue';
const visibleNormalDrag = ref(false);
const visibleModal = ref(false);
const visibleModelessDrag = ref(false);
const visibleModeless = ref(false);
</script>
<style scoped>
.t-button {
Expand Down
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 16 files
+6 −0 docs/web/api/button.md
+5 −2 docs/web/api/table.md
+3 −1 js/loading/circle-adapter.ts
+26 −0 js/utils/helper.ts
+3 −2 style/mobile/components/tabs/_index.less
+9 −0 style/web/components/cascader/_index.less
+3 −1 style/web/components/cascader/_var.less
+12 −2 style/web/components/collapse/_index.less
+3 −0 style/web/components/collapse/_var.less
+10 −0 style/web/components/comment/_index.less
+1 −1 style/web/components/comment/_var.less
+12 −0 style/web/components/dialog/_index.less
+26 −0 style/web/components/grid/_index.less
+2 −2 style/web/components/input/_var.less
+0 −1 style/web/components/slider/_index.less
+1 −1 style/web/components/table/_index.less
16 changes: 13 additions & 3 deletions src/dialog/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ export default defineComponent({
`${COMPONENT_NAME.value}--default`,
`${COMPONENT_NAME.value}--${props.placement}`,
`${COMPONENT_NAME.value}__modal-${props.theme}`,
isModeLess.value && props.draggable && `${COMPONENT_NAME.value}--draggable`,
];
return dialogClass;
});
Expand Down Expand Up @@ -313,6 +314,9 @@ export default defineComponent({
const bodyClassName =
props.theme === 'default' ? `${COMPONENT_NAME.value}__body` : `${COMPONENT_NAME.value}__body__icon`;
const footerContent = renderTNodeJSX('footer', defaultFooter);
const onStopDown = (e: MouseEvent) => {
if (isModeLess.value && props.draggable) e.stopPropagation();
};
return (
// /* 非模态形态下draggable为true才允许拖拽 */
<div class={wrapClass.value}>
Expand All @@ -324,7 +328,7 @@ export default defineComponent({
v-draggable={isModeLess.value && props.draggable}
ref={dialogEle}
>
<div class={`${COMPONENT_NAME.value}__header`}>
<div class={`${COMPONENT_NAME.value}__header`} onmousedown={onStopDown}>
{getIcon()}
{renderTNodeJSX('header', defaultHeader)}
</div>
Expand All @@ -333,8 +337,14 @@ export default defineComponent({
{renderTNodeJSX('closeBtn', defaultCloseBtn)}
</span>
) : null}
<div class={bodyClassName}>{body}</div>
{footerContent && <div class={`${COMPONENT_NAME.value}__footer`}>{footerContent}</div>}
<div class={bodyClassName} onmousedown={onStopDown}>
{body}
</div>
{footerContent && (
<div class={`${COMPONENT_NAME.value}__footer`} onmousedown={onStopDown}>
{footerContent}
</div>
)}
</div>
</div>
</div>
Expand Down
129 changes: 118 additions & 11 deletions test/snap/__snapshots__/csr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45767,7 +45767,7 @@ exports[`csr snapshot test > csr test ./examples/dialog/demos/drag.vue 1`] = `
class="t-dialog__position t-dialog--top"
>
<div
class="t-dialog t-dialog--default t-dialog--top t-dialog__modal-default"
class="t-dialog t-dialog--default t-dialog--top t-dialog__modal-default t-dialog--draggable"
>
<div
class="t-dialog__header"
Expand Down Expand Up @@ -46389,7 +46389,7 @@ exports[`csr snapshot test > csr test ./examples/dialog/demos/modal.vue 1`] = `
class="t-button__text"
>

模态对话框
非模态对话框

</span>
</button>
Expand All @@ -46402,7 +46402,20 @@ exports[`csr snapshot test > csr test ./examples/dialog/demos/modal.vue 1`] = `
class="t-button__text"
>

非模态对话框
非模态对话框-不可拖拽

</span>
</button>
<button
class="t-button t-size-m t-button--variant-base t-button--theme-primary"
data-v-b073ed22=""
type="button"
>
<span
class="t-button__text"
>

模态对话框-不可拖拽

</span>
</button>
Expand Down Expand Up @@ -46499,27 +46512,25 @@ exports[`csr snapshot test > csr test ./examples/dialog/demos/modal.vue 1`] = `
data-v-b073ed22=""
>
<div
class="t-dialog__ctx t-dialog__ctx--fixed"
class="t-dialog__ctx t-dialog__ctx--modeless"
style="display: none;"
>

<div
class="t-dialog__mask"
/>
<!---->
<div
class="t-dialog__wrap"
>
<div
class="t-dialog__position t-dialog--top"
>
<div
class="t-dialog t-dialog--default t-dialog--top t-dialog__modal-default"
class="t-dialog t-dialog--default t-dialog--top t-dialog__modal-default t-dialog--draggable"
>
<div
class="t-dialog__header"
>
<!---->
模态对话框
非模态对话框
</div>
<span
class="t-dialog__close"
Expand All @@ -46545,7 +46556,7 @@ exports[`csr snapshot test > csr test ./examples/dialog/demos/modal.vue 1`] = `
<div
data-v-b073ed22=""
>
默认点击蒙层或按ESC可关闭
我是内容
</div>
<div
data-v-b073ed22=""
Expand Down Expand Up @@ -46613,7 +46624,7 @@ exports[`csr snapshot test > csr test ./examples/dialog/demos/modal.vue 1`] = `
class="t-dialog__header"
>
<!---->
非模态对话框
非模态对话框-不可拖拽
</div>
<span
class="t-dialog__close"
Expand Down Expand Up @@ -46685,6 +46696,102 @@ exports[`csr snapshot test > csr test ./examples/dialog/demos/modal.vue 1`] = `

</div>
</transition-stub>
<transition-stub
data-v-b073ed22=""
>
<div
class="t-dialog__ctx t-dialog__ctx--fixed"
style="display: none;"
>

<div
class="t-dialog__mask"
/>
<div
class="t-dialog__wrap"
>
<div
class="t-dialog__position t-dialog--top"
>
<div
class="t-dialog t-dialog--default t-dialog--top 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
data-v-b073ed22=""
>
默认点击蒙层或按ESC可关闭
</div>
<div
data-v-b073ed22=""
>
我是内容
</div>
<div
data-v-b073ed22=""
>
我是内容
</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
Loading