xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

弹窗打开时点击其他的地方不允许关闭弹窗

Browse Source
This commit is contained in:
任珮宇 2023-11-01 10:47:49 +08:00
parent a2ebcbcacd
commit d2838ebb12
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/CustomModal/index.vue
View File

@ -1,12 +1,22 @@
<template> <template>
<a-modal :class="'custom-modal' + (innerFullscreen ? ' fullscreen' : '')" v-bind="_attrs" v-model="visible" @cancel="handleCancel"> <a-modal
:class="'custom-modal' + (innerFullscreen ? ' fullscreen' : '')"
v-bind="_attrs"
v-model="visible"
:maskClosable="false"
@cancel="handleCancel"
>
<img slot="closeIcon" src="@/assets/images/global/close.png" /> <img slot="closeIcon" src="@/assets/images/global/close.png" />
<div slot="title"> <div slot="title">
<div class="custom-modal-title"> <div class="custom-modal-title">
<span>{{ title }}</span> <span>{{ title }}</span>
<template v-if="enableFullScreen"> <template v-if="enableFullScreen">
<img v-if="innerFullscreen" src="@/assets/images/global/quit-fullscreen.png" @click="innerFullscreen = false" /> <img
<img v-else src="@/assets/images/global/fullscreen.png" @click="innerFullscreen = true" /> v-if="innerFullscreen"
src="@/assets/images/global/quit-fullscreen.png"
@click="innerFullscreen = false"
/>
<img v-else src="@/assets/images/global/fullscreen.png" @click="innerFullscreen = true" />
</template> </template>
</div> </div>
</div> </div>
@ -24,24 +34,24 @@
export default { export default {
props: { props: {
value: { value: {
type: Boolean type: Boolean,
}, },
okHandler: { okHandler: {
type: Function type: Function,
}, },
title: { title: {
type: String type: String,
}, },
enableFullScreen: { enableFullScreen: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
data() { data() {
return { return {
visible: this.value, visible: this.value,
confirmLoading: false, confirmLoading: false,
innerFullscreen: false innerFullscreen: false,
} }
}, },
watch: { watch: {
@ -56,7 +66,7 @@ export default {
}, },
innerFullscreen(val) { innerFullscreen(val) {
this.$emit('fullscreen', val) this.$emit('fullscreen', val)
} },
}, },
methods: { methods: {
async onSave() { async onSave() {
@ -64,7 +74,7 @@ export default {
try { try {
this.confirmLoading = true this.confirmLoading = true
const success = await this.okHandler() const success = await this.okHandler()
if(success !== false) { if (success !== false) {
this.visible = false this.visible = false
} }
} catch (error) { } catch (error) {
@ -80,8 +90,8 @@ export default {
this.visible = false this.visible = false
}, },
handleCancel() { handleCancel() {
this.$emit("cancel") this.$emit('cancel')
} },
}, },
computed: { computed: {
_attrs() { _attrs() {
@ -96,8 +106,8 @@ export default {
// 是否有自定义的footer // 是否有自定义的footer
hasCustomFooter() { hasCustomFooter() {
return !!this.$slots['custom-footer'] return !!this.$slots['custom-footer']
} },
} },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>