白店小二:Vant UI中Toast的特殊使用

问题:
在使用Vant时,接口调用之后要给出成功或失败提示,我想着就用Toast做嘛,很简单。

但Vant的Toast样式就让我很头疼,带有图标的Toast,图标是在上方,提示文字在下方的,而我想要的是二者在同一条直线上,我查了下文档发现,并没有能定义图标位置的属性,只有一个定义消息框方向的。

如果仅仅只是调整一下方向也不是特别困难的事情,但Vant的Toast是独立在应用外的,就是它不在项目定义的APP下,它是和APP同级的,如图。在这里插入图片描述
这样就造成一个问题,没有办法修改Toast的样式了,因为要修改,就要去动最底层的CSS,结果就是可能所有的Toast样式都会改变,显然不能这样写。

那就很麻烦了,官网既没有给配置项,也没办法手动去改。

但我觉得Vant一定会考虑到这种情况,可能是哪个配置项能够解决我遇到的这种情况,我没有注意到。

于是我又再次去看了看官网文档的配置项,这次我注意到了!

解决方法:

虽然我们没有办法去修改它的图标位置,那就不使用它给定义的图标项了,我们自己写,Toast里有一个配置项为type,这个选项可以配置消息提示类型,有success,fail,loading,还有一项叫html

这代表着我

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值