Skip to content
On this page

组件库文档 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-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
heightNumber250超过指定高时隐藏并显示更多。
openLabelString'收起更多'展开时显示的文字
closeLabelString'展开更多'收起时显示的文字
beforeOpen[Function, Boolean]""在点击打开之前执行。如果返回false,将阻止查看内容。Function可以返回Promise

🌹 事件

事件名参数返回数据描述
@change打开和隐藏时触发,返回当前打开的状态值。

🌽 slot插槽

属性名称类型数据说明
more自定义底部展开和收起更多的工具条

🥗 ref方法

贡献者

Mr.童