tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
265
1.1m

消息条子节点 xSnackbarItem ​

预览

介绍 ​

xSnackbar内部子组件，不可引用。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-snackbar-item/x-snackbar-item.uvue

使用 ​

ts

<x-snackbar-item></x-snackbar-item>

Props 属性 ​

名称说明类型默认值
duration多少毫秒后销毁
number2500
keyIndex索引
number-1
content消息数据
注意，id一定要提供且是数字，可以随意，只要相对上一次变更下，就会触发
显示新的消息条。这种显示的方式就是避免你们引用ref方式来调用方法，相对更简单。
SNACKBAR_ITEM():SNACKBAR_ITEM=>({ background: "black", color: "white", fontSize: "14px", content: "", id: -1, icon: "" } as SNACKBAR_ITEM)

Events 事件 ​

名称参数说明
close-关闭事件

Slots 插槽 ​

名称说明数据

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/fankui/snackbar

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">消息条 Snackbar</x-text>
			<x-text color="#999999">
				位置可以在顶或者底，并且不需要ref函数来实现，我创新的通过使用变量id更改来发送新的消息条。
				消息条是无限累加在旧消息条的前面,并且现在支持6个方向的弹出.
			</x-text>
		</x-sheet>
		<x-snackbar position="top" :content="content"></x-snackbar>
		<x-sheet>
			<x-button :block="true" @click="randMsg">随机一条顶部消息</x-button>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">可以设置为横幅尺寸和自定样式</x-text>
		</x-sheet>
		<x-snackbar :block="true" :content="content2"></x-snackbar>
		<x-sheet>
			<x-button color="warn" :block="true" @click="randMsg2">随机一条底部消息</x-button>
		</x-sheet>
</template>

<script lang="uts" setup>
	import type { SNACKBAR_INFO } from '@/uni_modules/tmx-ui';
	const content = ref<SNACKBAR_INFO>({
		id: -1,//-1表示 不显示。
		content: ""
	})
	const content2 = ref<SNACKBAR_INFO>({
		id: -1,//-1表示 不显示。
		content: ""
	})
	const randMsg = () => {
		content.value = {
			id: content.value.id + 1,
			content: "测试标题" + content.value.id.toString()
		} as SNACKBAR_INFO
	}
	const randMsg2 = () => {
		content2.value = {
			id: content2.value.id + 1,
			content: "可以随意定义颜色可以随意定义颜色" + content2.value.id.toString(),
			background: 'red',
			icon: "close-circle-line"
		} as SNACKBAR_INFO
	}
</script>

<style lang="scss">

</style>
最近更新