diff --git a/examples/package-lock.json b/examples/package-lock.json index 691a52d..c630a2b 100644 --- a/examples/package-lock.json +++ b/examples/package-lock.json @@ -30,7 +30,7 @@ }, "..": { "name": "@zhicheng1012/zhicheng-components", - "version": "1.0.22", + "version": "1.0.23", "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.22", - "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.22.tgz", - "integrity": "sha512-vhUvWktJfQVwD6B9D2oJiBPwGJcsqzxvL5/ryLCxL1yTNez4iGlm55G+LGSN9sihXIrNYaBCTcoUychIqR+jfQ==", + "version": "1.0.23", + "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.23.tgz", + "integrity": "sha512-n9hEoGUDfVo1quAForqlJJOAAo9u7Pab0Q6ouYT46OEaDMLIrp2B7pB6UnT9NYaLDMFkfLQl5zoxuYJZIl94sw==", "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.22", - "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.22.tgz", - "integrity": "sha512-vhUvWktJfQVwD6B9D2oJiBPwGJcsqzxvL5/ryLCxL1yTNez4iGlm55G+LGSN9sihXIrNYaBCTcoUychIqR+jfQ==", + "version": "1.0.23", + "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.23.tgz", + "integrity": "sha512-n9hEoGUDfVo1quAForqlJJOAAo9u7Pab0Q6ouYT46OEaDMLIrp2B7pB6UnT9NYaLDMFkfLQl5zoxuYJZIl94sw==", "requires": { "async-validator": "^1.11.5", "core-js": "^3.40.0" diff --git a/examples/src/App.vue b/examples/src/App.vue index 6230560..0949494 100644 --- a/examples/src/App.vue +++ b/examples/src/App.vue @@ -81,7 +81,7 @@ @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
- + http: @@ -345,6 +345,7 @@ - - \ No newline at end of file diff --git a/packages/index.js b/packages/index.js index 8199bb7..fb96d02 100644 --- a/packages/index.js +++ b/packages/index.js @@ -55,7 +55,7 @@ const components = [ GuipTooltip, GuipSwitch, GuipDialog, - GuipFormItem + GuipFormItem, ] const install = function (Vue,options={}) { @@ -66,13 +66,12 @@ const install = function (Vue,options={}) { // Vue.prototype.$off = $off // Vue.prototype.$once = $once - console.log(options,'====options.message'); -// 复制 Vue.prototype.$Message = GuipMessage + + // 复制 Vue.prototype.$copy = modernCopyToClipboard; Vue.use(clipboard); - components.forEach(component => { if (!component.name) { throw new Error(`Component name is required: ${component}`) @@ -80,6 +79,7 @@ const install = function (Vue,options={}) { Vue.component(component.name, component) }) } +console.log(install,'install==='); export { GuipButton, @@ -97,7 +97,8 @@ export { GuipTooltip, GuipSwitch, GuipDialog, - GuipFormItem + GuipFormItem, + GuipMessage } export default { install, @@ -116,5 +117,6 @@ export default { GuipTooltip, GuipSwitch, GuipDialog, - GuipFormItem + GuipFormItem, + GuipMessage } \ No newline at end of file diff --git a/packages/styles/component.scss b/packages/styles/component.scss index e878264..6be8065 100644 --- a/packages/styles/component.scss +++ b/packages/styles/component.scss @@ -379,4 +379,115 @@ } } -// 自定义下拉选择框组件 end \ No newline at end of file +// 自定义下拉选择框组件 end + +// input 组件 start +.guip-input { + .unit { + position: absolute; + right: 12px; + /* 根据需要调整位置 */ + top: 50%; + transform: translateY(-50%); + pointer-events: none; + /* 防止单位文本影响输入框的点击事件 */ + } +} + +// input 组件 end + +// 提示信息组件 start +.guip-custom-message { + position: fixed; + z-index: 9999; + display: flex; + align-items: center; + padding: 14px 21px; + transition: all 0.3s; + font-size: 14px; + font-weight: normal; + line-height: normal; + letter-spacing: 0.08em; + color: #626573; + border-radius: 4px; + background: #FFFFFF; + /* 阴影/低阴影 */ + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16); + + .message-image { + width: 18px; + height: 18px; + margin-right: 10px; + } +} + +/* 位置样式 */ +.guip-custom-message.top-center { + top: 20px; + left: 50%; + transform: translateX(-50%); +} + +.guip-custom-message.top-right { + top: 20px; + right: 20px; +} + +.guip-custom-message.top-left { + top: 20px; + left: 20px; +} + +.guip-custom-message.bottom-center { + bottom: 20px; + left: 50%; + transform: translateX(-50%); +} + +.guip-custom-message.bottom-right { + bottom: 20px; + right: 20px; +} + +.guip-custom-message.bottom-left { + bottom: 20px; + left: 20px; +} + + +/* 动画效果 */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.3s, transform 0.3s; +} + +.fade-enter, +.fade-leave-to { + opacity: 0; +} + +.fade-enter.top-center, +.fade-leave-to.top-center { + transform: translate(-50%, -20px); +} + +.fade-enter.top-right, +.fade-leave-to.top-right, +.fade-enter.top-left, +.fade-leave-to.top-left { + transform: translateY(-20px); +} + +.fade-enter.bottom-center, +.fade-leave-to.bottom-center { + transform: translate(-50%, 20px); +} + +.fade-enter.bottom-right, +.fade-leave-to.bottom-right, +.fade-enter.bottom-left, +.fade-leave-to.bottom-left { + transform: translateY(20px); +} + +// 提示信息组件 end \ No newline at end of file