对话框

基于element-plus的dialog组件进行了二次封装，在此基础上对一些用法和功能做了封装。

基本用法

基本用法与原组件相同

<template>
  <bc-button @click="handleOpen">
    打开对话框
  </bc-button>
  <bc-dialog
    v-model="visible"
    title="对话框"
    @submit="handleSubmit"
  >
    <div>body</div>
  </bc-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
function handleOpen() {
  visible.value = true
}
function handleSubmit() {
  visible.value = false
}
</script>

Hide Source

自定义底部

通过插槽footer可对底部操作栏进行自定义。 如果不需要，可以设置一个空的插槽，或者通过属性no-footer进行控制

<template>
  <bc-button @click="handleOpen">打开对话框</bc-button>
  <bc-dialog
    title="对话框"
    v-model="visible"
  >
    <div>body</div>
    <template #footer>
      <bc-button @click="handleClose">关闭</bc-button>
    </template>
  </bc-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
function handleOpen() {
  visible.value = true;
}
function handleClose() {
  visible.value = false;
}
</script>

Hide Source

滚动条

内置了el-scrollbar，默认最大高度500px，可以通过全局样式进行覆盖。

<template>
  <bc-button @click="handleOpen">打开对话框</bc-button>
  <bc-dialog
    title="对话框"
    v-model="visible"
    @submit="handleSubmit"
  >
    <div style="height: 800px; background: crimson;"></div>
  </bc-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
function handleOpen() {
  visible.value = true;
}
function handleSubmit() {
  visible.value = false;
}
</script>

Hide Source

全屏

对全屏功能进行封装，可以通过need-fullscreen开启右上角的全屏按钮

TIP

全屏状态下内置的滚动条容器的高度固定为100vh - 200px，可以通过全局样式覆盖。

<template>
  <bc-button @click="handleOpen">打开对话框</bc-button>
  <bc-dialog
    title="对话框"
    v-model="visible"
    @submit="handleSubmit"
    need-fullscreen
  >
    <div style="height: 200vw; background-image: linear-gradient(to bottom, #fff, crimson);"></div>
  </bc-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
function handleOpen() {
  visible.value = true;
}
function handleSubmit() {
  visible.value = false;
}
</script>

Hide Source

loading状态

针对弹窗内提交表单的场景，可以使用:confirm传递一个回调函数。只要回调函数的返回值是一个Promise，默认的底部插槽会根据Promise的状态来自动切换确认按钮的loading状态。

WARNING

如果设置了confirm属性就不需要监听submit事件了，否则会导致重复触发

<template>
  <bc-button @click="handleOpen">
    打开对话框
  </bc-button>
  <bc-dialog
    v-model="visible"
    title="对话框"
    :confirm="handleSubmit"
  >
    <div>body</div>
  </bc-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
function handleOpen() {
  visible.value = true
}
async function handleSubmit() {
  await mockPost()
  visible.value = false
}
function mockPost() {
  console.log('post')
  return new Promise(resolve => {
    setTimeout(resolve, 2000)
  })
}
</script>

Hide Source

命令式

可以通过createDialog的方式，动态创建弹窗。

WARNING

只有通过全局注册才能继承上下文

<template>
  <bc-button @click="handleOpen">
    open
  </bc-button>
</template>

<script lang="ts" setup>
import { createDialog } from '@sepveneto/basic-comp'
import DialogForm from '../form/basic.vue'

async function handleOpen() {
  const { open, close } = createDialog(DialogForm)
  const instRef = open(
    { title: '命令式', width: '550px' },
    async (res) => {
      const data = await res?.getFormData()
      await mockPost()
      console.log('end')
      console.log(data)
      close()
    },
  )
  console.log(instRef)
}
function mockPost() {
  console.log('post')
  return new Promise(resolve => {
    setTimeout(resolve, 2000)
  })
}
</script>

Hide Source

Dialog 属性

属性	说明	类型	可选值	默认值
model-value/v-model	控制弹窗显示隐藏	boolean	-	false
no-footer	不显示对话框底部的操作栏（对插槽生效）	boolean	-	false
need-fullscreen	是否显示右上角的全屏按钮	boolean	-	false
confirm	默认footer时，确定按钮的回调函数	Function	-	-

Dialog 插槽

名称	说明
footer	对话框底部的操作栏

Dialog 方法

方法名	说明	参数类型
setLoading	默认footer时，控制确定按钮的loading状态	boolean
open	打开弹窗	-
close	关闭弹窗	-

Source

Docs