@mbfff/iframe-adapter

适配选人组件 iframe 通信插件

安装

pnpm i @mbfff/iframe-adapter

使用

Vue3

<script lang="ts" setup>
    import { ref, onBeforeUnmount } from 'vue'
    import IframeAdapter from '@mbfff/iframe-adapter'

    // 组件url
    const url = `http://xxx`
    // 组件初始值
    const selectList = ref([
        {
            id: '1',
            empName: '张三',
            mobile: '12345678901',
        },
    ])
    const iframeAdapter = IframeAdapter.getInstance({
        url,
        userInfo: {
            empId: '1',
            onconUUID: '1',
            enterCode: '1',
        },
        onSubmit: data => {
            console.log('用户选择的数据:', data)
        },
        onClose: () => {
            console.log('用户取消选择')
        },
    })

    const handleSelect = () => {
        iframeAdapter.show(selectList.value)
    }

    onBeforeUnmount(() => {
        iframeAdapter?.destroy()
    })
</script>

<template>
    <div class="m-page-su-example">
        <el-button type="primary" @click="handleSelect">选择联系人</el-button>

        <div>所选人员数据： {{ selectList }}</div>
    </div>
</template>

<style lang="scss" scoped>
    .m-page-su-example {
        width: 100%;
        height: 100vh;
        padding: 15px;
    }
</style>

API

• getInstance(options:IframeAdapterOptions)：获取实例，options 配置项

  interface IframeAdapterOptions {
      url: string // 要嵌入的地址
      userInfo: {
          empId: string | number // 员工id
          onconUUID: string // uuid
          enterCode: string // 企业编码
      } // 用户信息
      width?: string // iframe宽度-pc端生效，默认800px
      height?: string // iframe高度-pc端生效，默认600px
      borderRadius?: string // iframe圆角-pc端生效，默认8px
      onSubmit: (data: any) => void // 提交操作回调
      onClose?: () => void // 关闭页面回调
  }

• show(initData:InitDataItem[])：组件展示，initData 初始化数据

  interface InitDataItem {
      id: string | number // 员工id
      empName: string // 员工姓名
      mobile: string // 手机号
      [k: string]: any
  }

• hide()：组件隐藏

• destroy()：组件销毁