Message 全局消息

常用于主动操作后的反馈提示。

基础用法

这几种样式：default、primary、danger、success、warning、info。

<template>
	<LiButton type="default" plain @click="handleClick">deafult</LiButton>
	<LiButton type="primary" plain @click="handleClick">primary</LiButton>
	<LiButton type="success" plain @click="handleClick">success</LiButton>
	<LiButton type="danger" plain @click="handleClick">danger</LiButton>
	<LiButton type="warning" plain @click="handleClick">warning</LiButton>
	<LiButton type="info" plain @click="handleClick">info</LiButton>
</template>
<script setup lang="ts">
	import { message } from "@licht-ui/components";

	const handleClick = (e: any) => {
		message({
			content: "我是一个消息提示",
			type: e.target.innerText,
		});
	};
</script>
<style scope lang="scss"></style>

退出时间

使用duration控制

<template>
	<LiButton type="default" plain @click="handleClick">500</LiButton>
	<LiButton type="info" plain @click="handleClick">1000</LiButton>
	<LiButton type="warning" plain @click="handleClick">2000</LiButton>
</template>
<script setup lang="ts">
	import { message } from "@licht-ui/components";

	const handleClick = (e: any) => {
		message({
			content: "我是一个消息提示",
			type: "primary",
			duration: e.target.innerText,
		});
	};
</script>
<style scope lang="scss"></style>

关闭按钮

使用closed控制

<template>
	<LiButton type="default" plain @click="handleClick">deafult</LiButton>
	<LiButton type="primary" plain @click="handleClick">primary</LiButton>
	<LiButton type="success" plain @click="handleClick">success</LiButton>
	<LiButton type="danger" plain @click="handleClick">danger</LiButton>
	<LiButton type="warning" plain @click="handleClick">warning</LiButton>
	<LiButton type="info" plain @click="handleClick">info</LiButton>
</template>
<script setup lang="ts">
	import { message } from "@licht-ui/components";

	const handleClick = (e: any) => {
		message({
			content: "我是一个消息提示",
			type: e.target.innerText,
			closed: true,
		});
	};
</script>
<style scope lang="scss"></style>

出现位置

使用location控制

<template>
	<LiButton type="default" plain @click="handleClick">left</LiButton>
	<LiButton type="info" plain @click="handleClick">center</LiButton>
	<LiButton type="warning" plain @click="handleClick">right</LiButton>
</template>
<script setup lang="ts">
	import { message } from "@licht-ui/components";

	const handleClick = (e: any) => {
		message({
			content: "我是一个消息提示",
			type: "primary",
			location: e.target.innerText,
		});
	};
</script>
<style scope lang="scss"></style>

message Attributes

参数	说明	类型	可选值	默认值
type	类型	string	default / primary / success / warning / info / danger	default
duration	退出时间	number		2000
closed	是否可以关闭	boolean		2000
location	位置	string	left / middle / right	2000