wil-toast
v1.0.1
Published
通用toast组件
Downloads
1
Readme
wil-toast
通用toast组件。
安装
方式一:通过import方式引入
npm install wil-toast
import toast from 'wil-toast';
toast.show('网络出错了!');
方式二:内联html文件
npm install wil-toast
# 安装 raw-loader,要求版本号为 0.5.1 版本
npm install [email protected]
在 html 文件内使用 <script> 标签内联引入
<script><%=require('raw-loader!wil-toast/dist/toast.min.js')%></script>
<script>
toast.show('网络出错了!');
</script>
由于此组件使用了document.body
方法,所以必须在<body>标签内引用此组件,否则会出现报错;,使用此方式引入组件。必须在最靠近 <body>
标签的位置使用 <script>
标签引入。
使用方式
/* 显示,1秒后隐藏,默认0.5秒 */
toast.show('hello', 1000);
/* 修改toast样式 */
toast.show('hello', 1000, { size: 20 });
/* 修改toast样式,支持不填写时间,默认0.5秒 */
toast.show('hello', {
size: 40,
color: 'white',
background: 'green'
})
API
toast.show(content[, showTime[, styleSet]]);
属性 | 类型 | 默认值 | 是否必填 | 说明
-|-|-|-|-|
content | String | 无 | 是 | toast显示的文本
showTime | Number | 500 | 否 | toast持续时间
styleSet | Object | 无 | 否 | toast消失之前采用的样式,具体设置项查看下方styelSet
styleSet 支持属性如下
属性 | 类型 | 默认值 | 是否必填 | 说明
-|-|-|-|-|
color | String | 无 | 否 | toast字体颜色
size | Number | 无 | 否 | toast字体大小,注意:不要带px单位,否则会导致字体设置失效!
background | String | 无 | 否 | toast背景,与size一样,传入的即为background属性的值。