修改message组件引入注册方式

examples/package-lock.json

@@ -30,7 +30,7 @@
         },
         "..": {
             "name": "@zhicheng1012/zhicheng-components",
-            "version": "1.0.21",
+            "version": "1.0.22",
             "license": "MIT",
             "dependencies": {
                 "async-validator": "^1.11.5",
@@ -3218,9 +3218,9 @@
             "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
         },
         "node_modules/@zhicheng1012/zhicheng-components": {
-            "version": "1.0.21",
+            "version": "1.0.22",
-            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.21.tgz",
+            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.22.tgz",
-            "integrity": "sha512-cVW6uTEySEGF42k/Jd3kTNr4doGRkutLsnqAbyNx7ych/TOM6ovgSlpR8p3j6RS3NQGuVm2WmihSpEk9oCohGg==",
+            "integrity": "sha512-vhUvWktJfQVwD6B9D2oJiBPwGJcsqzxvL5/ryLCxL1yTNez4iGlm55G+LGSN9sihXIrNYaBCTcoUychIqR+jfQ==",
             "dependencies": {
                 "async-validator": "^1.11.5",
                 "core-js": "^3.40.0"
@@ -19478,9 +19478,9 @@
             "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
         },
         "@zhicheng1012/zhicheng-components": {
-            "version": "1.0.21",
+            "version": "1.0.22",
-            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.21.tgz",
+            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.22.tgz",
-            "integrity": "sha512-cVW6uTEySEGF42k/Jd3kTNr4doGRkutLsnqAbyNx7ych/TOM6ovgSlpR8p3j6RS3NQGuVm2WmihSpEk9oCohGg==",
+            "integrity": "sha512-vhUvWktJfQVwD6B9D2oJiBPwGJcsqzxvL5/ryLCxL1yTNez4iGlm55G+LGSN9sihXIrNYaBCTcoUychIqR+jfQ==",
             "requires": {
                 "async-validator": "^1.11.5",
                 "core-js": "^3.40.0"

examples/src/main.js

@@ -2,16 +2,17 @@ import Vue from 'vue/dist/vue.esm.js' // 必须用完整版
 import App from './App.vue'
 import ElementUI from 'element-ui';
 // import ZhichengUI from '@zhicheng1012/zhicheng-components'
-
-import 'element-ui/lib/theme-chalk/index.css' // 如果依赖Element
 // import '@zhicheng1012/zhicheng-components/dist/css/zhicheng-components.css';
+import 'element-ui/lib/theme-chalk/index.css' // 如果依赖Element
 
 import MyComponents from '../../packages' // 本地引用组件库
 // main.js
 import 'core-js/stable'
 // import './style/theme/index.css'
 // import './style/theme/common.scss'
+
 Vue.use(MyComponents)
+
 Vue.use(ElementUI);
 
 // Vue.use(ZhichengUI)

packages/GuipMessage/index copy.js

@@ -0,0 +1,94 @@
+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 }

packages/GuipMessage/index.js

@@ -1,34 +1,28 @@
 import Vue from 'vue'
-import GuipMessage from './GuipMessage.vue'
+import GuipMessage from './src/index.vue'
 
-// 默认图标配置
 const defaultIcons = {
-  success: 'icon-success', // 替换为你的图标类名
+  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
+const MessageConstructor = Vue.extend(GuipMessage)
 let messageQueue = []
 
-function showMessage(options) {
+const showMessage = (options) => {
   if (typeof options === 'string') {
-    options = {
+    options = { message: options }
-      message: options
-    }
   }
 
-  // 合并默认配置
   const config = {
     type: 'info',
     duration: 3000,
@@ -37,58 +31,35 @@ function showMessage(options) {
     ...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
-  })
+  }).$mount()
-
+  
-  // 挂载到DOM
-  instance.$mount()
   document.body.appendChild(instance.$el)
-
-  // 添加到队列
   messageQueue.push(instance)
 
-  // 返回关闭方法
   return {
     close: () => instance.close()
   }
 }
 
-function install(Vue, options = {}) {
+// 添加类型快捷方法
-  // 合并默认配置
+['success', 'info', 'warning', 'error'].forEach(type => {
-  if (options.icons) {
+  showMessage[type] = (message, options = {}) => {
-    Object.assign(defaultIcons, options.icons)
+    return showMessage({ message, type, ...options })
-  }
-  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']
+showMessage.closeAll = () => {
-  types.forEach(type => {
+  messageQueue.forEach(instance => instance.close())
-    Vue.prototype.$Message[type] = (message, options = {}) => {
+  messageQueue = []
-      return showMessage({
-        message,
-        type,
-        ...options
-      })
-    }
-  })
 }
 
-export default { install }
+export default showMessage

packages/GuipMessage/GuipMessage.vue → packages/GuipMessage/src/index.vue

@@ -10,7 +10,7 @@
 
 <script>
 export default {
-  name: 'CustomMessage',
+  name: 'GuipMessage',
   props: {
     type: {
       type: String,

packages/index.js

@@ -13,7 +13,7 @@ import GuipTable from './GuipTable';
 import GuipSwitch from './GuipSwitch';
 import GuipTooltip from './GuipToolTip';
 import GuipDialog from './GuipDialog';
-import GuipMessage from './GuipMessage/index';
+import GuipMessage from './GuipMessage';
 
 import GuipFormItem from './GuipFormItem';
 
@@ -58,15 +58,17 @@ const components = [
   GuipFormItem
 ]
 
-const install = function (Vue) {
+const install = function (Vue,options={}) {
    // 挂载到Vue原型
   //  Vue.prototype.$eventBus = EventBus
   //  Vue.prototype.$on = $on
   //  Vue.prototype.$emit = $emit
   //  Vue.prototype.$off = $off
   //  Vue.prototype.$once = $once
+
+  console.log(options,'====options.message');
 // 复制
-  Vue.use(GuipMessage)
+  Vue.prototype.$Message = GuipMessage
   Vue.prototype.$copy = modernCopyToClipboard;
   Vue.use(clipboard);
 
@@ -78,8 +80,25 @@ const install = function (Vue) {
     Vue.component(component.name, component)
   })
 }
-console.log(install,'install---');
 
+export  {
+  GuipButton,
+  GroupFormBtns,
+  GuipInput,
+  PromptText,
+  GuipTextarea,
+  DevicePreview,
+  GuipRadio,
+  GuipSelect,
+  Breadcrumb,
+  SvgIcon1,
+  SvgIcon,
+  GuipTable,
+  GuipTooltip,
+  GuipSwitch,
+  GuipDialog,
+  GuipFormItem
+}
 export default {
   install,
   GuipButton,

packages/utils/clipboard.js

@@ -25,7 +25,6 @@ export function copyToClipboard(text, options = {}) {
     try {
       // 执行复制命令
       const successful = document.execCommand('copy');
-    console.log(vm,'vm.$Message---');
       if (successful) {
         if (vm && vm.$Message) {
           vm.$Message.success(successMsg);
@@ -37,7 +36,6 @@ export function copyToClipboard(text, options = {}) {
         throw new Error('Copy command was unsuccessful');
       }
     } catch (err) {
-      console.error('复制失败11:', err);
       if (vm && vm.$Message) {
         vm.$Message.error(errorMsg);
       } else {