需求:超出10字符时,超出部分用…代替,悬停展示全部,否则正常显示
代码如下:
<template>
<div>
<el-tooltip
placement="top"
:content="test"
v-if="test.length > 10">
<span>{{test.slice(0, 10) + '...'}}</span>
</el-tooltip>
<span v-else>{{test}}</span>
</div>
</template>
字符数为10时:
<script>
export default {
data() {
return {
test: '生活不易,还得继续啊'
}
}
}
</script>
显示如下:
字符数超过10时:
<script>
export default {
data() {
return {
test: '生活不易,还得继续,你说是吗?'
}
}
}
</script>
显示如下:
欢迎转发!