使用 <font style="color:#CC0000">Vue Material</font> 的 <font style="color:#CC0000">Dialog</font> 做了一个弹出框，弹出框内动态绑定了几个数据，页面效果一出来
What the fuck? 马赛克？
<font style="color:#CC0000">Vue Material</font> 的组件肯定没问题，应该自己代码哪问题，先把官网提供的例子在项目中运行了一下，效果正常。然后加上项目效果代码，显示一个动态数据，字体之类的都变模糊了，看来动态绑定的数据会导致 < font style="color:#CC0000"> Dialog</font> 里面的内容变模糊，显示静态内容没问题。
样式问题对于职业前端选手来说不都是分分钟搞定的事情吗？
在 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; | |
} |
发现 <font style="color:#CC0000"> transform: translate (-50%,-50%); </font > 这行居中 css 代码会导致字体模糊，直接去掉居中效果没了，继续往下看
布局图里面显示出现了小数，<font style="color:#CC0000">Dialog</font > 显示清晰的效果里面都是整数值，查看 <font style="color:#CC0000">width</font> 属性设置，只有百分比形式，百分之五十可能 <font style="color:#CC0000">width</font> 属性为奇数导致出现小数，添加一行 <font style="color:#CC0000">width: 280px;</font> 试试，问题解决了。
# 总结
使用 <font style="color:#CC0000">transform </font > 后出现效果模糊的情况，先查看 <font style="color:#CC0000">width height</font> 属性是否为偶数
