- 消息默认两种样式————成功、失败,支持自定义样式。
- 样式自定义支持更改背景颜色、字体大小、消息宽度,更改一次即可。
- 自定义默认样式(成功)后会直接覆盖成功样式,失败样式不更改。
-
customParams
参数中添加failure
属性,则可以更改失败样式。
直接通过 import
引入
import hqqzh from 'hqqzh-message'
传递的参数 params
类型
type contentParams = {
// 消息内容:必须填写
content: string | number
// 消息类型:成功 | 失败,可以不填写(默认成功)
type?: 'success' | 'failure'
// 显示时间:可以不填写(默认2000 ms)
time?: number
}
type customParams = {
// 消息宽度:数值(不带px),可以不填写(默认内容宽度)
width?: number
// 背景颜色:值为 16 进制颜色,可以不填写(默认样式)
background?: string
// 字体大小:数值(不带px),可以不填写(默认样式)
fontSize?: number
// 字体颜色:值为 16 进制颜色,可以不填写(默认样式)
fontColor?: string
// 是否更改失败样式:值为布尔值,可以不填写(更改默认样式)
failure?: boolean
}
import hqqzh from 'hqqzh-message'
// 更改默认样式(成功样式)
hqqzh.style({
background: '#0005',
fontSize: 24,
fontColor: '#f00'
})
// 更改失败样式
hqqzh.style({
background: '#00f5',
fontSize: 24,
fontColor: '#0f0',
failure: true
})
// 成功的消息提示
hqqzh.message({
content: '成功的消息提示'
})
// 失败的消息提示,更改显示时间
hqqzh.message({
content: '失败的消息提示',
type: 'failure',
time: 3000
})