exhibition_service_admin/public/shareModule/injectShare.js

{
  let body = document.querySelector('body')
  let currentEl = null
  let shareCard = document.createElement('mp-share-card')
  shareCard.id = 'share-card'

  let shareButton = document.createElement('mp-float-button')
  shareButton.id = 'share-button'
  body.append(shareButton)

  let addButton = document.createElement('div')
  addButton.classList.add('mp-add-button')
  addButton.innerText = '在此添加分享卡片'
  addButton.addEventListener('click', function(){
    const parentElement = currentEl.parentNode;
    parentElement.insertBefore(shareCard, currentEl.nextSibling);
    // window.top.postMessage({msg:'mpShare init done'})
    // addButton.style.display = 'none'
  })
  let addButtonStyle = document.createElement('style')
  addButtonStyle.innerHTML = `
    .mp-add-button{
      transition-duration: 300ms;
      background-color: #409EFF;
      color: white;
      position: fixed;
      z-index: 99999;
      text-align: center;
      font-size: 14px;
      padding: 4px;
      cursor: pointer;
      border-radius: 8px;
      opacity: 0.5;
      &:hover{
        opacity: 1;
        scale: 1.02;
      }
    }
  `
  body.append(addButtonStyle)
  body.append(addButton)

  document.addEventListener('mousemove', function(e){
    if(e.target.classList.contains('mp-add-button') || ['share-card', 'share-button'].includes(e.target.id)){

    }else{
      currentEl = e.target
      let rect = e.target.getBoundingClientRect()
      addButton.style.left = rect.left +'px'
      addButton.style.top = rect.top + rect.height +'px'
      addButton.style.width = rect.width +'px'
    }

  })
  window.addEventListener('message', function(e){
    let data = e.data
    if(data.type === 'card'){
      for(let key in data){
        shareCard.setAttribute(key, data[key])
      }
    }
    if(data.type === 'button'){
      for(let key in data){
        shareButton.setAttribute(key, data[key])
      }
    }
  })
  window.top.postMessage({msg:'mpShare init done'}, '*')
}