组件库文档 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-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
|---|---|---|---|---|
| ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| followTheme | [Boolean,String] | true | 是否跟随主题，可选值：false,true |
| transprent | [Boolean,String] | false | 是否透明 |
| border | [Number,String] | 0 | |
| round | [Number,String] | 2 | 圆角 单位rpx |
| shadow | [Number] | 0 | 投影 |
| margin | ArrayasPropType<Array<number>> | ()=>[0,0] | 外间距，[x,y]x=左右，y=上下 |
| padding | ArrayasPropType<Array<number>> | ()=>[24,16] | 内间距，[x,y]x=左右，y=上下 |
| duration | Number | 2000 | 显示时长 |
| offset | ArrayasPropType<Array<number>> | ()=>[32,32]//x,y | 偏移量，[x,y]x=左右，y=上下 |
| placement | String | topLeft | 位置，可选值：topLeft/topRight/bottomLeft/bottomRight/top/bottom |
| label | String | "" | 展示的文字内容,注意：required:true,必传 |
| icon | String | tmicon-info-circle-fill | 自定义图标 |
🌹 事件
| 事件名 | 参数 | 返回数据 | 描述 |
|---|---|---|---|
| click | 无 | 事件参数e | 点击 |
| close | 无 | 无 | 关闭 |
🌽 slot插槽
默认default
🥗 ref方法
无
| 方法名 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| show | showOpts | 无 | 手动显示 |
| hide | 无 | 无 | 手动隐藏 |
showOpts格式如下：
ts
export interface showOpts{
label?:string,
icon?:string,
duration?:number,
color?:string
}