修改message组件引入注册方式

1 month ago · 574f55b627
8 changed files with 314 additions and 231 deletions
--- a/examples/package-lock.json
+++ b/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",
-            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.21.tgz",
-            "integrity": "sha512-cVW6uTEySEGF42k/Jd3kTNr4doGRkutLsnqAbyNx7ych/TOM6ovgSlpR8p3j6RS3NQGuVm2WmihSpEk9oCohGg==",
+            "version": "1.0.22",
+            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.22.tgz",
+            "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",
-            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.21.tgz",
-            "integrity": "sha512-cVW6uTEySEGF42k/Jd3kTNr4doGRkutLsnqAbyNx7ych/TOM6ovgSlpR8p3j6RS3NQGuVm2WmihSpEk9oCohGg==",
+            "version": "1.0.22",
+            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.22.tgz",
+            "integrity": "sha512-vhUvWktJfQVwD6B9D2oJiBPwGJcsqzxvL5/ryLCxL1yTNez4iGlm55G+LGSN9sihXIrNYaBCTcoUychIqR+jfQ==",
            "requires": {
                "async-validator": "^1.11.5",
                "core-js": "^3.40.0"
--- a/examples/src/main.js
+++ b/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)
--- a/packages/GuipMessage/index
+++ b/packages/GuipMessage/index
@ -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 }
--- a/packages/GuipMessage/index.js
+++ b/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 = {
-      message: options
-    }
+    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
-  })
-
-  // 挂载到DOM
-  instance.$mount()
+  }).$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 = []
+// 添加类型快捷方法
+['success', 'info', 'warning', 'error'].forEach(type => {
+  showMessage[type] = (message, options = {}) => {
+    return showMessage({ message, type, ...options })
  }
+})

-  // 添加快捷方法
-  const types = ['success', 'info', 'warning', 'error']
-  types.forEach(type => {
-    Vue.prototype.$Message[type] = (message, options = {}) => {
-      return showMessage({
-        message,
-        type,
-        ...options
-      })
-    }
-  })
+// 添加关闭所有方法
+showMessage.closeAll = () => {
+  messageQueue.forEach(instance => instance.close())
+  messageQueue = []
 }

-export default { install }
+export default showMessage
--- a/packages/GuipMessage/GuipMessage.vue
+++ b/packages/GuipMessage/GuipMessage.vue
@ -10,7 +10,7 @@

 <script>
 export default {
-  name: 'CustomMessage',
+  name: 'GuipMessage',
  props: {
    type: {
      type: String,
--- a/packages/index.js
+++ b/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,
--- a/packages/utils/clipboard.js
+++ b/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 {