基于 Element Plus Dialog 二次封装,以服务的形式调用。
服务依赖于宿主项目的Element Plus版本,"element-plus": "2.x", "vue": "3.x"。
Tips:
el-plus
于2.2.16调整了dialog的class绑定方式,若宿主项目的el-plus
低于2.2.16,此服务请安装v0.3版本。
- 安装
yarn add @caroundsky/el-plus-dialog-service
- 使用
// 入口文件 main.js
import { createApp } from "vue"
import useDialog from '@caroundsky/el-plus-dialog-service'
// 若项目内未全局引入 element/el-dialog 样式,需要手动引入
import 'element-plus/es/components/dialog/style/css'
const app = createApp(App)
app.mount('#app')
useDialog.initCtx(app._context)
/**
接受配置项:
- config - 必填,参考下方props
*/
import useDialog from '@caroundsky/el-plus-dialog-service'
useDialog(config)
- 若将服务挂载到全局,并在选项式API中获得代码提示,需要在项目内xx.d.ts中声明相关变量
/**
在选项式API中使用
*/
// main.ts 入口文件,挂载到全局$dialogService
import { createApp } from 'vue'
import useDialog from '@caroundsky/el-plus-dialog-service'
import App from './xx.vue'
const app = createApp(App)
app.mount('#app')
useDialog.initCtx(app._context)
app.config.globalProperties.$useDialog = useDialog
// xx.d.ts
export {}
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$useDialog: typeof import('@caroundsky/el-plus-dialog-service')['default']
}
}
// xx.vue
import { defineComponent } from 'vue'
export default defineComponent({
methods: {
showDialog() {
this.$useDialog(
{
title: '标题',
content: '内容',
buttons: [
{
label: '确认',
type: 'primary',
onClick: ({ vm }) => {
vm.hide()
},
},
],
}
)
},
},
})
/**
在组合式API中使用
*/
<script setup lang="tsx">
import Demo from './demo.vue'
import useDialog from '@caroundsky/el-plus-dialog-service'
function showDialog() {
useDialog({
title: '测试',
height: '40vh',
content: <Demo />,
buttons: [
{
label: '确定 ',
type: 'primary',
onClick: ({ vm, component }) => {
vm.hide()
},
},
],
})
}
</script>
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
title | string | VNode | () => VNode | — | 标题,可返回VNode进行自定义布局 |
content | string | VNode | () => VNode | — | 内容,与下方的 iframeSrc 二选一,内容的padding自行控制,组件本身不提供默认边距 |
buttons | array () => VNode | array VNode |
[] | Array :[ { label, type, onClick }, () => { return VNode }, ... ]label :按钮名type :类型 primary / success / warning / danger / info / text...attrs : 与 el-button 一致onClick : function({ vm, ctx, component }) {};vm:弹窗实例,可使用 vm.close() 或者 vm.hide() 关闭弹窗, 执行close会触发beforeClose ctx:按钮上下文 component: content 实例,若为Vnode,实例内使用 defineExpose 暴露出相应方法来调用Fn :({ vm, component, getFooterBtns }) => { 返回Array / VNode } 如果想通过content组件本身来生成按钮,可以使用 getFooterBtns 参数,会携带组件实例,通过调用实例的自定义方法,该方法返回上述的Array或者Vnode即可return getFooterBtns(cont => cont['自定义方法']()) |
width | string | 520px | 宽度 |
height | string | — | 高度,建议用vh做单位达到自适应效果 |
top | string | — | 距离顶部距离 |
class | string | — | 自定义class v0.4之前版本,请使用customClass |
canModalClose | boolean | false | 是否可Esc或点击弹窗外区域关闭弹窗 |
zIndex | number | 1000 | z-index值 |
iframeSrc | string | — | iframe 地址 |
fullscreen | boolean | false | 默认最大化打开,与下方的 Enable 二选一 |
fullScreenEnable | boolean | true | 允许最大化 |
resize | boolean | false | 允许通过右下角自由缩放 |
beforeClose | fn | — | 关闭前执行,此方法会阻止弹窗关闭,(vm, done) => {} |
afterOpen | fn | — | 打开后执行,(vm) => {} |
afterClose | fn | — | 关闭后执行,(vm) => {} |
方法名 | 说明 |
---|---|
hide | 关闭当前弹窗 |
close | 关闭当前弹窗,会触发beforeClose方法 |
title | 标题 |
buttons | 按钮组 |
fullscreen | 全屏 |
height | 高度 |
width | 宽度 |