使用用例

基本使用

<template>
  <GButton class="w-200 mg-10" type="shrink" icon="round" balance @click="visible = true">打开弹窗</GButton>
  <GModal :visible="visible" @close="visible = false" title="标题" :ok="{ text: 'confirm', disable: true}" :cancel="{ text: 'cancel' }">
    <div style="color: var(--blank-white); font-size: 25px;">
      通过`visible`控制弹窗显示与隐藏
      <br />
      '@close' 会在点击 × 或者开启遮罩层关闭后执行, mask默认开启
      <br />
      通过 ok、cancel 配置按钮，不配置则不显示按钮， 可以进行单个配置，优先级高于统一配置，见类型定义
    </div>
  </GModal>
</template>
<script setup>
  import { ref } from 'vue'
  const visible = ref(false)
</script>

显示代码

复制代码片段

嵌套使用

组件内部维护了一个层级表，保证后者能够位于前者之上。可以使用zIndex属性指定一个层级表

<template>
  <GButton class="w-200 mg-10" type="shrink" icon="round" balance @click="visible = true">打开弹窗</GButton>
  <GModal :visible="visible" @close="visible = false">
    <GButton class="w-200 mg-10" type="shrink" icon="round" balance @click="visible2 = true">打开弹窗2</GButton>
  </GModal>

  <GModal :visible="visible2" @close="visible2 = false">
    <div style="color: var(--blank-white); font-size: 25px;">
      弹窗二号
      <br />
      组件内部维护了一个层级表，保证后者能够位于前者之上。可以使用zIndex属性指定一个层级表
    </div>
  </GModal>
</template>
<script setup>
  import { ref } from 'vue'
  const visible = ref(false)
  const visible2 = ref(false)
</script>

显示代码

复制代码片段

内置主题

内置了light和dark两种主题，可以通过theme属性进行配置; light主题下，无法使用关闭按钮(还原游戏内容)

<template>
  <GButton class="w-200 mg-10" type="shrink" icon="round" balance @click="() => {theme = 'dark'; visible = true}">Dark</GButton>
  <GButton class="w-200 mg-10" type="shrink" icon="round" balance @click="() => {theme = 'light'; visible = true}">Light</GButton>
  <GModal :visible="visible" @close="visible = false" :theme="theme" okText="确认" cancelText="取消">
   
  </GModal>
</template>
<script setup>
  import { ref } from 'vue'
  const visible = ref(false)
  const theme = ref('dark')
</script>

显示代码

复制代码片段

函数式调用

函数式调用 默认关闭mask

<template>
  <GButton class="w-200 mg-10" type="shrink" icon="round" balance @click="() => callModal('dark')">Dark</GButton>
  <GButton class="w-200 mg-10" type="shrink" icon="round" balance @click="() => callModal('light')">Light</GButton>

</template>
<script setup>
  import { ModalFunc } from '@shi-zhong/genshin-ui'

  const callModal = (theme) => {
    ModalFunc({
      title: '标题',
      text: '正文默认居中',
      theme,
      mask: true,
      okText: '确认',
    })
  }

</script>

显示代码

复制代码片段

类型定义

interface ModalButtonConfig {
  text?: string
  icon?: string
  disable?: boolean
}

interface ModalOptionProps {
  title?: string
  text?: string
  mask?: boolean
  theme?: 'dark' | 'light'
  ok?: ModalButtonConfig
  cancel?: ModalButtonConfig
}

interface ModalCallback {
  onOk?: () => void
  onCancel?: () => void
  onClose?: () => void
}

type ModalFunc = (option?: ModalOptionProps, callback?: ModalCallback) => void

参数定义

参数	说明	类型	是否可选	默认值
visible	是否显示	boolean	必须	false
theme	主题	'dark' | 'light'	可选	dark
title	标题	string	可选	Title
okText	确认按钮文字	string	可选	Confirm
okIcon	确认按钮图标	string	可选	round
okDisable	确认按钮是否禁用	boolean	可选	false
cancelText	取消按钮文字	string	可选	Cancel
cancelIcon	取消按钮图标	string	可选	fork
cancelDisable	取消按钮是否禁用	boolean	可选	false
ok	确认按钮总配置	ModalButtonConfig	可选	-
cancel	取消按钮总配置	ModalButtonConfig	可选	-
mask	是否启用遮罩层关闭	boolean	可选	true
zIndex	面板层级	number	可选	Auto

事件说明

事件名	说明	回调参数
close	关闭触发	() => void
cancel	取消触发	() => void
ok	确认触发	() => void