Skip to content

Commit

Permalink
fix(dialog-box): [dialog-box] modify dialog-box of demo design bug (#…
Browse files Browse the repository at this point in the history
…2382)

* fix(dialog-box): [dialog-box] modify dialog-box of design

* fix: modify demo

* fix: modify review code
  • Loading branch information
James-9696 authored Oct 24, 2024
1 parent 365c7e8 commit 02ebc7b
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="boxVisibility = true">无标题</tiny-button>
<tiny-dialog-box :show-header="false" v-model:visible="boxVisibility" title="消息" width="30%">
<span>隐藏弹窗的标题部分</span>
<div class="body-class">隐藏弹窗的标题部分</div>
<template #footer>
<tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
</template>
Expand All @@ -16,3 +16,9 @@ import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
const boxVisibility = ref(false)
</script>

<style scoped>
.body-class {
margin-top: 32px;
}
</style>
8 changes: 7 additions & 1 deletion examples/sites/demos/pc/app/dialog-box/hidden-header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="boxVisibility = true">无标题</tiny-button>
<tiny-dialog-box :show-header="false" v-model:visible="boxVisibility" title="消息" width="30%">
<span>隐藏弹窗的标题部分</span>
<div class="body-class">隐藏弹窗的标题部分</div>
<template #footer>
<tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
</template>
Expand All @@ -25,3 +25,9 @@ export default {
}
}
</script>

<style scoped>
.body-class {
margin-top: 32px;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDlg(true)" type="info">允许滚动背景</tiny-button>
<tiny-button @click="openDlg(false)">不允许滚动背景</tiny-button>
<tiny-dialog-box :lock-scroll="false" v-model:visible="visible1" title="消息" width="30%">
<tiny-dialog-box :lock-scroll="false" v-model:visible="visible1" title="消息" width="30%" @close="closeDlg(true)">
<span>允许被遮罩内容的滚动</span>
<template #footer>
<tiny-button type="primary" @click="closeDlg(true)">确 定</tiny-button>
Expand All @@ -27,10 +27,11 @@ const visible2 = ref(false)
function openDlg(isScroll) {
if (isScroll) {
document.body.style.overflow = 'auto'
document.body.style.height = '200vh'
document.body.style.height = '130vh'
visible1.value = true
} else {
document.body.style.height = '200vh'
document.body.style.overflow = 'hidden'
document.body.style.height = '100vh'
visible2.value = true
}
}
Expand All @@ -41,7 +42,6 @@ function closeDlg(isScroll) {
document.body.style.height = '100vh'
visible1.value = false
} else {
document.body.style.height = '100vh'
visible2.value = false
}
}
Expand Down
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDlg(true)" type="info">允许滚动背景</tiny-button>
<tiny-button @click="openDlg(false)">不允许滚动背景</tiny-button>
<tiny-dialog-box :lock-scroll="false" v-model:visible="visible1" title="消息" width="30%">
<tiny-dialog-box :lock-scroll="false" v-model:visible="visible1" title="消息" width="30%" @close="closeDlg(true)">
<span>允许被遮罩内容的滚动</span>
<template #footer>
<tiny-button type="primary" @click="closeDlg(true)">确 定</tiny-button>
Expand Down Expand Up @@ -35,10 +35,11 @@ export default {
openDlg(isScroll) {
if (isScroll) {
document.body.style.overflow = 'auto'
document.body.style.height = '200vh'
document.body.style.height = '130vh'
this.visible1 = true
} else {
document.body.style.height = '200vh'
document.body.style.overflow = 'hidden'
document.body.style.height = '100vh'
this.visible2 = true
}
},
Expand All @@ -48,7 +49,6 @@ export default {
document.body.style.height = '100vh'
this.visible1 = false
} else {
document.body.style.height = '100vh'
this.visible2 = false
}
}
Expand Down

0 comments on commit 02ebc7b

Please sign in to comment.