kuailelunwen_new_houtai/src/components/GuipMessage/index.js

import Vue from 'vue'
import GuipMessage from './GuipMessage.vue'

// 默认图标配置
const defaultIcons = {
  success: 'icon-success', // 替换为你的图标类名
  info: 'icon-info',
  warning: 'icon-warning',
  error: 'icon-error'
}

// 默认图片配置
const defaultImages = {
  success: require('@/assets/message_Success.png'),
  info: require('@/assets/message_Warning.png'),
  warning: require('@/assets/message_Warning.png'),
  error: require('@/assets/message_error.png')
}
const MessageConstructor = Vue.extend(GuipMessage)

// let messageInstance = null
let messageQueue = []

function showMessage(options) {
  if (typeof options === 'string') {
    options = {
      message: options
    }
  }

  // 合并默认配置
  const config = {
    type: 'info',
    duration: 3000,
    position: 'top-center',
    showImage: true,
    ...options
  }

  // 设置图标或图片
  if (config.showImage) {
    config.imageUrl = options.imageUrl || defaultImages[config.type]
  } else {
    config.iconClass = options.iconClass || defaultIcons[config.type]
  }

  // 创建实例
  const instance = new MessageConstructor({
    propsData: config
  })

  // 挂载到DOM
  instance.$mount()
  document.body.appendChild(instance.$el)

  // 添加到队列
  messageQueue.push(instance)

  // 返回关闭方法
  return {
    close: () => instance.close()
  }
}

function install(Vue, options = {}) {
  // 合并默认配置
  if (options.icons) {
    Object.assign(defaultIcons, options.icons)
  }
  if (options.images) {
    Object.assign(defaultImages, options.images)
  }

  // 添加全局方法
  Vue.prototype.$Message = showMessage
  Vue.prototype.$Message.closeAll = () => {
    messageQueue.forEach(instance => instance.close())
    messageQueue = []
  }

  // 添加快捷方法
  const types = ['success', 'info', 'warning', 'error']
  types.forEach(type => {
    Vue.prototype.$Message[type] = (message, options = {}) => {
      return showMessage({
        message,
        type,
        ...options
      })
    }
  })
}

export default { install }