@caroundsky/el-plus-dialog-service v0.0.5

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

Methods 实例方法