38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<script setup lang="ts">
|
||
// mask / maskClosable / keyboard / closable / footer：控制关闭入口
|
||
import { ref } from 'vue'
|
||
import { G3Button, G3Modal, G3Space, G3Switch } from '@g3soft/ui'
|
||
|
||
const open = ref(false)
|
||
const maskClosable = ref(false)
|
||
const keyboard = ref(true)
|
||
const closable = ref(true)
|
||
const showFooter = ref(true)
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space direction="vertical" :size="12" style="display: flex">
|
||
<G3Space :size="[16, 8]" wrap>
|
||
<G3Switch v-model="maskClosable">点击遮罩关闭</G3Switch>
|
||
<G3Switch v-model="keyboard">Esc 关闭</G3Switch>
|
||
<G3Switch v-model="closable">显示关闭按钮</G3Switch>
|
||
<G3Switch v-model="showFooter">显示底部按钮</G3Switch>
|
||
</G3Space>
|
||
|
||
<div>
|
||
<G3Button @click="open = true">打开</G3Button>
|
||
</div>
|
||
|
||
<G3Modal
|
||
v-model:open="open"
|
||
title="关闭入口可控"
|
||
:mask-closable="maskClosable"
|
||
:keyboard="keyboard"
|
||
:closable="closable"
|
||
:footer="showFooter"
|
||
>
|
||
强制用户做出选择时，把 maskClosable / keyboard / closable 都设为 false。
|
||
</G3Modal>
|
||
</G3Space>
|
||
</template>
|