在前段代码中引入 weui.css ,weuix.css 和js jquery-weui.min.js就可以使用weui的一些样式了
按照官方的文档中
$.toast("我是文本","text");
弹出的样式应该如下:
但是我在实际中使用弹出的结果却是这个样子:
为什么
原因肯定是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 应该是没有图标,为什么有图标了
我在页面上设置100,来查看这个样式
可以看到的是图标来源于这一部分
我们选中 i 这个标签,看右侧使用的样式:
果然是其他的样式干扰的
如果我们引入的其他的css作用不大,我们可以找到直接删除了
或者将 important 删除了
最终结果:
因为这次的样式调试用了很长的时间,特此记录
希望对你有所帮助