# Vue-Paragraph

**Repository Path**: yanhuakang/vue-paragraph

## Basic Information

- **Project Name**: Vue-Paragraph
- **Description**: 1.一个实现在文本溢出后浮现Tooltip，文本不溢出则不显示Tooltip的Vue组件；
2.还可以做文本展开收起效果
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-10-07
- **Last Updated**: 2023-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-paragraph

### 更多API和建议，请参阅[文档](https://blog.csdn.net/qq_41887214/article/details/116663975) 


```
npm install vue-paragraph
```
```vue
import Paragraph from 'vue-paragraph'
Vue.use(Paragraph)
```
示例：
Vue 实现在文本溢出后浮现Tooltip、及文本展开收起效果；文本超出后，显示Tooltip，文本未超出，不显示Tooltip。

文本展开收起,文本溢出Tooltip,Vue,ElementUI,Tooltip
1. expandable模式(默认) - 文本展开收起效果：
```vue
<Paragraph
    content="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
    :max-lines="1"
    :width="400"
/>
```

2. tooltip模式 - 文本使用Tooltip效果：

- 文本超出后，显示Tooltip
```vue
<Paragraph
    content="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
  :max-lines="1"
  :width="400"
  type="tooltip"
/>
```

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

3. 文本未超出，不显示Tooltip

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


## API

### Content Attributes

| 参数         | 说明                                   | 类型           | 可选值                                                       | 默认值          |
| ------------ | -------------------------------------- | -------------- | ------------------------------------------------------------ | --------------- |
| content      | 显示的内容，也可以通过 `slot` 传入 DOM | String         | 必填                                                         | —               |
| maxLines     | 最多展示的行数                         | String, Number | —                                                            | 3               |
| unfoldText   | 展开按钮文本                           | String         | —                                                            | 展开            |
| foldText     | 收起按钮文本                           | String         | —                                                            | 收起            |
| textStyle    | 展开收起按钮样式                       | String         | —                                                            | color: #1890ff; |
| type         | 组件类型                               | String         | expandable / tooltip / tooltipExpandable  		请看【示例】 | expandable      |
| contentWidth | 内容宽度                               | String, Number | —                                                            |                 |
| tooltipAttrs | 提示工具条属性                         | Object         | Tooltip Attributes                                           |                 |

### Tooltip Attributes 

| width           | tooltip宽度                                                  | String, Number | —                                                            | 最小宽度 150px                                          |
| --------------- | ------------------------------------------------------------ | -------------- | ------------------------------------------------------------ | ------------------------------------------------------- |
| effect          | 默认提供的主题                                               | String         | dark/light                                                   | dark                                                    |
| placement       | 出现位置                                                     | String         | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | top                                                     |
| disabled        | Tooltip 是否可用                                             | Boolean        | —                                                            | false                                                   |
| value / v-model | 状态是否可见                                                 | Boolean        | —                                                            | false                                                   |
| offset          | 出现位置的偏移量                                             | Number         | —                                                            | 0                                                       |
| transition      | 定义渐变动画                                                 | String         | —                                                            | fade-in-linear                                          |
| visible-arrow   | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean        | —                                                            | true                                                    |
| popper-options  | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object         | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class    | 为 popper 添加类名                                           | String         | —                                                            | —                                                       |
| open-delay      | 触发方式为 hover 时的显示延迟，单位为毫秒                    | Number         | —                                                            | —                                                       |
| close-delay     | 触发方式为 hover 时的隐藏延迟，单位为毫秒                    | number         | —                                                            | 200                                                     |
| tabindex        | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number         | —                                                            | 0                                                       |

### Slot

| 参数      | 说明                          |
| --------- | ----------------------------- |
| —         | Popover 内嵌 HTML 文本        |
| reference | 触发 Popover 显示的 HTML 元素 |