美文网首页
【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

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