From e054ddf26c675a30a31e28c153ba6a463d0ff029 Mon Sep 17 00:00:00 2001 From: zq <136432190602163.com> Date: Wed, 23 Jul 2025 15:19:51 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=A8=E5=B1=80=E6=B3=A8?= =?UTF-8?q?=E5=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/src/App.vue | 169 +++++++++++--- packages/CustomDropdown/index.js | 7 + packages/CustomDropdown/src/index.vue | 421 ++++++++++++++++++++++++++++++++++ packages/index.js | 49 ++-- packages/styles/component.scss | 50 +++- packages/utils/eventBus.js | 8 +- 6 files changed, 645 insertions(+), 59 deletions(-) create mode 100644 packages/CustomDropdown/index.js create mode 100644 packages/CustomDropdown/src/index.vue diff --git a/examples/src/App.vue b/examples/src/App.vue index 44e2454..82659bc 100644 --- a/examples/src/App.vue +++ b/examples/src/App.vue @@ -109,30 +109,30 @@

提示框：

- 成功提示 - 失败提示 - 警告提示 + 成功提示 + 失败提示 + 警告提示

复制功能

- - - 复制渝过田晴 - - - 点击复制: {{ content }} + + + 复制渝过田晴 + + + 点击复制: {{ content }}
- - - - - - - + + + + + + +
@@ -184,18 +184,18 @@ - -
- -
-

自定义表单展示形式：

- -
- - 跳转一下 自定义右侧 - - -
+ +
+ +
+

自定义表单展示形式：

+ +
+ + 跳转一下 自定义右侧 + + +
@@ -308,6 +308,103 @@
+
+ + +
+ + + +
+ {{ currentDomainItem.name }}
+
+ + + + + + +
+
+ + +
+ + + +
+ {{ currentDomainItem.name }} +
+
+ + + + + + + + + +
+
+ + + + + +
+ @@ -339,6 +436,8 @@ +
+ @@ -705,11 +804,13 @@ export default { // showClose: true, // center: true // }) - this.$Message({ - message: '这是一条普通消息', - type: 'info', - duration: 3000 - }) + + // 测试信息弹出框 =----ok + // this.$Message({ + // message: '这是一条普通消息', + // type: 'info', + // duration: 3000 + // }) }, computed: { currentDomainItem() { @@ -729,7 +830,7 @@ export default { }, // 手动copy内容 handleClickCopy() { - + // GuipMessage.success('操作成功') // this.$Message.success('操作成功') this.$copy(this.form.input1, { diff --git a/packages/CustomDropdown/index.js b/packages/CustomDropdown/index.js new file mode 100644 index 0000000..99fa0d5 --- /dev/null +++ b/packages/CustomDropdown/index.js @@ -0,0 +1,7 @@ +import CustomDropdown from './src/index.vue' + +CustomDropdown.install = function(Vue) { + Vue.component(CustomDropdown.name || 'CustomDropdown', CustomDropdown) +} + +export default CustomDropdown \ No newline at end of file diff --git a/packages/CustomDropdown/src/index.vue b/packages/CustomDropdown/src/index.vue new file mode 100644 index 0000000..fa837c2 --- /dev/null +++ b/packages/CustomDropdown/src/index.vue @@ -0,0 +1,421 @@ + + + + + \ No newline at end of file diff --git a/packages/index.js b/packages/index.js index f2cbac1..0019ac6 100644 --- a/packages/index.js +++ b/packages/index.js @@ -14,10 +14,13 @@ import GuipSwitch from './GuipSwitch'; import GuipTooltip from './GuipToolTip'; import GuipDialog from './GuipDialog'; import GuipMessage from './GuipMessage'; +// import CustomDropdown from './CustomDropdown'; import GuipFormItem from './GuipFormItem'; -import { directive as clickaway } from 'vue-clickaway'; +import { + directive as clickaway +} from 'vue-clickaway'; // 表格头部 添加自定义小图标 * @@ -27,7 +30,9 @@ import { directive as clickaway } from 'vue-clickaway'; // 复制到粘贴板 import clipboard from './utils/dirClipBoard'; -import { modernCopyToClipboard } from './utils/clipboard'; +import { + modernCopyToClipboard +} from './utils/clipboard'; import 'core-js/stable'; import 'element-ui/lib/theme-chalk/index.css'; // 如果依赖Element @@ -35,12 +40,12 @@ import './styles/index.css'; // 全局引入 import './styles/common.scss'; // 全局引入 import './styles/component.scss'; // 全局引入 -// import EventBus, { -// $on, -// $once, -// $off, -// $emit -// } from './utils/eventBus' +import EventBus, { + $busOn, + $busOnce, + $busOff, + $busEmit +} from './utils/eventBus' const components = [ GuipButton, @@ -59,18 +64,20 @@ const components = [ GuipSwitch, GuipDialog, GuipFormItem, -] + // CustomDropdown +]; -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 +const install = function (Vue, options = {}) { + // 为了避免冲突 名字要和特殊api 区分 + // 挂载到Vue原型 + Vue.prototype.$eventBus = EventBus + Vue.prototype.$busOn = $busOn + Vue.prototype.$busEmit = $busEmit + Vue.prototype.$busOff = $busOff + Vue.prototype.$busOnce = $busOnce Vue.prototype.$Message = GuipMessage - + // 复制 Vue.prototype.$copy = modernCopyToClipboard; Vue.use(clipboard); @@ -84,7 +91,7 @@ const install = function (Vue,options={}) { }) } -export { +export { GuipButton, GroupFormBtns, GuipInput, @@ -101,7 +108,8 @@ export { GuipSwitch, GuipDialog, GuipFormItem, - GuipMessage + GuipMessage, + // CustomDropdown } export default { install, @@ -121,5 +129,6 @@ export default { GuipSwitch, GuipDialog, GuipFormItem, - GuipMessage + GuipMessage, + // CustomDropdown } \ No newline at end of file diff --git a/packages/styles/component.scss b/packages/styles/component.scss index 54e0629..af483be 100644 --- a/packages/styles/component.scss +++ b/packages/styles/component.scss @@ -488,4 +488,52 @@ transform: translateY(20px); } -// 提示信息组件 end \ No newline at end of file +// 提示信息组件 end + +// 自定义下拉框、input+下拉组合框 +.combo-formItem { + ::v-deep { + .form-item-bottom { + position: relative; + } + + .select-trigger { + background: #F6F7FA; + border-color: transparent; + } + + .is-open .select-trigger { + border-color: #006AFF; + } + + .el-input__inner { + border-radius: 2px 0 0 2px; + } + } + + .self-drop-wrap { + position: absolute; + z-index: 1; + width: 100%; + } + + .appendDrop { + height: 38px; + align-items: center; + border-radius: 0 2px 2px 0; + border: 1px solid #DFE2E6; + border-left-color: transparent; + justify-content: center; + box-sizing: border-box; + padding: 0 30px 0 12px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + &:hover { + border: 1px solid #006AFF; + } + } + } + + // 组合框样式 end \ No newline at end of file diff --git a/packages/utils/eventBus.js b/packages/utils/eventBus.js index 2919ea8..280df16 100644 --- a/packages/utils/eventBus.js +++ b/packages/utils/eventBus.js @@ -3,9 +3,9 @@ import Vue from 'vue' const EventBus = new Vue() // 封装常用方法 -export const $on = EventBus.$on.bind(EventBus) -export const $once = EventBus.$once.bind(EventBus) -export const $off = EventBus.$off.bind(EventBus) -export const $emit = EventBus.$emit.bind(EventBus) +export const $busOn = EventBus.$on.bind(EventBus) +export const $busOnce = EventBus.$once.bind(EventBus) +export const $busOff = EventBus.$off.bind(EventBus) +export const $busEmit = EventBus.$emit.bind(EventBus) export default EventBus \ No newline at end of file