Dialog弹窗

基于elment-plus二次封装的Dialog组件。

基础用法

javascript

<template>
  <ra-dialog v-model="dialogShow" title="普通弹窗" @close="handleClose" @ok="handleOk">
    <img :src="imgSrc" style="width: 100%" />
  </ra-dialog>
  <el-button @click="dialogShow = true">打开弹窗</el-button>
</template>

<script setup>
import { ref } from "vue"

let dialogShow = ref(false)
let imgSrc = "https://images.pexels.com/photos/29207369/pexels-photo-29207369.jpeg"

const handleClose = () => {
  //...业务逻辑
  dialogShow.value = false
}

const handleOk = () => {
  //...业务逻辑
  dialogShow.value = false
}
</script>

设置body最大显示高度

TIP

此属性用于设定body区域的最大高度限制，超过设置高度显示滚动条。默认为'800px'，如果您有自定义body区域高度的需求，请手动设置。

javascript

<template>
  <ra-dialog
    v-model="dialogShow"
    :maxHeight="300"
    size="small"
    title="自定义高度弹窗"
    fullBody
    @close="dialogShow = false"
    @ok="dialogShow = false"
  >
    <img :src="imgSrc" style="width: 100%" />
  </ra-dialog>
  <el-button @click="dialogShow = true">打开弹窗</el-button>
</template>

<script setup>
import { ref } from "vue"

let dialogShow = ref(false)
let imgSrc = "https://images.pexels.com/photos/28712680/pexels-photo-28712680.jpeg"
</script>

属性说明

TIP

Dialog基于el-dialog组件开发，适用于el-dialog的基础属性可自动继承，属性链接 el-dialog API

Dialog属性:

Dialog插槽:

Dialog事件: