修复文本提示气泡在内容过长时,文本未被换行而被截断的问题
parent
b680a89033
commit
6b4e6533f5
|
@ -18,6 +18,7 @@
|
||||||
- 修复播放详情页的歌词无法使用触碰拖动的问题(#1865)
|
- 修复播放详情页的歌词无法使用触碰拖动的问题(#1865)
|
||||||
- 修复与优化繁体中文、英语翻译显示(#1845)
|
- 修复与优化繁体中文、英语翻译显示(#1845)
|
||||||
- 修复歌曲时文件名过长导致歌曲无法下载的问题(#1877)
|
- 修复歌曲时文件名过长导致歌曲无法下载的问题(#1877)
|
||||||
|
- 修复文本提示气泡在内容过长时,文本未被换行而被截断的问题
|
||||||
|
|
||||||
### 变更
|
### 变更
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<transition name="tips-fade" @after-leave="afterLeave">
|
<transition name="tips-fade" @after-leave="afterLeave">
|
||||||
<div
|
<div
|
||||||
v-show="visible" ref="dom_tips" :style="{ left: position.left + 'px' , top: position.top + 'px', transform: transform }"
|
v-show="visible" ref="dom_tips" :style="{ left: position.left + 'px' , top: position.top + 'px', transform, maxWidth, }"
|
||||||
:class="$style.tips" role="presentation"
|
:class="$style.tips" role="presentation"
|
||||||
>
|
>
|
||||||
{{ message }}
|
{{ message }}
|
||||||
|
@ -26,6 +26,7 @@ export default {
|
||||||
left: 0,
|
left: 0,
|
||||||
},
|
},
|
||||||
transform: 'translate(0, 0)',
|
transform: 'translate(0, 0)',
|
||||||
|
maxWidth: '80%',
|
||||||
cancel: null,
|
cancel: null,
|
||||||
setTips: null,
|
setTips: null,
|
||||||
aotoCloseTimer: null,
|
aotoCloseTimer: null,
|
||||||
|
@ -34,7 +35,10 @@ export default {
|
||||||
watch: {
|
watch: {
|
||||||
message() {
|
message() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.transform = `translate(${this.handleGetOffsetXY(this.position.left, this.position.top)})`
|
this.maxWidth = this.handleGetMaxWidth(this.position.left) + 'px'
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.transform = `translate(${this.handleGetOffsetXY(this.position.left, this.position.top)})`
|
||||||
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -43,10 +47,15 @@ export default {
|
||||||
el.parentNode.removeChild(el)
|
el.parentNode.removeChild(el)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
handleGetMaxWidth(left) {
|
||||||
|
const containerWidth = document.documentElement.clientWidth
|
||||||
|
let maxWidth = containerWidth - left
|
||||||
|
return (maxWidth > left ? maxWidth : left - 12) - 30
|
||||||
|
},
|
||||||
handleGetOffsetXY(left, top) {
|
handleGetOffsetXY(left, top) {
|
||||||
const tipsWidth = this.$refs.dom_tips.clientWidth
|
const tipsWidth = this.$refs.dom_tips.clientWidth
|
||||||
const tipsHeight = this.$refs.dom_tips.clientHeight
|
const tipsHeight = this.$refs.dom_tips.clientHeight
|
||||||
const dom_container = document.body
|
const dom_container = document.documentElement
|
||||||
const containerWidth = dom_container.clientWidth
|
const containerWidth = dom_container.clientWidth
|
||||||
const containerHeight = dom_container.clientHeight
|
const containerHeight = dom_container.clientHeight
|
||||||
const offsetWidth = containerWidth - left - tipsWidth
|
const offsetWidth = containerWidth - left - tipsWidth
|
||||||
|
@ -76,7 +85,7 @@ export default {
|
||||||
padding: 4px 5px;
|
padding: 4px 5px;
|
||||||
z-index: 10001;
|
z-index: 10001;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
max-width: 80%;
|
// max-width: 80%;
|
||||||
color: var(--color-font);
|
color: var(--color-font);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: var(--color-content-background);
|
background: var(--color-content-background);
|
||||||
|
@ -84,7 +93,8 @@ export default {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
// text-align: justify;
|
// text-align: justify;
|
||||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
|
||||||
white-space: pre;
|
white-space: pre-wrap;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.tips-fade-enter-active), :global(.tips-fade-leave-active) {
|
:global(.tips-fade-enter-active), :global(.tips-fade-leave-active) {
|
||||||
|
|
Loading…
Reference in New Issue