最近写代码小结

最近写的组件样式小结

一 关于元素居中的问题

1不是绝对定位的：设置宽度，然后margin：auto。相信大家都知道。

2是绝对定位的，相对于父级如何居中？

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

小心不要忘记了最后的那一个。

背景图片样式设置

设置背景图片大小

background-size： 10px 10px;

设置背景图在容器中居中：center

background：url('img') no-repeat center;

遮罩弹出后，下层页面不在滚动

在弹出后，把body的overflow属性变成hidden，就不会滚动了，关闭遮罩的时候会不overflow为auto。

document.body.height = '100%'

document.body.style.overflow = 'hidden';

vue 同一个slot的多个使用解决办法

当在渲染默认slot 的内容时，

</slot></slot>

,如果在组件中使用多次，会警告，说重复使用相同的slot。

百度出来的解决方法，就是对slot进行深复制，然后在div标签里面渲染出来。并且使用的是vue实例的render方法。我试了之后发现没有用········后来我发现这样一个办法

在页面中

<div ref="slot" v-show="false"> <slot></slot> </div>

这个时候，你可以通过

vue.$refs.slot.innerHTML

获取到slot的html代码，然后你可以把代码生成元素，append到你想放置的地方。这样，就可以在多个地方渲染出和slot相同的dom了。

文字可选和文字不可选

user-select有 all /text/ none/element 属性。这里 all 和element都可以选择全部，但是all可以选父级以上， element能选本级内容。

鼠标样式

cursor： point

小手样式

图标角度的旋转

transform: rotate(45deg);