bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

Merge branch 'master' of github.com:9th-js/wcui

master
yutent 2023-05-05 14:17:54 +08:00
parent fb8c2b00d9 006e347d74
commit 27d8b191a1
2 changed files with 171 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Readme.md
View File

@ -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` 表格组件

180
src/popconfirm/index.js
View File

@ -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,159 @@ 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
}
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>
`
}