From 574f55b62761972ee204bda2ca94d5e75d2b3bc1 Mon Sep 17 00:00:00 2001 From: zq <136432190602163.com> Date: Tue, 22 Jul 2025 16:25:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9message=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=BC=95=E5=85=A5=E6=B3=A8=E5=86=8C=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/package-lock.json | 14 +-- examples/src/main.js | 5 +- packages/GuipMessage/GuipMessage.vue | 170 ----------------------------------- packages/GuipMessage/index copy.js | 94 +++++++++++++++++++ packages/GuipMessage/index.js | 63 ++++--------- packages/GuipMessage/src/index.vue | 170 +++++++++++++++++++++++++++++++++++ packages/index.js | 27 +++++- packages/utils/clipboard.js | 2 - 8 files changed, 314 insertions(+), 231 deletions(-) delete mode 100644 packages/GuipMessage/GuipMessage.vue create mode 100644 packages/GuipMessage/index copy.js create mode 100644 packages/GuipMessage/src/index.vue diff --git a/examples/package-lock.json b/examples/package-lock.json index d4bbb47..691a52d 100644 --- 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" diff --git a/examples/src/main.js b/examples/src/main.js index 26c5671..9d1fecd 100644 --- 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) diff --git a/packages/GuipMessage/GuipMessage.vue b/packages/GuipMessage/GuipMessage.vue deleted file mode 100644 index 256bead..0000000 --- a/packages/GuipMessage/GuipMessage.vue +++ /dev/null @@ -1,170 +0,0 @@ - - - - - \ No newline at end of file diff --git a/packages/GuipMessage/index copy.js b/packages/GuipMessage/index copy.js new file mode 100644 index 0000000..094216d --- /dev/null +++ b/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 } \ No newline at end of file diff --git a/packages/GuipMessage/index.js b/packages/GuipMessage/index.js index 094216d..2a960c9 100644 --- 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 } \ No newline at end of file +export default showMessage \ No newline at end of file diff --git a/packages/GuipMessage/src/index.vue b/packages/GuipMessage/src/index.vue new file mode 100644 index 0000000..b4da854 --- /dev/null +++ b/packages/GuipMessage/src/index.vue @@ -0,0 +1,170 @@ + + + + + \ No newline at end of file diff --git a/packages/index.js b/packages/index.js index b8731ba..8199bb7 100644 --- 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, diff --git a/packages/utils/clipboard.js b/packages/utils/clipboard.js index 4c81896..b9cbcad 100644 --- 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 {