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会触发beforeClosectx：按钮上下文 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 | 宽度 |