今天学习
- 了解了{props.children}是能够展现子组件，而不用额外配置。
这有非常好的地方，那就是对比Vue的占位符，这个属性更简单，它只做一件事就是告诉组件，这里可以再嵌入组件。那么开发人员就能一层一层往下寻找
- 如何实现不用js显示控制“展开全文/收起”的功能
需求是
1.不能使用js，大部分网上都是计算高度。这是最没效率的。
2.少于或等于7行的时候不显示按钮
3.展开前如果内容超过七行，必须隐藏并显示省略号。
4.不能设置高度，因为会有少于7行的状态
解决办法
1.设置css-webkit-line-clamp: 7;并且设置固定行高45px;这样就能得知7行的高度是多少。
2.输出两份内容，第一份内容设为absolute。
3.第二份内容字体设置为白色，并且设置为css-webkit-line-clamp: 8;
4.将按钮放在第二份内容的底部，也就是第八行的位置。
.text{
overflow: hidden;
line-height: r(45);
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
background: #fff;
position: relative;
z-index: 101;
word-wrap: break-word;
white-space: pre-wrap;
color: #fff;
&:nth-of-type(1){
padding: r(20) r(35) 0;
position: absolute;
box-sizing: border-box;
width: 100%;
top: 0;
left: 0;
color: #353535;
}
&:nth-of-type(2){
-webkit-line-clamp: 8;
z-index: 100;
position: relative;
&:after{
content: "全文";
color: #576b95;
position: absolute;
width: 100%;
height: r(40);
//bottom: r(40);
bottom: 0;
right: 0;
text-align: right;
}
}
}
.more{
display: none;
line-height: r(40);
width: 100%;
color: #576b95;
text-align: right;
position: relative;
margin: r(-5) 0 0 0;
z-index: 102;
&:before{
content: "收起";
}
&:active{
color: #27334e;
}
}
&.showAll{
.text{
-webkit-line-clamp:1000;
}
.more{
display: block;
}
}
- 如何让React组件消失
最简单的办法就是让组件输出null
render() {
return(
this.state.show ? (
'输出的内容'
) : null
)
}
今日看法
1.【FIS3】百度的前端构建工具
百度技术只剩下完全不更新的编辑器了。谁还记得什么表格图形？
2.【Redux or Mobx】React两种数据工具
有人说写Vue的更适合Mobx，表格Redux算是真正的原配。在网上看了一些对比，虽然都站在Mobx一边。但我还是选择Redux，因为学习最全的是最好打基础的办法。
-
【央行约谈蚂蚁金服：明确宣传中不得使用无现金字眼】
image.png
官方说没有明令禁止。。。但是确实约谈了。原因是因为怕影响人民币流通。。。说大点，的确现金的流通更为重要的一点，但小的说，和无现金／不能使用现金没关系
感悟
新增歌单
1.《虽然我愿意》 伍家辉
又是一名唱的不错的歌手，但是毁在长相和没有特点。
- 《没什么, 只是有些话》陈零九
这人的freestyle有一点魔力，你完全不懂他是怎么从目前的音乐混战中还生存的
今天新发现
- 【反骨男孩】- 台湾YouTube团队
就是制作《台湾有嘻哈》的团队，制作上也是非常精良。风格上是非常的闹，而且瞎嗨的那种。
- 【howhow】 台湾YouTuber
很有趣的YouTuber，制作很精良，但人长得不讨喜
