Skip to content
On this page

组件库文档 tmui.design

警告提示 Alert

以横幅的形式显示提示内容,用于警告、通知、提示等场景。


🌶️ 警告提示 Alert 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-alert :shadow="2" :content="content" :height="80"></tm-alert>
		<tm-alert color="orange" linear="right" :content="content" :height="80"></tm-alert>
		<tm-alert color="pink" linearDeep="accent" linear="right" :content="content2" :height="140"></tm-alert>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="下面是一些其它属性,更多玩法请前往文档。"></tm-text>
		</tm-sheet>
		<tm-alert :content="content" text :height="80"></tm-alert>
		<tm-alert color="green" text :border="1" :content="content" :height="80"></tm-alert>
		<tm-alert color="blue" outlined border-style="dashed" :border="1" :content="content" :height="80"></tm-alert>
	</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 tmAlert from '@/tmui/components/tm-alert/tm-alert.vue'
const content = ref([
	{
		icon: 'tmicon-alert',
		content: '这是一条新闻这是一条新闻这是一条新闻这是一条新闻这是一条新闻这是一条新闻22这是一条新闻这是一条新闻这是一条新闻'
	}
])
const content2 = ref([
	{
		title: '我是标题',
		content: '我是介绍内容哦'
	}
])
</script>

🌶️ 兼容性

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

🌱 参数

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

参数名类型默认值描述
transprentBooleanfalse是否透明效果
borderNumber, String0边框粗细
roundNumber, String0圆角像素
marginArray[32, 24]外边距
paddingArray[32, 24]内边距
content[item][]主体内容数组(格式见下方说明)
autoPlayBooleantrue是否开启轮播(多个主体的情况有效)
durationNumber3000轮播间隔(毫秒)
closableBooleantrue是否显示关闭按钮
hidnAniNameStringzoom关闭窗体的动画
heightNumber160高度
maxLineNumber1内容最大显示几行,超出变成省略号
showDotv3.0.63+Booleanfalse是否显示底部的轮播数字序号,默认不显示
  • 主体内容数据参数
javascript
item {
    icon: string, //图标
    title: string, //标题
    content: string //内容
}

🌹 事件

事件名参数返回数据描述
clickitem,index点击事件

🥗 slot 插槽

right,右边区域图标插槽.

🥗 ref方法

💏 文档贡献

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