# vue-text-overflow

**Repository Path**: fcli/vue-text-overflow

## Basic Information

- **Project Name**: vue-text-overflow
- **Description**: vue3文本超出tooltip提示并展开和收起
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 3
- **Created**: 2023-10-30
- **Last Updated**: 2025-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: fcli
 * @Date: 2023-09-04 14:12:29
 * @LastEditors: fcli
 * @LastEditTime: 2023-10-30 15:58:40
 * @FilePath: /vue-text-overflow/README.md
 * @Description: 
-->

## vue-text-overflow

#### 使用方法
```bash
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标签