TMUI 3.1.1
键入关键记事 K

Appearance

On this page

组件库文档 tmui.design ​

通知提醒 Notification ​

通知提醒,总共四个角和上下，6个位置的提醒,使用时请注意内容变动即可显示。如果想一开始不想显示，不要提供内容就行。

🌶️ 知提醒 Notification 示例 ​

查看模拟效果＋
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="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="show('topLeft')"
					color="white"
					:width="120"
					:height="56"
					:font-size="24"
					label="默认"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="show('topRight')"
					color="red"
					:width="120"
					:height="56"
					:font-size="24"
					label="显示右边"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="show('top')"
					color="orange"
					:width="120"
					:height="56"
					:font-size="24"
					label="显示上方"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="show('bottomLeft')"
					color="pink"
					:width="120"
					:height="56"
					:font-size="24"
					label="显示底左"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="show('bottomRight')"
					color="green"
					:width="120"
					:height="56"
					:font-size="24"
					label="显示底右"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="show('bottom')"
					color="green"
					text
					:shadow="0"
					:width="120"
					:height="56"
					:font-size="24"
					label="显示底部"
				></tm-button>
			</view>
		</tm-sheet>
		<tm-notification :placement="placement" ref="msg" label="消息提醒"></tm-notification>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick } 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 tmNotification from '@/tmui/components/tm-notification/tm-notification.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 tmNotification> | null>(null)
const placement = ref('topLeft')
function show(e) {
	placement.value = e
	nextTick(() => {
		msg.value?.show({ label: '呵呵' })
	})
}
</script>

🌶️ 兼容性 ​

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

🌱 参数 ​

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

参数名类型默认值描述
followTheme[Boolean,String]true是否跟随主题，可选值：false,true
transprent[Boolean,String]false是否透明
border[Number,String]0
round[Number,String]2圆角 单位rpx
shadow[Number]0投影
marginArrayasPropType<Array<number>>()=>[0,0]外间距，[x,y]x=左右，y=上下
paddingArrayasPropType<Array<number>>()=>[24,16]内间距，[x,y]x=左右，y=上下
durationNumber2000显示时长
offsetArrayasPropType<Array<number>>()=>[32,32]//x,y偏移量，[x,y]x=左右，y=上下
placementStringtopLeft位置，可选值：topLeft/topRight/bottomLeft/bottomRight/top/bottom
labelString""展示的文字内容,注意：required:true,必传
iconStringtmicon-info-circle-fill自定义图标

🌹 事件 ​

事件名参数返回数据描述
click无事件参数e点击
close无无关闭

🌽 slot插槽 ​

默认default

🥗 ref方法 ​

无

方法名参数返回值描述
showshowOpts无手动显示
hide无无手动隐藏

showOpts格式如下：

ts
export interface showOpts{
    label?:string,
    icon?:string,
	duration?:number,
	color?:string
}

💏 文档贡献 ​

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