From 2f2d1ebbe9658388d2ebf1997778e0db302e4e58 Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 22 Nov 2023 16:40:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96tooltip=E5=9C=A8=E6=9C=89?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=97=B6=E7=9A=84=E5=AE=9A=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/popconfirm/index.js | 304 ++++++++++++++-------------------------- src/tooltip/index.js | 8 +- 2 files changed, 114 insertions(+), 198 deletions(-) diff --git a/src/popconfirm/index.js b/src/popconfirm/index.js index c61a72a..144c997 100644 --- a/src/popconfirm/index.js +++ b/src/popconfirm/index.js @@ -1,225 +1,135 @@ /** - * {气泡确认框} - * @author chensbox - * @date 2023/04/28 16:14:10 + * {} + * @author yutent + * @date 2023/03/21 16:14:10 */ -import { css, html, Component, styleMap } from 'wkit' -import '../form/button.js' +import { css, html, Component, bind, styleMap, offset } from 'wkit' -class Popconfirm extends Component { +const DEFAULT_TIPS = '请确认你的操作!' + +class PopConfirm extends Component { static props = { - title: { - type: String, - default: '', - attribute: false - }, - confirmButtonText: { - type: String, - default: '确定', - attribute: false - }, - cancelButtonText: { - type: String, - default: '取消', - attribute: false - }, - confirmButtonType: { - type: String, - default: 'primary', - attribute: false - }, - cancelButtonType: { - type: String, - default: '', - attribute: false - }, - icon: { - type: String, - default: 'info', - attribute: false - }, - iconColor: { - type: String, - default: '#ff9900', - attribute: false - }, - hideIcon: { - type: Boolean, - default: false - }, - - show: { - type: Boolean, - default: false, - attribute: false - } + title: 'str!' } static styles = [ css` :host { - position: relative; - display: inline-block; + display: inline-flex; } - .popover { - z-index: 10; + + .container { + position: relative; + } + + .tooltip { + display: none; position: fixed; - padding: 12px; - min-width: 150px; - border-radius: 4px; - border: 1px solid #ebeef5; - color: #606266; - line-height: 1.4; - text-align: left; - font-size: 14px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + z-index: 9; + justify-content: center; + align-items: center; + max-width: 360px; + min-width: 32px; + padding: 6px 8px; + border-radius: 3px; + font-size: var(--wc-tooltip-font, 14px); + background: var(--wc-tooltip-background, #fff); + color: var(--wc-tooltip-color, var(--color-dark-1)); + box-shadow: 0 0 3px var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.2)); 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); + -webkit-user-select: none; + user-select: none; + + &::after { + position: absolute; + display: block; + width: 8px; + height: 8px; + border-radius: 2px; + background: var(--wc-tooltip-background, #fff); + content: ''; + transform: rotate(45deg); + box-shadow: -1px -1px 0 var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.1)); + } + + &[placement='left-top'] { + &::after { + right: 16px; + bottom: -4px; + box-shadow: 1px 1px 0 var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.1)); + } + } + &[placement='left-bottom'] { + &::after { + right: 16px; + top: -4px; + } + } + &[placement='right-top'] { + &::after { + left: 16px; + bottom: -4px; + box-shadow: 1px 1px 0 var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.1)); + } + } + &[placement='right-bottom'] { + &::after { + left: 16px; + top: -4px; } } } - .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; - --wc-icon-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; - } ` ] + + #click(ev) { + let { left, top } = offset(this) + let placement = 'left' + let styles = { display: 'block' } + + if (left < 360 || (left > 360 && window.innerWidth - left > 360)) { + placement = 'right' + styles.left = left + 'px' + } else { + let right = window.innerWidth - left - this.clientWidth + styles.right = right + 'px' + } + + if (top < 96) { + top += 8 + this.clientHeight + placement += '-bottom' + styles.top = top + 'px' + } else { + let bottom = window.innerHeight - top + 8 + placement += '-top' + styles.bottom = bottom + 'px' + } + // + this.$refs.tips.setAttribute('placement', placement) + this.$refs.tips.style.cssText = styleMap(styles) + this.$refs.tips.$animate() + } + mounted() { - this.$slot = this.$refs.slot.assignedElements().shift() - this.$popover = this.$refs.popover - this.$arrow = this.$refs.arrow - } - - 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') - } + // bind(this.$refs.wrap, 'mouseleave', ev => { + // this.$refs.tips.$animate(true) + // }) } render() { - let styles = styleMap({ - left: `${this.left}px`, - top: `${this.top}px` - }) - return html` -
- - -
- -
-

- ${this.hideIcon - ? '' - : html``} - ${this.title} -

- -
- ${!this.cancelButtonType - ? html`${this.cancelButtonText}` - : html`${this[cancelButtonText]}`} - - ${this.confirmButtonText} -
+
+
+
-
+
+ ${this.title || DEFAULT_TIPS} +
+ ` } } -Popconfirm.reg('popconfirm') +PopConfirm.reg('popconfirm') diff --git a/src/tooltip/index.js b/src/tooltip/index.js index 5c53134..da0e64b 100644 --- a/src/tooltip/index.js +++ b/src/tooltip/index.js @@ -86,6 +86,11 @@ class Tooltip extends Component { let { left, top } = offset(this) let placement = 'left' let styles = { display: 'block' } + let st = document.documentElement.scrollTop + + if (this.title.trim() === '') { + return + } if (left < 360 || (left > 360 && window.innerWidth - left > 360)) { placement = 'right' @@ -99,8 +104,9 @@ class Tooltip extends Component { top += 8 + this.clientHeight placement += '-bottom' styles.top = top + 'px' + // console.log('<><><>', st) } else { - let bottom = window.innerHeight - top + 8 + let bottom = window.innerHeight - top + 8 + st placement += '-top' styles.bottom = bottom + 'px' }