@fcli/vue-text-overflow
v1.0.1
Published
vue3文本超出提示并展开和收起
Downloads
5
Readme
vue-text-overflow
使用方法
npm install @fcli/vue-text-overflow --save-dev 来安装
在项目中使用
import vueTextOverflow from '@fcli/vue-text-overflow';
const app=createApp(App)
app.use(vueTextOverflow);
使用示例
<template>
<div class="content">
<vue-text-overflow :showOverflowTooltip="false" :showExport="true" :lineNum="3">
这是一段文字<span style="color:red">带html标签</span>,文本超出省略溢出测试文本超出省略溢出测试文本超出省略溢出测试,文本超出省略溢出测试,文本超出省略溢出测试,文本超出省略溢出测试,文本超出省略溢出测试,文本超出省略溢出测试,文本超出省略溢出测试,文本超出省略溢出测试,文本超出省略溢出测试,文本超出省略溢出测试
</vue-text-overflow>
</div>
</template>
<script setup lang="ts">
import VueTextOverflow from './plugin/index.vue';
components:{
VueTextOverflow
}
</script>
参数说明
| 属性 | 属性名称 | 类型 | 可选值 | | ------ | -------- | ------ | ------ | | showOverflowTooltip | 是否超出展示tooltip | Boolean | false | | showExport | 是否展示展开/收起 操作按钮 | Boolean | true | | lineNum | 超过多少行省略 | Number | 3 |
slot
组件中的自定义内容,可以为纯文本或html标签