gi-component

Appearance

Dialog 对话框 ​

基于el-dialog封装的组件，灵活性更高

基础用法 ​

查看代码
vue
<template>
  <div>
    <el-space>
      <el-button type="primary" @click="visible = true">打开对话框</el-button>
    </el-space>
    <gi-dialog v-model="visible" title="标题" @ok="onOk">
      <el-space direction="vertical" fill style="width: 100%">
        <el-alert title="Success alert" type="success" :closable="false" />
        <el-alert title="Info alert" type="info" :closable="false" />
        <el-alert title="Warning alert" type="warning" :closable="false" />
        <el-alert title="Error alert" type="error" :closable="false" />
      </el-space>
    </gi-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const visible = ref(false)

const onOk = () => {
  ElMessage.success('点击了确定按钮')
}
</script>

异步关闭 ​

查看代码
vue
<template>
  <div>
    <el-space>
      <el-button type="primary" @click="visible = true">打开对话框</el-button>
    </el-space>
    <gi-dialog v-model="visible" title="标题" :style="{ maxWidth: '900px' }" @before-ok="onBeforeOk">
      <el-space direction="vertical" fill style="width: 100%">
        <el-alert title="Success alert" type="success" :closable="false" />
        <el-alert title="Info alert" type="info" :closable="false" />
        <el-alert title="Warning alert" type="warning" :closable="false" />
        <el-alert title="Error alert" type="error" :closable="false" />
      </el-space>
    </gi-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)

const onBeforeOk = async (): Promise<boolean> => {
  return await new Promise((resolve) => setTimeout(() => resolve(true), 1000))
}
</script>

隐藏底部 ​

查看代码
vue
<template>
  <div>
    <el-space>
      <el-button type="primary" @click="visible = true">打开对话框</el-button>
    </el-space>
    <gi-dialog v-model="visible" title="标题" :footer="false">
      <el-space direction="vertical" fill style="width: 100%">
        <el-alert title="Success alert" type="success" :closable="false" />
        <el-alert title="Info alert" type="info" :closable="false" />
        <el-alert title="Warning alert" type="warning" :closable="false" />
        <el-alert title="Error alert" type="error" :closable="false" />
      </el-space>
    </gi-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

修改按钮 ​

查看代码
vue
<template>
  <div>
    <el-space>
      <el-button type="primary" @click="visible = true">打开对话框</el-button>
    </el-space>
    <gi-dialog v-model="visible" title="标题" ok-text="点击删除" :ok-button-props="{ type: 'danger' }"
      @before-ok="onBeforeOk">
      <el-space direction="vertical" fill style="width: 100%">
        <el-alert title="Success alert" type="success" :closable="false" />
        <el-alert title="Info alert" type="info" :closable="false" />
        <el-alert title="Warning alert" type="warning" :closable="false" />
        <el-alert title="Error alert" type="error" :closable="false" />
      </el-space>
    </gi-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)

const onBeforeOk = async (): Promise<boolean> => {
  return await new Promise((resolve) => setTimeout(() => resolve(true), 1000))
}
</script>

全屏对话框 ​

查看代码
vue
<template>
  <div>
    <el-space>
      <el-button type="primary" @click="visible = true">打开全屏对话框</el-button>
    </el-space>
    <gi-dialog v-model="visible" title="标题" fullscreen @ok="onOk">
      <el-space direction="vertical" fill style="width: 100%">
        <el-alert v-for="i in 30" :key="i" :title="`Success alert ${i}`" type="success" :closable="false" />
      </el-space>
    </gi-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const visible = ref(false)

const onOk = () => {
  ElMessage.success('点击了确定按钮')
}
</script>

简单对话框 ​

查看代码
vue
<template>
  <div>
    <el-space>
      <el-button type="primary" @click="visible = true">
        打开简易对话框
      </el-button>
    </el-space>
    <gi-dialog v-model="visible" title="标题" simple @ok="onOk">
      落霞与孤鹜齐飞，秋水共长天一色。
    </gi-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const visible = ref(false)

const onOk = () => {
  ElMessage.success('点击了确定按钮')
}
</script>

API ​

Props ​

参数说明类型默认值
okText确认按钮文本string确定
cancelText取消按钮文本string取消
okButtonProps确认按钮的propsButton.Props-
cancelButtonProps取消按钮的propsButton.Props-
content内容string-
footer显示尾部booleantrue
simple简单模式booleanfalse

Events ​

事件名说明类型
ok点击确认按钮时触发() => void
cancel点击取消按钮时触发() => void
beforeOk触发 ok 事件前的回调函数() => Promise<boolean>

Slots ​

名称说明
default自定义内容
footer自定义底部

TIP

继承 el-dialog 的所有属性