weui 弹出 $.toast(“我是文本“,“text“)；总是带有图标

怼烎@ 2022-12-28 12:47 178阅读 0赞

在前段代码中引入 weui.css ，weuix.css 和js jquery-weui.min.js就可以使用weui的一些样式了

按照官方的文档中

$.toast("我是文本","text");

弹出的样式应该如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

但是我在实际中使用弹出的结果却是这个样子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

为什么

原因肯定是weui的样式和其他的样式冲突了

我们看看 $.toast 这一串代码：

t.toast=function(t,a,r)
       { "function"==typeof a&&(r=a);
         var o,s="weui-icon-success-no-circle",
          c=i.duration;
         "cancel"==a?(o="weui-toast_cancel",s="weui-icon-cancel"):"forbidden"==a?(o="weui-toast--forbidden",s="weui-icon-warn"):"text"==a?o="weui-toast--text":"number"==typeof a&&(c=a),
    e('<i class="'+s+' weui-icon_toast"></i><p class="weui-toast_content">'+(t||"已经完成")+"</p>",o),setTimeout(function(){n(r)},c)}

大概能看出来 cancel ，forbidden，text 这些都是一些选项，当选择而不同的时候，出现不同的样式

text 应该是没有图标，为什么有图标了

![2020121711145116.png][]

我在页面上设置100，来查看这个样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

可以看到的是图标来源于这一部分

我们选中 i 这个标签，看右侧使用的样式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

果然是其他的样式干扰的

如果我们引入的其他的css作用不大，我们可以找到直接删除了

或者将 important 删除了

![20201217113405860.png][]

最终结果:

![202012171134245.png][]

因为这次的样式调试用了很长的时间，特此记录

希望对你有所帮助

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20221120/c0421c51436947858b70fba7b1f39ce0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20221120/d9084aa6428b47d6bd268a3896bc02b4.png
[2020121711145116.png]: /images/20221120/e874072dd0dd4e5292332cfb57b5b796.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20221120/d09c851a43ef4ca8953492233a55ab38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201217111722405.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[20201217113405860.png]: https://img-blog.csdnimg.cn/20201217113405860.png
[202012171134245.png]: https://img-blog.csdnimg.cn/202012171134245.png