web/plugins/leave-source/src/utils/leave.js

import Vue from 'vue'
import phoneConfirmDialog from '../lib/pc/components/phoneConfirmDialog.vue'
import PCLeaveDialog from '../lib/pc/content-dialog.vue'
import MobileLeavePopup from '../lib/mobile/content-popup.vue'
import { isDOMElement } from '../utils/utils'

const instanceMap = {
  'wx': null,
  'app': null,
  'h5': null,
  'pc': null,
  'phone-confirm': null,
}

export function createInstance(platform, options = {}) {
  const tryInstance = instanceMap[platform]
  if (tryInstance) {
    console.log('已存在实例, 返回已存在的实例', tryInstance)
    return tryInstance
  }

  const componentMap = {
    'wx': MobileLeavePopup,
    'app': MobileLeavePopup,
    'pc': PCLeaveDialog,
    'h5': MobileLeavePopup,
    'phone-confirm': phoneConfirmDialog,
  }
  const MyComponent = componentMap[platform]
  if (!MyComponent)
    return console.error('未定义平台')

  const { source } = options

  // 创建组件构造器
  const ComponentClass = Vue.extend(MyComponent)
  // 创建实例并挂载到临时元素
  const instance = new ComponentClass({
    propsData: {
      platform,
      source,
    }
  }).$mount() // 不传入选择器，手动挂载
  instanceMap[platform] = instance
  // 销毁组件
  // instance.$destroy();
  // instance.$el.remove();
  return instance
}

export function renderInstance(instance, el) {
  // 将组件的 DOM 添加到页面
  if (isDOMElement(el)) {
    el.appendChild(instance.$el)
  }
  else {
    document.querySelector(el).appendChild(instance.$el)
  }
}

export async function doLeave(options = {}) {
  const {
    source, // 必传
    source_desc, // 必传
    el = 'body', // 传选择器字符串，或者 DOM 元素
    platform = 'pc',
    props,
  } = options

  if (!source) {
    return console.error('source必传')
  }
  if (!source_desc) {
    return console.error('source_desc必传')
  }

  const instance = createInstance(platform)
  if (instance) {
    instance.source = source
    instance.sourceDesc = source_desc
    instance.platform = platform
    // props赋值
    if (props) {
      for (const key in props) {
        if (props[key]) {
          instance[key] = props[key]
        }
      }
    }
    console.log(instance, 'instance')
    instance.updateVisible(true)
    // 将组件的 DOM 添加到页面
    renderInstance(instance, el)
  }
}

export function renderComponent(el, componentId, options = {}) {
  const { props } = options

  if (!el) {
    return console.error('目标dom选择器不能为空')
  }
  if (!componentId) {
    return console.error('componentId不能为空')
  }

  const instance = createInstance(componentId)
  if (instance) {
    // props赋值
    if (props) {
      for (const key in props) {
        if (props[key]) {
          instance[key] = props[key]
        }
      }
    }

    // 将组件的 DOM 添加到页面
    renderInstance(instance, el)
  }
}