最近写的组件样式小结
一 关于元素居中的问题
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);