hqqzh-messages

2.2.0 • Public • Published

顶部消息提示(Vue + Ts)

消息提示样式

介绍

  1. 消息默认两种样式————成功、失败,支持自定义样式。
  2. 样式自定义支持更改背景颜色、字体大小、消息宽度,更改一次即可。
  3. 自定义默认样式(成功)后会直接覆盖成功样式,失败样式不更改。
  4. 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
})

Readme

Keywords

Package Sidebar

Install

npm i hqqzh-messages

Weekly Downloads

9

Version

2.2.0

License

ISC

Unpacked Size

8.07 kB

Total Files

4

Last publish

Collaborators

  • hqqzh