u

code/g3soft-libs/docs/examples/modal/mask.vue

@@ -0,0 +1,37 @@
+<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>