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/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/GuipMessage.vue b/packages/GuipMessage/src/index.vue similarity index 99% rename from packages/GuipMessage/GuipMessage.vue rename to packages/GuipMessage/src/index.vue index 256bead..b4da854 100644 --- a/packages/GuipMessage/GuipMessage.vue +++ b/packages/GuipMessage/src/index.vue @@ -10,7 +10,7 @@