opentiny
/
tiny-vue
2
0
Fork 30
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

fix(dialog-box): [dialog-box] modify dialog-box of demo design bug (#2382) 

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

* fix: modify demo

* fix: modify review code
This commit is contained in:
James 2024-10-24 01:47:04 -07:00 committed by GitHub
parent 365c7e8617
commit 02ebc7b53b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/sites/demos/pc/app/dialog-box/hidden-header-composition-api.vue
View File

@ -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>
@ -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
examples/sites/demos/pc/app/dialog-box/hidden-header.vue
View File

@ -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>
@ -25,3 +25,9 @@ export default {
}
}
</script>
<style scoped>
.body-class {
margin-top: 32px;
}
</style>

8
examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue
View File

@ -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>
@ -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
}
}
@ -41,7 +42,6 @@ function closeDlg(isScroll) {
document.body.style.height = '100vh'
visible1.value = false
} else {
document.body.style.height = '100vh'
visible2.value = false
}
}

8
examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
View File

@ -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>
@ -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
}
},
@ -48,7 +49,6 @@ export default {
document.body.style.height = '100vh'
this.visible1 = false
} else {
document.body.style.height = '100vh'
this.visible2 = false
}
}