# Toast 吐司提示
# 介绍
某些行为触发的黑色半透明提示框,通常用在消息提示、操作结果等场景。
# 引入
在 main.js 中引入,详细介绍见快速上手。
# 使用
引入组件后,可以在Vue文件中使用
<vs-toast></vs-toast>
1
# 代码演示
# 文字提示
<vs-toast>这是一段提示语</vs-toast>
1
# 吐司尺寸
字符串类型,支持自己定制尺寸大小,有长length
和宽width
两个属性,默认为16*8(单位:px),通过绑定属性传入。
最小值:长度-16px,半径-8px。
<vs-toast :length="'40px'">长40px黑框</vs-toast>
<vs-toast :width="'24px'">宽24px黑框</vs-toast>
1
2
2
# 背景颜色
字符串类型,可定制提示框背景颜色。
<vs-toast :bgcolor="'black'">黑色背景</vs-toast>
1
# 文字颜色
同时可以根据需求自定义文字的颜色。
<vs-toast :color="'#fff'">白色文字</vs-toast>
1
# 透明程度
不能与背景颜色混用,否则失效。输入一个0~1之间的数字,实现背景透明度的调整。为1则完全不透明,为0完全透明。
<vs-toast :opacity="0">背景完全透明</vs-toast>
<vs-toast :opacity="0.5">背景半透明</vs-toast>
<vs-toast :opacity="1">背景完全不透明</vs-toast>
1
2
3
2
3
← Loading 加载 Tabbar 导航栏 →