增加popconfirm组件
parent
d47c6e5c13
commit
bdde2fde40
|
|
@ -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`
|
||||
<div class="popconfirm">
|
||||
<slot></slot>
|
||||
<div class="popover"></div>
|
||||
<slot ref="slot" @click=${this.showPopover}></slot>
|
||||
|
||||
<div class=${`arrow ${this.show ? 'show' : 'hide'}`} ref="arrow"></div>
|
||||
|
||||
<div
|
||||
class=${`popover ${this.show ? 'show' : 'hide'}`}
|
||||
style=${styles}
|
||||
ref="popover"
|
||||
>
|
||||
<p class="content">
|
||||
${this['hide-icon']
|
||||
? ''
|
||||
: html`<wc-icon
|
||||
name=${this.icon}
|
||||
style=${`color:${this['icon-color']}`}
|
||||
></wc-icon>`}
|
||||
${this.title}
|
||||
</p>
|
||||
|
||||
<div class="btns">
|
||||
${!this['cancel-button-type']
|
||||
? html`<span class="cancel" @click=${this.hide}
|
||||
>${this['cancel-button-text']}</span
|
||||
>`
|
||||
: html`<wc-button
|
||||
type=${this['cancel-button-type']}
|
||||
class="cancel"
|
||||
size="s"
|
||||
@click=${this.hide}
|
||||
>${this['cancel-button-text']}</wc-button
|
||||
>`}
|
||||
|
||||
<wc-button
|
||||
type=${this['confirm-button-type']}
|
||||
size="s"
|
||||
solid
|
||||
@click=${this.hide}
|
||||
>${this['confirm-button-text']}</wc-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue