组件库文档 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-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
transprent | Boolean | false | 是否透明效果 |
border | Number, String | 0 | 边框粗细 |
round | Number, String | 0 | 圆角像素 |
margin | Array | [32, 24] | 外边距 |
padding | Array | [32, 24] | 内边距 |
content | [item] | [] | 主体内容数组(格式见下方说明) |
autoPlay | Boolean | true | 是否开启轮播(多个主体的情况有效) |
duration | Number | 3000 | 轮播间隔(毫秒) |
closable | Boolean | true | 是否显示关闭按钮 |
hidnAniName | String | zoom | 关闭窗体的动画 |
height | Number | 160 | 高度 |
maxLine | Number | 1 | 内容最大显示几行,超出变成省略号 |
showDotv3.0.63+ | Boolean | false | 是否显示底部的轮播数字序号,默认不显示 |
- 主体内容数据参数
javascript
item {
icon: string, //图标
title: string, //标题
content: string //内容
}
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | item,index | 点击事件 |
🥗 slot 插槽
right,右边区域图标插槽.
🥗 ref方法
无
💏 文档贡献
此页文档由Kyour贡献,如果对该框架感兴趣的可以参与我们一同进步!