示例：
expandable模式(默认) - 文本展开收起效果：
<Paragraph
text="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
:max-lines="1"
:width="400"

tooltip模式 - 文本使用Tooltip效果：
文本超出后，显示Tooltip
<Paragraph
text="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
:max-lines="1"
:width="400"
type="tooltip"
/>

文本超出后，显示Tooltip
文本未超出，不显示Tooltip
<Paragraph
text="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
:max-lines="3"
:width="400"
type="tooltip"
/>

tooltipExpandable模式 - 文本同时使用Tooltip和展开收起效果：
<Paragraph
text="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
:max-lines="1"
:width="400"
type="tooltipExpandable"
/>

全部代码：
<template>
<div ref="textOverflow" class="text-overflow" :style="boxStyle">
<el-tooltip v-bind="tooltipAttrs" :disabled="!(type === 'tooltip' || type === 'tooltipExpandable') || expanded || !isCutOut" :content="text">
<span ref="overEllipsis" :title="!(type === 'tooltip' || type === 'tooltipExpandable') && text">{{ realText }}</span>
</el-tooltip>
<span ref="slotRef" class="slot-box">
<span v-if="showSlotNode && (type === 'expandable' || type === 'tooltipExpandable')" @click="toggle">
<span v-if="!expanded">{{ unfoldText }}</span>
<span v-else>{{ foldText }}</span>
</span>
</span>
</div>
</template>

<script>
/**
使用示例：网页链接 <Paragraph
:text="text"
/>
*/
export default {
props: {
// 显示的文本
text: {
type: String,
default: ''
},
// 最多展示的行数
maxLines: {
type: Number,
default: 3
},
// 组件宽
width: {
type: Number,
default: 0
},
// 展开
unfoldText: {
type: String,
default: '展开'
},
// 收起
foldText: {
type: String,
default: '收起'
},
// 是否使用Tooltip
tooltip: {
type: Boolean,
default: false
},
// 组件类型，expandable、tooltip、tooltipExpandable
type: {
type: String,
default: 'expandable'
},
// el-tooltip Attributes
tooltipAttrs: {
type: Object,
default: () => {
return {
effect: 'dark',
placement: 'top'
}
}
}
},
data() {
return {
offset: this.text.length, // 原始文本length
expanded: false, // 是否已展开
slotBoxWidth: 0, // 展开收起按钮宽度
textBoxWidth: this.width, // 展示的文本宽度
showSlotNode: false // 是否展示slot节点
}
},
computed: {
// 设置展示文本宽度
boxStyle() {
if (this.width) {
return {
width: 网页链接 + 'px'
}
} else {
return { width: 'auto' }
}
},