组件库文档 tmui.design
显示更多 More
超过指定高度,默认隐藏更多内容。
🌶️ 显示更多 More 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app >
<tm-sheet>
<tm-text :font-size="24" _class="font-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="font-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 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
@change | 打开和隐藏时触发,返回当前打开的状态值。 |
🌽 slot插槽
属性名称 | 类型 | 数据 | 说明 |
---|---|---|---|
more | 自定义底部展开和收起更多的工具条 |
🥗 ref方法
无
贡献者
Mr.童