美文网首页
【xianyuit】20170809

【xianyuit】20170809

作者: 陈式坚 | 来源:发表于2017-08-09 23:59 被阅读0次

今天学习

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

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

  1. 如何实现不用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;
      }
    }
  1. 如何让React组件消失

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

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

今日看法

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

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

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

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

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


    image.png

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

感悟

新增歌单

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

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

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

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

今天新发现

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

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

  1. 【howhow】 台湾YouTuber

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

八卦

相关文章

  • 【xianyuit】20170809

    今天学习 了解了{props.children}是能够展现子组件,而不用额外配置。 这有非常好的地方,那就是对比V...

  • 【xianyuit】20170817

    今天学习 1.【汕头】 大致在知乎上看了关于汕头的一些知识 今日看法 感悟 新增歌单 今天新发现 八卦

  • 【xianyuit】20170815

    今天学习 1.【DOM转CANVAS】 大致了解了canvas可以将dom转成图片,还有二维码生成 今日看法 感悟...

  • 【xianyuit】20170810

    今天学习 解决React && Webpack出现无法编译 npm install babel-preset-re...

  • 【xianyuit】20170808

    今天学习 学习了【Angular】文档初级搭建的教程。 为什么动物会吃自己的孩子 因为再控制剩下孩子的生存 今日看...

  • 【xianyuit】20170807

    今天学习 通过@嘉伟的介绍初步认识了React。 学习了AngularJS的初级教程。 大致了解到React是一种...

  • 【xianyuit】20170813

    今天学习 今日看法 感悟 1.【下雨天该不该叫外卖】 除非天气十分恶劣,可以叫。image.png 新增歌单 今天...

  • 【xianyuit】20170812

    今天学习 1.【世界70%的防弹衣都是中国制造】 从知乎上知道,中国在这方面的成就。同时也知道了这一切的不容易,还...

  • 【xianyuit】20170814

    今天学习 1.【冠豸山】 在厦门的动车线路上,位于连城县,根据网友留言,这座山头有很好的地理优势。很适合做山寨?!...

  • 【xianyuit】20170816

    今天学习 1.【小程序】 今天算是搞了很多关于小程序组件的东西,小程序开发真的麻烦。和真正前端框架还差了很远 今日...

网友评论

      本文标题:【xianyuit】20170809

      本文链接:https://www.haomeiwen.com/subject/xaozlxtx.html