优秀的手机网站标准,ai怎么做网页,网页制作免费网站建设,apache php 多个网站使用 Vue Material 的 Dialog 做了一个弹出框#xff0c;弹出框内动态绑定了几个数据#xff0c;页面效果一出来What the fuck? 马赛克#xff1f;Vue Material 的组件肯定没问题#xff0c;应该自己代码哪问题#xff0c;先把官网提供的例子在项目中运行了一下#xff…使用 Vue Material 的 Dialog 做了一个弹出框弹出框内动态绑定了几个数据页面效果一出来What the fuck? 马赛克Vue Material 的组件肯定没问题应该自己代码哪问题先把官网提供的例子在项目中运行了一下效果正常。然后加上项目效果代码显示一个动态数据字体之类的都变模糊了看来动态绑定的数据会导致 Dialog 里面的内容变模糊显示静态内容没问题。样式问题对于职业前端选手来说不都是分分钟搞定的事情吗在 Chrome-devtools 里查看一下 Dialog 元素的样式md-dialog {box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);min-width: 280px;max-width: 80%;max-height: 80%;margin: auto;display: flex;flex-flow: column;flex-direction: row;overflow: hidden;position: fixed;top: 50%;left: 50%;z-index: 11;border-radius: 2px;-webkit-backface-visibility: hidden;backface-visibility: hidden;pointer-events: auto;transform: translate(-50%,-50%);transform-origin: center center;transition: opacity .15s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1);will-change: opacity,transform,left,top;}发现 transform: translate(-50%,-50%); 这行居中css代码会导致字体模糊直接去掉居中效果没了继续往下看布局图里面显示出现了小数Dialog显示清晰的效果里面都是整数值查看 width 属性设置只有百分比形式百分之五十可能 width 属性为奇数导致出现小数添加一行 width: 280px; 试试问题解决了。总结使用 transform 后出现效果模糊的情况先查看 width height 属性是否为偶数
