个人知识点总结

1.文字渐变:
  background: linear-gradient(to bottom, #f0fcff, #a1e1f3);
  -webkit-background-clip: text;
  color: transparent;

2.上下滚动


  • aaaaaaaaaaaaaaaaaaaaa

  • bbbbbbbbbbbbbbbbbbbbb

  • ccccccccccccccccccccc

  • ddddddddddddddddddddd

  • eeeeeeeeeeeeeeeeeeeee

  • fffffffffffffffffffff

  • ggggggggggggggggggggg

  • hhhhhhhhhhhhhhhhhhhhh



js代码如下

3.css文本超出...
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:();
//
width: 200px !important;  //限制文本宽度
word-wrap: break-word;   //自动换行
word-break: break-all;    //自动换行(兼容字母)
overflow: hidden;       //超出隐藏
text-overflow: ellipsis;   //溢出显示省略号
display: -webkit-box;
-webkit-line-clamp: 3;   //显示3行
-webkit-box-orient: vertical;

4.首行缩进
p{ 
  text-indent: 2rem;
}

5.vue v-for循环里面点击当前元素点击显示和隐藏
msgShow(index){
    this.activeIndex = this.activeIndex === index ? !index : index;
}
https://segmentfault.com/q/1010000016290363

6.查当前时间
  mounted
      var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1<10? "0"+(date.getMonth() + 1):date.getMonth() + 1;
    var strDate = date.getDate()<10? "0" + date.getDate():date.getDate();
    var currentdate = date.getFullYear() + seperator1  + month  + seperator1  + strDate
            + " "  + date.getHours()  + seperator2  + date.getMinutes()
            + seperator2 + date.getSeconds();
  this.time =  currentdate

7.tab切换栏
https://segmentfault.com/a/1190000021702601

8.默认选中
    $("#q1").trigger("click")

9.存取数据
      citys: [],
      var time = ['一', '二', '三', '四', '五', '六', '日']
      var stime = this.temp.fieldOpenDate
      time.forEach((v) => {
        stime.forEach((a) => {
          if ((a === v)) {
            this.citys.push(a)
            return
          }
        })
      })
      this.temp.fieldOpenDate = this.citys.join(',')

10antv渐变组件 colorStops
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              normal: {
                barBorderRadius: 7,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#70a0fd",
                    },
                    {
                      offset: 1,
                      color: "#80bcfc",
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },

y轴刻度线
          line: {
                style: {
                    stroke: false,
                }
            },

排名
            axisLabel: {
              color: "#fff",
              formatter: function (value, index) {
                return [
                  "{lg|" + (index + 1) + "}" + "{title|" + value + "} ",
                ].join("\n");
              },
              rich: {
                lg: {
                  // backgroundColor: '#339911',
                  color: "#fff",
                  // borderRadius: 15,
                  fontSize: 8,
                  padding: 1,
                  align: "right",
                  width: 10,
                  height: 15,
                },
              },
            },

11.n种方式实现隔行变色
https://segmentfault.com/a/1190000022951733

12.

echarts
提示信息:{a}(系列名){b}(类目值){c}(数值)
模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数据名,数据值,百分比。{d}数据会根据value值计算百分比
          tooltip: {
          show: true,
          formatter: '{b}: {c}%'
        },

报错:Error in created hook: “Cannot read properties of undefined (reading ‘getAttribute‘)“
将调用echars的方法从created(){},放到mounted(){}里边

你可能感兴趣的:(html,css,前端,vue.js,javascript)