diff --git a/src/chatbubble/index.js b/src/chatbubble/index.js index 873803e..4cee3dd 100644 --- a/src/chatbubble/index.js +++ b/src/chatbubble/index.js @@ -34,6 +34,7 @@ class Bubble extends Component { position: relative; margin-left: 16px; padding: 8px 16px; + line-height: 20px; word-break: break-word; border-radius: 6px; background: #fff; @@ -88,19 +89,20 @@ class Bubble extends Component { .type-voice { display: flex; align-items: center; + user-select: none; .wave { position: relative; display: flex; align-items: center; - width: 52rpx; - height: 44rpx; + width: 26px; + height: 22px; .i { position: absolute; - width: 8rpx; - height: 8rpx; - border: 4rpx solid transparent; + width: 4px; + height: 4px; + border: 2px solid transparent; border-right-color: rgba(0, 0, 0, 0.2); border-radius: 50%; @@ -109,19 +111,19 @@ class Bubble extends Component { background: rgba(0, 0, 0, 0.2); } &:nth-child(2) { - left: -8rpx; - width: 24rpx; - height: 24rpx; + left: -4px; + width: 12px; + height: 12px; } &:nth-child(3) { - left: -12rpx; - width: 36rpx; - height: 36rpx; + left: -6px; + width: 18px; + height: 18px; } &:nth-child(4) { - left: -16rpx; - width: 48rpx; - height: 48rpx; + left: -8px; + width: 24px; + height: 24px; } } &.on .i { @@ -158,10 +160,14 @@ class Bubble extends Component { return this.content case 'image': - return html`` + return html`` case 'voice': - return html`
+ return html`
@@ -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() { return html`