@caroundsky/el-plus-dialog-service

el-plus-dialog-service

基于 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>

Props

参数	类型	默认值	说明
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) => {}

Methods 实例方法

方法名	说明
hide	关闭当前弹窗
close	关闭当前弹窗,会触发beforeClose方法
title	标题
buttons	按钮组
fullscreen	全屏
height	高度
width	宽度