TMUI 3.1.09
键入关键记事 K

Appearance

On this page

组件库文档 tmui.design ​

全局提示 Message ​

消息提示弹出层，用于向用户反馈执行结果等场景。

🌶️ 全局提示 Message 示例 ​

查看模拟效果＋
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :fontSize="24" _class="text-weight-b" label="下面是一些其它属性,更多玩法请前往文档。"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row flex-wrap">
				<tm-button
					:margin="[12, 12]"
					@click="msg.show({ text: '默认默认默认默认默认默认默认默认默认默认默认' })"
					color="white"
					:width="120"
					:height="56"
					:fontSize="26"
					label="默认"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="msg.show({ model: 'error' })"
					color="red"
					:width="120"
					:height="56"
					:fontSize="26"
					label="错误"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="msg.show({ model: 'warn' })"
					color="orange"
					:width="120"
					:height="56"
					:fontSize="26"
					label="警告"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="msg.show({ model: 'quest' })"
					color="pink"
					:width="120"
					:height="56"
					:fontSize="26"
					label="疑问"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="msg.show({ model: 'success' })"
					color="green"
					:width="120"
					:height="56"
					:fontSize="26"
					label="成功"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="msg.show({ model: 'disabled' })"
					color="green"
					text
					:shadow="0"
					:width="120"
					:height="56"
					:fontSize="26"
					label="禁止"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="msg.show({ model: 'wait' })"
					color="black"
					:width="120"
					:height="56"
					:fontSize="26"
					label="等待"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="msg.show({ model: 'load' })"
					color="primary"
					:width="120"
					:height="56"
					:fontSize="26"
					label="加载中"
				></tm-button>
			</view>
		</tm-sheet>
		<tm-message ref="msg" :lines="2"></tm-message>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } 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 tmMessage from '@/tmui/components/tm-message/tm-message.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
const msg = ref<InstanceType<typeof tmMessage> | null>(null)
</script>

🌶️ 兼容性 ​

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数 ​

参数名类型默认值描述
maskBooleantrue是否显示遮罩
durationNumber1300自动关闭时,需要显示多久关闭（毫秒）
widthNumber300宽
heightNumber300高
linesNumber1文本内容显示的行数,最大5行

🌹 事件 ​

事件名参数返回数据描述
click

🌹 插槽 ​

名称参数返回数据描述
default替换中间的图标和文本内容

🥗 ref方法 ​

方法名参数返回值描述
showconfig:object显示,参数格式见下方
hide隐藏
ts
export type modelType = "load"|"error"|"info"|"warn"|"quest"|"success"|"disabled"|"wait"
export interface config {
	 duration?:number, //显示的时长
	 icon?:string, //显示的图标
	 text?:string, //显示的文本
	 color?:string, //显示的主题
	 dark?:boolean, //是否暗黑
	 model?:modelType ,//模式见上方modelType
	 mask?:boolean //是否显示黑色遮罩。
}

💏 文档贡献 ​

此页文档由Kyour贡献，如果对该框架感兴趣的可以参与我们一同进步！