给一个demo示例,使用uni-collapse组件,文字显示收起展示一行文字并显示省略号,展开展示省略号聂荣
时间: 2024-03-08 16:46:52 浏览: 84
好的,这里给您提供一个使用uni-app的demo示例:
1. 在需要使用收起展示组件的页面中,引入uni-collapse组件:
```
<template>
<view>
<uni-collapse :collapses="collapses" :limit="limit"></uni-collapse>
</view>
</template>
<script>
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
export default {
components: {
uniCollapse
},
data() {
return {
collapses: [
{
title: '这是一行文字,需要展示省略号',
content: '这是一行文字,需要展示省略号,这是一行文字,需要展示省略号,这是一行文字,需要展示省略号,这是一行文字,需要展示省略号,这是一行文字,需要展示省略号,这是一行文字,需要展示省略号,这是一行文字,需要展示省略号',
show: false
}
],
limit: 20
}
}
}
</script>
```
2. 在对应的样式文件中,添加以下样式:
```
.uni-collapse__content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```
以上代码中,我们通过uni-collapse组件的collapses属性,传入需要展示的内容,并设置show属性为false,表示默认不展开。同时,我们在data中设置了limit属性为20,表示在未展开状态下,只显示20个字符,后面的内容使用省略号代替。在样式文件中,我们对.uni-collapse__content元素进行了设置,让它在未展开状态下,只显示一行文字,并使用省略号代替。当用户点击展开按钮时,show属性变为true,内容展开显示。
阅读全文