tebon_toast

# tebon_toast

通用toast组件。

Demo示例
前往GitLab

安装

方式一：通过import方式引入

npm install tebon_toast

import toast from 'tebon_toast';
toast.show('网络出错了！');

方式二：内联html文件

npm install tebon_toast
# 安装 raw-loader，要求版本号为 0.5.1 版本
npm install raw-loader@0.5.1

在 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属性的值。