Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9dae4d7

Browse files
committed
refactor(CModal): enhance handling of click outside and key events
1 parent6eec183 commit9dae4d7

File tree

3 files changed

+26
-31
lines changed

3 files changed

+26
-31
lines changed

‎packages/coreui-vue/src/components/modal/CModal.ts‎

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const CModal = defineComponent({
3333
},
3434
},
3535
/**
36-
* Apply a backdrop on body whileoffcanvas is open.
36+
* Apply a backdrop on body whilemodal is open.
3737
*
3838
*@values boolean | 'static'
3939
*/
@@ -176,13 +176,14 @@ const CModal = defineComponent({
176176
setTimeout(()=>{
177177
el.classList.add('show')
178178
},1)
179+
179180
emit('show')
180181
}
181182

182183
consthandleAfterEnter=()=>{
183184
props.focus&&modalRef.value?.focus()
184185
window.addEventListener('mousedown',handleMouseDown)
185-
window.addEventListener('keyup',handleKeyUp)
186+
window.addEventListener('keydown',handleKeyDown)
186187
}
187188

188189
// eslint-disable-next-line unicorn/consistent-function-scoping
@@ -196,33 +197,33 @@ const CModal = defineComponent({
196197
}
197198

198199
el.classList.remove('show')
200+
emit('close')
199201
}
200202

201203
consthandleAfterLeave=(el:RendererElement)=>{
202204
activeElementRef.value?.focus()
203205
window.removeEventListener('mousedown',handleMouseDown)
204-
window.removeEventListener('keyup',handleKeyUp)
206+
window.removeEventListener('keydown',handleKeyDown)
205207
el.style.display='none'
206208
}
207209

208210
consthandleDismiss=()=>{
209-
emit('close')
211+
if(props.backdrop==='static'){
212+
modalRef.value.classList.add('modal-static')
213+
emit('close-prevented')
214+
setTimeout(()=>{
215+
modalRef.value.classList.remove('modal-static')
216+
},300)
217+
218+
return
219+
}
220+
210221
visible.value=false
211222
}
212223

213-
consthandleKeyUp=(event:KeyboardEvent)=>{
214-
if(modalContentRef.value&&!modalContentRef.value.contains(event.targetasHTMLElement)){
215-
if(props.backdrop!=='static'&&event.key==='Escape'&&props.keyboard){
216-
handleDismiss()
217-
}
218-
219-
if(props.backdrop==='static'){
220-
modalRef.value.classList.add('modal-static')
221-
emit('close-prevented')
222-
setTimeout(()=>{
223-
modalRef.value.classList.remove('modal-static')
224-
},300)
225-
}
224+
consthandleKeyDown=(event:KeyboardEvent)=>{
225+
if(event.key==='Escape'&&props.keyboard){
226+
handleDismiss()
226227
}
227228
}
228229

@@ -232,20 +233,11 @@ const CModal = defineComponent({
232233

233234
consthandleMouseUp=(event:Event)=>{
234235
if(modalContentRef.value&&!modalContentRef.value.contains(event.targetasHTMLElement)){
235-
if(props.backdrop!=='static'){
236-
handleDismiss()
237-
}
238-
239-
if(props.backdrop==='static'){
240-
modalRef.value.classList.add('modal-static')
241-
setTimeout(()=>{
242-
modalRef.value.classList.remove('modal-static')
243-
},300)
244-
}
236+
handleDismiss()
245237
}
246238
}
247239

248-
provide('handleDismiss',handleDismiss)
240+
provide('visible',visible)
249241

250242
constmodal=()=>
251243
h(

‎packages/coreui-vue/src/components/modal/CModalHeader.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{defineComponent,h,inject}from'vue'
1+
import{defineComponent,h,inject,Ref}from'vue'
22

33
import{CCloseButton}from'../close-button/CCloseButton'
44

@@ -14,11 +14,13 @@ const CModalHeader = defineComponent({
1414
},
1515
},
1616
setup(props,{ slots}){
17-
consthandleDismiss=inject('handleDismiss')as()=>void
17+
constvisible=inject<Ref<boolean>>('visible')!
1818
return()=>
1919
h('span',{class:'modal-header'},[
2020
slots.default&&slots.default(),
21-
props.closeButton&&h(CCloseButton,{onClick:()=>handleDismiss()},''),
21+
props.closeButton&&h(CCloseButton,{onClick:()=>{
22+
visible.value=false
23+
}},''),
2224
])
2325
},
2426
})

‎packages/docs/components/modal.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
8585
</CModal>
8686
</template>
8787
```
88+
8889
###Static backdrop
8990

9091
If you set`backdrop` property to`static`, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp