# 使用
提示
以下的 demo 统一设置 line-height: 16px，主动设置 line-height 也是推荐的做法，具体查看：为什么推荐主动设置 line-height
# 最简单的使用
text 是需要进行缩略的文本内容，默认超过一行时进行缩略。
点击显示/隐藏示例
<template>
<div class="wrapper">
<vue-ellipsis text="这是一段非常非常非常非常非常非常非常非常非常非常非常长的话"></vue-ellipsis>
</div>
</template>
<style scoped>
.wrapper {
width: 200px;
}
</style>
# 超过某行时进行缩略
通过 visibleLine 设置可见行数，当文本内容超过可见行数时进行缩略。
点击显示/隐藏示例
<template>
<div class="wrapper">
<vue-ellipsis
:visible-line="2"
text="这是一段非常非常非常非常非常非常非常非常非常非常非常长的话">
</vue-ellipsis>
</div>
</template>
<style scoped>
.wrapper {
width: 200px;
}
</style>
# 超过某个高度时进行缩略
通过 visibleHeight 设置可见高度，当文本高度超过可见高度时进行缩略。visibleHeight 的优先级比 visibleLine 高，同时设置 visibleHeight 和 visibleLine 时将会以 visibleHeight 为准。
点击显示/隐藏示例
<template>
<div class="wrapper">
<vue-ellipsis
:visible-height="60"
text="这是一段非常非常非常非常非常非常非常非常非常非常非常长的话">
</vue-ellipsis>
</div>
</template>
<style scoped>
.wrapper {
width: 200px;
}
</style>
# 自定义缩略符
通过设置 ellipsisNode 自定义缩略符。
点击显示/隐藏示例
<template>
<div class="wrapper">
<vue-ellipsis
:visible-line="2"
ellipsis-node="???"
text="这是一段非常非常非常非常非常非常非常非常非常非常非常长的话">
</vue-ellipsis>
</div>
</template>
<style scoped>
.wrapper {
width: 200px;
}
</style>
也可以通过 slot 将自定义缩略符设置为一段 HTML：
点击显示/隐藏示例
<template>
<div class="wrapper">
<vue-ellipsis
:visible-line="2"
text="这是一段非常非常非常非常非常非常非常非常非常非常非常长的话">
<template v-slot:ellipsisNode>
<a>-。-</a>
</template>
</vue-ellipsis>
</div>
</template>
<style scoped>
.wrapper {
width: 200px;
}
</style>
注意
该 slot 将会覆盖 ellipsisNode 属性。
# 控制组件是否进行缩略
ellipsis 为 false 的时候组件不进行文本缩略。
点击显示/隐藏示例
<template>
<div class="wrapper">
<div class="checkbox">
<label>
<input v-model="ellipsis" type="checkbox">
<span>是否开启缩略</span>
</label>
</div>
<vue-ellipsis
:visible-line="2"
:ellipsis="ellipsis"
text="这是一段非常非常非常非常非常非常非常非常非常非常非常长的话">
</vue-ellipsis>
</div>
</template>
<script>
export default {
data() {
return {
ellipsis: false,
};
},
};
</script>
<style scoped>
.wrapper {
width: 200px;
}
.checkbox {
margin-bottom: 10px;
}
</style>
# 富文本缩略
设置 useInnerHtml 时，会把 text 作为 HTML 进行缩略处理。
点击显示/隐藏示例
<template>
<div class="wrapper">
<vue-ellipsis
:visible-line="2"
use-inner-html
text="<b>这是一段</b><u>非常非常非常非常非常非常非常非常非常非常非常长</u>的话">
</vue-ellipsis>
</div>
</template>
<style scoped>
.wrapper {
width: 200px;
}
</style>
# 尾文本过滤
通过设置 endExcludes 过滤尾文本，支持使用字符串和正则表达式。
点击显示/隐藏示例
<template>
<div class="wrapper">
<vue-ellipsis
:end-excludes="['.', ',', /[1-5]/]"
text="保留下来的文本内容612345.,.,">
</vue-ellipsis>
</div>
</template>
<style scoped>
.wrapper {
width: 210px;
}
</style>
# 自适应缩略
设置 reflowOnResize 时，将会开启自适应缩略。在不同情况下将会采用不同的策略进行自适应缩略，具体规则查看：组件的缩略策略是怎么样的
点击显示/隐藏示例
<template>
<div class="wrapper">
<vue-ellipsis
:visible-line="1"
text="这是一段非常非常非常非常非常非常非常长的话"
ellipsis-node="...."
reflowOnResize>
</vue-ellipsis>
</div>
</template>
<style scoped>
.wrapper {
padding: 10px 12px;
width: 300px;
resize: horizontal;
border-radius: 4px;
background-color: #eee;
overflow: hidden;
}
</style>
# 比较少见的功能：超过 n 行时展示 m 行
在设置了 visibleLine 的基础上，通过设置 maxLine，可以实现超过 n 行时只展示 m 行的功能，visibleLine 必须小于 maxLine 才会生效。
点击显示/隐藏示例
<template>
<div class="wrapper">
<vue-ellipsis
:visible-line="2"
:max-line="4"
text="这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的话"
reflowOnResize>
</vue-ellipsis>
</div>
</template>
<style scoped>
.wrapper {
padding: 10px 12px;
width: 150px;
resize: horizontal;
border-radius: 4px;
background-color: #eee;
overflow: hidden;
}
</style>
这种场景可能会比较少见，但实现其他组件库不支持的功能，我辈义不容辞 (○｀ 3′○) 🎉 恭喜 EDG！
# 姐妹需求：超过高度 n 时，展示高度 m
这是 “超过 n 行时展示 m 行” 的姐妹需求，因此对应的 api 使用方式也非常相似：
在设置了 visibleHeight 的基础上，通过设置 maxHeight，可以实现超过高度 n 时，展示高度 m 的功能，visibleHeight 必须小于 maxHeight 才会生效。
maxHeight 的优先级高于 maxLine，当同时设置两者时，将会以 maxHeight 为准。
点击显示/隐藏示例
<template>
<div class="wrapper">
<vue-ellipsis
:visible-height="40"
:max-height="80"
text="这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的话"
reflowOnResize>
</vue-ellipsis>
</div>
</template>
<style scoped>
.wrapper {
padding: 10px 12px;
width: 150px;
resize: horizontal;
border-radius: 4px;
background-color: #eee;
overflow: hidden;
}
</style>
visibleLine、visibleHeight 和 maxLine、maxHeight 之间可以相互配合，达到超过 n 行时展示高度 m 的效果，也可以达到超过高度 n 时展示 m 行的效果，这取决于你怎么使用。