Vue Steps步骤条渲染异常问题
Vue Steps步骤条渲染异常
我想创建一个步骤条,于是将Element官网步骤条代码拷贝到自己的项目中
显示结果:
页面渲染结果并没有想官网描述的那样
考虑了几种可能性
(Vue版本不同影响渲染,电脑盗版系统影响渲染,IDA盗版影响渲染,其他组件样式影响渲染),前三个太麻烦了(也太贵了),所有选择最简单(便宜)的一项来检查问题所在
新建了一个新组件
排除了其他组件样式的相互影响,运行
结果依然让人想锤作者!!
但作为一个有智慧的前端初学者,我还是打开了调试面板,哪里 bug 点哪里
可以看出这是点线分离的,这条步骤线没有问题,步骤描述文字没有问题,所以问题就出在步骤点上
查看步骤点的样式
遵循着哪里不爽点哪里的行规(哪个样式不懂点哪里),我把右边的样式勾勾一个个点没,终于。。。。
让我给找到了,虽然这样式我看不懂啥意思(没认真听讲),
但只要把它的属性值(不能该none,试了,没有)给改了就能正常显示了
于是重新测试display的其他属性值
最终发现flex值最合适
找到全局样式,添加一条样式
刷新页面重新渲染
样式已覆盖,显示无异常,完美
补充
如果你看到这,那恭喜你,我刚发现(勿喷)还有更简单的方法:
直接在el-steps标签上添加align-center属性,上面步骤都可以忽略,一步解决!
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
这篇文章主要介绍了vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下2020-11-11解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题
这篇文章主要为大家介绍了解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-06-06vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
制作一个折线图用于显示当前24小时的数据,并且可以通过拖动折现图设置数据,接下来通过本文给大家分享vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置),感兴趣的朋友跟随一起学习吧2019-04-04VUE项目启动没有问题但代码中script标签有蓝色波浪线标注
这篇文章主要给大家介绍了关于VUE项目启动没有问题但代码中script标签有蓝色波浪线标注的相关资料,文中将遇到的问题以及解决的方法介绍的非常详细,需要的朋友可以参考下2023-05-05
最新评论