组件库文档 tmui.design
显示更多 More
超过指定高度,默认隐藏更多内容。
🌶️ 显示更多 More 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
<tm-divider></tm-divider>
<tm-more>
<tm-text :label="text"></tm-text>
</tm-more>
<tm-divider></tm-divider>
<tm-text :font-size="24" _class="text-weight-b" label="下面是打开前的勾子,不允许查看"></tm-text>
<tm-divider></tm-divider>
<tm-more :beforeOpen="beforeOpen">
<tm-image :width="636" :height="120" src="https://picsum.photos/636/120"></tm-image>
<tm-text :label="text"></tm-text>
</tm-more>
</tm-sheet>
</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmMore from '@/tmui/components/tm-more/tm-more.vue'
const text =
'英国广播公司(BBC)24日再次“爆料”,称黑客从新疆警方电存数据,其中包括“存数据,其中包括“存数据,其中包括“存数据,其中包括“脑服务器中获取了大量缓存数据,其中包括“再教育中心”“囚犯”照片。该报道刚刚发出,美国国务院和英国外交部就一齐上阵,夸张地表示“震惊”和“愤慨”。不得不说,在编造涉疆谎言方面,美西方舆论和政客的相互配合,已经熟练到“肌肉记忆”的程度。'
function beforeOpen() {
uni.showLoading({ title: '...' })
return new Promise((res, rej) => {
setTimeout(function () {
uni.hideLoading()
rej()
uni.showToast({ title: '不允许阅读', icon: 'none' })
}, 1500)
})
}
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
height | Number | 250 | 超过指定高时隐藏并显示更多。 |
openLabel | String | '收起更多' | 展开时显示的文字 |
closeLabel | String | '展开更多' | 收起时显示的文字 |
beforeOpen | [Function, Boolean] | "" | 在点击打开之前执行。如果返回false,将阻止查看内容。Function可以返回Promise |
lightMaskColor | string[] | ['rgba(255, 255, 255, 1)','rgba(255, 255, 255, 0.7)'] | 亮系时的遮罩颜色(渐变) |
darkMaskColor | string[] | ['rgba(0, 0, 0, 1)','rgba(0, 0, 0, 0)'] | 暗系系时的遮罩颜色(渐变) |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
@change | 打开和隐藏时触发,返回当前打开的状态值。 |
🌽 slot插槽
属性名称 | 类型 | 数据 | 说明 |
---|---|---|---|
more | 自定义底部展开和收起更多的工具条 |
🥗 ref方法
无
贡献者
Mr.童