【xianyuit】20170809

今天学习

1. 了解了{props.children}是能够展现子组件，而不用额外配置。

这有非常好的地方，那就是对比Vue的占位符，这个属性更简单，它只做一件事就是告诉组件，这里可以再嵌入组件。那么开发人员就能一层一层往下寻找

2. 如何实现不用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;
      }
    }

3. 如何让React组件消失

最简单的办法就是让组件输出null

 render() {
    return(
      this.state.show ? (
       '输出的内容'
        ) : null
    )
  }

今日看法

1.【FIS3】百度的前端构建工具

百度技术只剩下完全不更新的编辑器了。谁还记得什么表格图形？

2.【Redux or Mobx】React两种数据工具

有人说写Vue的更适合Mobx，表格Redux算是真正的原配。在网上看了一些对比，虽然都站在Mobx一边。但我还是选择Redux，因为学习最全的是最好打基础的办法。

3. 【央行约谈蚂蚁金服：明确宣传中不得使用无现金字眼】

   
   
   

   image.png

官方说没有明令禁止。。。但是确实约谈了。原因是因为怕影响人民币流通。。。说大点，的确现金的流通更为重要的一点，但小的说，和无现金／不能使用现金没关系

感悟

新增歌单

1.《虽然我愿意》 伍家辉

又是一名唱的不错的歌手，但是毁在长相和没有特点。

2. 《没什么, 只是有些话》陈零九

这人的freestyle有一点魔力，你完全不懂他是怎么从目前的音乐混战中还生存的

今天新发现

1. 【反骨男孩】- 台湾YouTube团队

就是制作《台湾有嘻哈》的团队，制作上也是非常精良。风格上是非常的闹，而且瞎嗨的那种。

2. 【howhow】 台湾YouTuber

很有趣的YouTuber，制作很精良，但人长得不讨喜

八卦