OverflowHidden 内容超出隐藏 
概述
OverflowHidden 内容超出隐藏，主要用于文本内容超出隐藏功能。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiOverflowHidden from "@/components/firstui/fui-overflow-hidden/fui-overflow-hidden.vue"
export default {
components:{
fuiOverflowHidden
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
基础使用，显示一行
通过 text 属性设置显示文本。
<view class="fui-oh__wrap">
<fui-overflow-hidden :text="text"></fui-overflow-hidden>
</view>
1
2
3
2
3
//data
text: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！'
1
2
2
.fui-oh__wrap {
width: 100%;
padding: 24rpx 32rpx;
box-sizing: border-box;
background: #FFFFFF;
}
1
2
3
4
5
6
2
3
4
5
6
显示两行
通过 text 属性设置显示文本，rows 属性设置显示行数。
<view class="fui-oh__wrap">
<fui-overflow-hidden :text="text" :rows="2"></fui-overflow-hidden>
</view>
1
2
3
2
3
渐变隐藏
通过 text 属性设置显示文本，size 属性设置文本字体大小，color 属性设置字体颜色，type 属性设置隐藏类型，gradientColor 属性设置渐变颜色，height 属性设置渐变内容高度，visible 属性设置是否显示隐藏内容。
<view class="fui-oh__wrap">
<fui-overflow-hidden :text="text" :size="28" color="#FF2B2B" type="2" gradientColor="#FFFFFF"
height="200rpx" :visible="visible"></fui-overflow-hidden>
<fui-button type="gray" width="400rpx" height="84rpx" :text="btnText" bold :margin="['48rpx','auto']"
@click="readMore">
</fui-button>
</view>
1
2
3
4
5
6
7
2
3
4
5
6
7
export default {
data() {
return {
text: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！此外FirstUI准备打造其他版本框架，不仅仅局限于uni-app，目前考虑的有微信小程序原生版本、支付宝原生版本、Taro版本等。目前已上架的除uni-app外，微信小程序原生版本已于2022年02月正式上线。',
visible: false,
btnText: '点击查看所有内容'
}
},
methods: {
readMore() {
if (this.visible) {
this.visible = false
this.btnText = '点击查看所有内容'
} else {
this.visible = true
this.btnText = '点击隐藏内容'
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.fui-oh__wrap {
width: 100%;
padding: 24rpx 32rpx;
box-sizing: border-box;
background: #FFFFFF;
}
1
2
3
4
5
6
2
3
4
5
6
# Slots
注：Nvue端使用插槽时，文本及其他内容元素样式需在页面自行设置，属性设置失效
| 插槽名称 | 说明 |
|---|---|
| default | 显示内容，仅type=2时使用 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| text | String | 显示文本 | - | - |
| type | Number, String | 隐藏类型：1-文本超出设置行数截断隐藏 2-内容渐变隐藏 | 1 | - |
| rows | Number, String | 多少行开始隐藏，type=1时生效 | 1 | - |
| width | String | 内容区域宽度，设置如：100%，750rpx | 100% | nvue端不支持百分比，请使用rpx或px等单位 |
| height | String | 内容区域高度，type=2时生效且必传，设置值要低于实际内容高度 | auto | - |
| padding | Array | 内容区域padding值，type=2时生效 | ['0', '0'] | Nvue端不支持直接使用字符串，所以使用Array类型统一写法 |
| align V1.7.0+ | String | 文本对齐方式，可选值：left、center、right | left | - |
| background | String | 内容区域背景颜色 | transparent | - |
| size | Number, String | 文本字体大小，单位rpx | 32 | - |
| color | String | 文本字体颜色 | #333333 | - |
| fontWeight | Number, String | 文本内容字重 | normal | - |
| overflow | String | 隐藏内容显示方式，可选值：clip、ellipsis、string。type=1时生效 | ellipsis | - |
| gradientColor | String | 渐变颜色,与页面或内容区域背景色保持一致，type=2时生效 | #FFFFFF | - |
| visible | Boolean | 是否显示渐变隐藏内容，type=2时生效 | false | - |
| param | Number, String | 自定义参数，随点击事件返回 | 0 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击内容时触发 | { param:自定义参数 } |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。