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

更新chatbubble

master
yutent 2023-05-08 19:38:57 +08:00
parent 8be5a50115
commit 60243e5e6d
1 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/chatbubble/index.js
View File

@ -34,6 +34,7 @@ class Bubble extends Component {
position: relative; position: relative;
margin-left: 16px; margin-left: 16px;
padding: 8px 16px; padding: 8px 16px;
line-height: 20px;
word-break: break-word; word-break: break-word;
border-radius: 6px; border-radius: 6px;
background: #fff; background: #fff;
@ -88,19 +89,20 @@ class Bubble extends Component {
.type-voice { .type-voice {
display: flex; display: flex;
align-items: center; align-items: center;
user-select: none;
.wave { .wave {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
width: 52rpx; width: 26px;
height: 44rpx; height: 22px;
.i { .i {
position: absolute; position: absolute;
width: 8rpx; width: 4px;
height: 8rpx; height: 4px;
border: 4rpx solid transparent; border: 2px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2); border-right-color: rgba(0, 0, 0, 0.2);
border-radius: 50%; border-radius: 50%;
@ -109,19 +111,19 @@ class Bubble extends Component {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
&:nth-child(2) { &:nth-child(2) {
left: -8rpx; left: -4px;
width: 24rpx; width: 12px;
height: 24rpx; height: 12px;
} }
&:nth-child(3) { &:nth-child(3) {
left: -12rpx; left: -6px;
width: 36rpx; width: 18px;
height: 36rpx; height: 18px;
} }
&:nth-child(4) { &:nth-child(4) {
left: -16rpx; left: -8px;
width: 48rpx; width: 24px;
height: 48rpx; height: 24px;
} }
} }
&.on .i { &.on .i {
@ -158,10 +160,14 @@ class Bubble extends Component {
return this.content return this.content
case 'image': case 'image':
return html`<img class="img-thumb" src=${this.content} />` return html`<img
class="img-thumb"
src=${this.content}
@click=${this.previewImage}
/>`
case 'voice': case 'voice':
return html`<div class="type-voice"> return html`<div class="type-voice" @click=${this.playVoice}>
<div class=${classMap({ wave: true, on: this.#playing })}> <div class=${classMap({ wave: true, on: this.#playing })}>
<i class="i"></i> <i class="i"></i>
<i class="i"></i> <i class="i"></i>
@ -176,6 +182,15 @@ class Bubble extends Component {
} }
} }
previewImage() {
this.$emit('image-preview', { data: this.content }, true)
}
playVoice() {
this.#playing = !this.#playing
this.$requestUpdate()
}
render() { render() {
return html` return html`
<div class="container"> <div class="container">