From bdde2fde4033a28159dd9ca67155863fbce702b2 Mon Sep 17 00:00:00 2001 From: chenjiajian <770230504@qq.com> Date: Thu, 4 May 2023 16:15:42 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=A2=9E=E5=8A=A0popconfirm=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/popconfirm/index.js | 181 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 169 insertions(+), 12 deletions(-) diff --git a/src/popconfirm/index.js b/src/popconfirm/index.js index cbbcfd3..c5ac3d7 100644 --- a/src/popconfirm/index.js +++ b/src/popconfirm/index.js @@ -4,7 +4,9 @@ * @date 2023/04/28 16:14:10 */ -import { css, html, Component } from '@bd/core' +import { css, html, Component, nextTick, styleMap } from '@bd/core' +import '../form/button.js' +import '../icon/index.js' class Popconfirm extends Component { static props = { @@ -15,17 +17,17 @@ class Popconfirm extends Component { }, 'confirm-button-text': { type: String, - default: '', + default: '确定', attribute: false }, 'cancel-button-text': { type: String, - default: '', + default: '取消', attribute: false }, 'confirm-button-type': { type: String, - default: '', + default: 'primary', attribute: false }, 'cancel-button-type': { @@ -35,15 +37,36 @@ class Popconfirm extends Component { }, icon: { type: String, - default: null, + default: 'info', attribute: false }, 'icon-color': { - type: Number, - default: null, + type: String, + default: '#ff9900', attribute: false }, - hidden: false + 'hide-icon': { + type: Boolean, + default: false, + attribute: false + }, + + //组件状态 + left: { + type: Number, + default: 0, + attribute: false + }, + top: { + type: Number, + default: 0, + attribute: false + }, + show: { + type: Boolean, + default: false, + attribute: false + } } static styles = [ @@ -54,26 +77,160 @@ class Popconfirm extends Component { } .popover { z-index: 10; - position: absolute; + position: fixed; padding: 12px; min-width: 150px; border-radius: 4px; border: 1px solid #ebeef5; color: #606266; line-height: 1.4; - text-align: justify; + text-align: left; font-size: 14px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); word-break: break-all; background: #fff; + transition: opacity 0.15s linear; + .btns { + display: flex; + justify-content: flex-end; + .cancel { + margin-right: 15px; + cursor: pointer; + color: var(--color-teal-2); + } + } + } + .content { + padding: 8px 0; + display: flex; + align-items: center; + font-size: 14px; + color: #606266; + line-height: 1.4; + text-align: justify; + word-break: break-all; + white-space: nowrap; + wc-icon { + margin-right: 5px; + --size: 14px; + } + } + + .arrow { + position: absolute; + z-index: 12; + left: 50%; + top: 100%; + transform: translateX(-50%); + border: 6px solid transparent; + border-bottom-color: #fff; + &[top] { + border-bottom-color: transparent; + top: 0; + border-top-color: #fff; + transform: translateY(-100%); + } + } + + .show { + visibility: visible; + opacity: 1; + } + .hide { + visibility: hidden; + opacity: 0; } ` ] + mounted() { + this.$slot = this.$refs.slot.assignedElements().shift() + this.$popover = this.$refs.popover + this.$arrow = this.$refs.arrow + nextTick(() => this.showPopover()) + } + + showPopover() { + const slotRect = this.$slot.getBoundingClientRect() + const popoverRect = this.$popover.getBoundingClientRect() + const halfSlotWidth = slotRect.width / 2 + const halfPopoverWidth = popoverRect.width / 2 + const left = slotRect.left + halfSlotWidth - halfPopoverWidth + + if (left < 0) { + this.left = slotRect.left + } else if (left + popoverRect.width > window.innerWidth) { + this.left = slotRect.right - popoverRect.width + } else { + this.left = left + } + + if (slotRect.bottom + 10 + popoverRect.height > window.innerHeight) { + this.top = slotRect.top - 10 - popoverRect.height + this.$arrow.setAttribute('top', '') + } else { + this.top = slotRect.bottom + 10 + } + + this.show = true + } + hide({ target }) { + this.show = false + if (target.hasAttribute('solid')) { + this.$emit('confirm') + } else { + this.$emit('cancel') + } + } + render() { + let styles = styleMap({ + left: `${this.left}px`, + top: `${this.top}px` + }) + return html`
- -
+ + +
+ +
+

+ ${this['hide-icon'] + ? '' + : html``} + ${this.title} +

+ +
+ ${!this['cancel-button-type'] + ? html`${this['cancel-button-text']}` + : html`${this['cancel-button-text']}`} + + ${this['confirm-button-text']} +
+
` } From d4d0f63fbf7a4489f1e5e04e91650ee4abc07cd9 Mon Sep 17 00:00:00 2001 From: chenjiajian <770230504@qq.com> Date: Thu, 4 May 2023 16:16:08 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=A2=9E=E5=8A=A0popconfirm=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/Readme.md b/Readme.md index d551ba7..c6dfc94 100644 --- a/Readme.md +++ b/Readme.md @@ -2,7 +2,6 @@ 百搭 UI 组件库, 基于 web components 开发。面向下一代的 UI 组件库 - ![downloads](https://img.shields.io/npm/dt/@bd/ui.svg) ![version](https://img.shields.io/npm/v/@bd/ui.svg) @@ -43,7 +42,7 @@ - [ ] `wc-cascadar` 表单组件-多级联动 - [x] `wc-switch` 表单组件-开关 - [x] `wc-icon` 图标组件 -- [x] `wc-layer` 弹层组件 +- [x] `wc-layer` 弹层组件 - [x] `wc-markd` markdown 组件 - [ ] `wc-meditor` md 文本编辑器 - [ ] `wc-neditor` 富文本编辑器 @@ -55,7 +54,7 @@ - [x] `wc-scroll` 滚动组件 - [x] `wc-silder` 滑块组件 - [x] `wc-swipe` 轮播图组件 -- [x] `wc-breadcrumb` 面包屑组件 +- [x] `wc-breadcrumb` 面包屑组件 - [ ] `wc-progress` 进度条组件 - [ ] `wc-tree` 树形菜单组件 - [ ] `wc-uploader` 上传组件 @@ -67,7 +66,7 @@ - [ ] `wc-layout` 布局组件 - [ ] `wc-tag` 标签组件 - [ ] `wc-tooltip` 文字提示组件 -- [ ] `wc-popconfirm` 气泡确认框组件 +- [x] `wc-popconfirm` 气泡确认框组件 - [ ] `wc-chatbox` 聊天气泡组件 - [x] `wc-divider` 分割线组件 - [ ] `wc-table` 表格组件 From 006e347d7428923ee5c706afff22d5636c05d03c Mon Sep 17 00:00:00 2001 From: chenjiajian <770230504@qq.com> Date: Fri, 5 May 2023 09:28:03 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=86=97=E4=BD=99?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/popconfirm/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/popconfirm/index.js b/src/popconfirm/index.js index c5ac3d7..f240b07 100644 --- a/src/popconfirm/index.js +++ b/src/popconfirm/index.js @@ -146,7 +146,6 @@ class Popconfirm extends Component { this.$slot = this.$refs.slot.assignedElements().shift() this.$popover = this.$refs.popover this.$arrow = this.$refs.arrow - nextTick(() => this.showPopover()) } showPopover() {