> *A vue component for web developers.*
> 文字溢出隐藏组件，基于vue编写，用于web表单页面，支持移动端。
------
### 一、组件功能
- 支持单行、多行文字溢出显示点点点 or【更多】按钮，如下图所示：
- 点击【更多】按钮可展开显示所有文字，点击【收起】按钮可收起文字（视具体情况）。
### 二、使用演示
### 三、组件参数及事件
**参数**
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | :----------------------------------------------------------- | ------- | -------- |
| content | 内容 | String | "" |
| triggerMore | 点击更多时候是否触发展开操作 | Boolean | true |
| line | 展示几行文字 | Number | 1 |
| hasMore | 是否显示更多按钮 | Boolean | false |
| isHtml | 是否是html内容 | Boolean | false |
| revealWidth | 更多按钮宽度（若文字被"更多"按钮覆盖，可自行调整此参数） | Number | 70 |
| revealText | 更多按钮文案 | String | 【全部】 |
| foldText | 收起按钮文案 | String | 收起 |
| revealTextColor | 更多按钮文案颜色 | String | '' |
| foldTextColor | 收起按钮文案颜色 | String | '' |
**slot**
支持通过slot的传入内容，优先级高于通过content传入的内容，同时使用只会展示slot传入的内容
```
我是通过slot插入的内容，优先级高于通过content传入的内容
```
**事件**
| 事件名 | 说明 |
| ----------------- | :-------------------------- |
| reveal | 展开文字时触发 |
| fold | 收起文字时触发 |
### 四、使用方法
1、使用npm 下载组件到项目中，引入即可使用
> npm install -s vue-ellipsis-text
```javascript
import EllipsisText from "vue-ellipsis-text"
export default {
name: "app",
components: { EllipsisText },
data() {
return {
content:'这是一段很长的测试文字，是哦，好长啊，才不到30字。' // 标签数据
};
}
};
```
```javascript
```
2、普通html中直接引入使用 [注意：普通html中，如果prop属性为驼峰式，需要修改为连字符形式，方可识别。如：hasMore修改为has-more]
```html
ellipsis-text
```
### 五、项目相关操作
- 安装依赖： `npm install`
- 运行组件demo（serve with hot reload at localhost:3000）：`npm start`
- 单元测试（基于Jest + vue-test-utils ）：`npm test`
- 组件打包，输出用于生产环境的文件（包含esm，amd，cmd，umd规范）：`npm run build`
### 单元测试结果（PASSED）
### 感激
感谢以下的项目，排名不分先后
- [vue](https://cn.vuejs.org/)
- [vue-test-utils](https://vue-test-utils.vuejs.org/)
### 版权
— MIT License —