tebon_toast
v1.0.1
Published
通用toast组件
Downloads
2
Readme
# tebon_toast
通用toast组件。
安装
方式一：通过import方式引入
npm install tebon_toastimport toast from 'tebon_toast';
toast.show('网络出错了！');方式二：内联html文件
npm install tebon_toast
# 安装 raw-loader，要求版本号为 0.5.1 版本
npm install [email protected]在 html 文件内使用 <script> 标签内联引入
<script>${require('raw-loader!tebon_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属性的值。