常用知识整理

最新推荐文章于 2024-05-20 22:08:52 发布

不知名的前端专家

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量110

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/start1018/article/details/132456846

版权

Javascript

判断对象是否为空

Object.keys(myObject).length === 0

经常使用的三元运算

我们经常遇到处理表格列状态字段如 status 的时候可以用到

templet: function (d) {
    return d.status == 0 ? '禁用' : d.status == 1?'启用':d.status == 2?'已提交':'其他情况'
}

1
2
3

Vue

在vue data里引入图片路径

data(){
  return {
    testUrl: require('@/assets/image/test.png')
  }
}

1
2
3
4
5

或者

import testUrl from "@/assets/images/test.png";
data(){
  return {
    testUrl: testUrl
  }
}

1
2
3
4
5
6

强制刷新Vue组件

有时候数据更新的时候,例如搜索或者重置的场景,echarts图标不更新,主要是因为组件没更新，这个时候我需要强制刷新

<pie ref="pieChart" :key="PreKey"/>
data(){
  return{
  	PreKey: 0
  }
}
methods:{
  search(){
	this.PreKey++  // 关键代码 key变了之后,组件会强制刷新
	this.$refs.pieChart.loadData()
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

vue点击某一按钮手动触发另一个按钮的事件

this.$refs.test2.$el.click()

vue打开的弹框关闭的时候关闭组件里定义的定时器

const timer = setInterval(()=>{

},500)
// 通过$once来监听定时器,在beforeDestroy钩子函数内被清除
this.$once('hook:beforeDestroy', ()=>{
	clearInterval(timer)
})

1
2
3
4
5
6
7

webstorm

ctrl+N查不到文件

原文链接

解决步骤:

点击菜单找到Invalidate Caches / Restart…
Invalidate Caches / Restart
点击Invalidate and Restart并重启

Echarts

echarts去掉X轴和Y轴的刻度线

xAxis: {
  type: 'value',
  interval: 20,
  axisLine: {
    show:true,
  },
  axisTick: {
    show: false
  }
},
yAxis: {
  type: 'category',
  axisTick: {
    show: false
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

echarts解决点击柱子多次触发点击事件问题

// 解决多次触发点击事件
myChart.off('click')
myChart.on('click', function (param) {
  _this.$emit('openYearModal', param)
})
myChart.setOption(option, true)

1
2
3
4
5
6

垂直柱状图,用系统滚动条来显示柱子

myChart.resize({
    height: (40* dataArr.length) < 200?200:40* dataArr.length
})
myChart.setOption(option, true)

1
2
3
4

echarts让柱子不居中靠左显示

提示

有时候有一些场景需要我们的柱状图柱子就算只剩一根也不希望让它居中显示,要从左往右或者从上往下排列,可以填充一些空柱子解决这个问题

// 如果小于5根柱子的时候,动态添加5-X根柱子填充柱状图宽度或者高度,
// 我这个图表是垂直柱状图,填充之后即使是一根柱子也会靠左(水平柱状图)或者靠上(垂直柱状图)显示
if (dataLength < 5) {
  for (let i = 0; i < 5 - dataLength; i++) {
    barData.unshift({ value: '', itemStyle: { opacity: 0 } })
    titleData.unshift({ value: '', itemStyle: { opacity: 0 } })
  }
}
const option = {
  series: [
    {
      // name: '2011',
      type: 'bar',
      barWidth: 22, // 定死柱子宽度,不然如果只有一根柱子,会很粗
      barGap: 10,/*多个并排柱子设置柱子之间的间距*/
      data: barData,
      // 默认显示背景
      showBackground: false,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
}
// 切记,填充的空柱子鼠标划上的时候悬浮框也会有空内容显示,这里我们做个判断
// 悬浮层的鼠标划上内容判断为空的时候不显示内容
const option = {
  tooltip: {
    // 划过提示文字
    trigger: 'axis',
    // 划过背景
    axisPointer: {
      // 设为空，以防划过填充的空柱子显示内容
      type: 'none'
    },
    formatter: (params) => {
      let tipsBox
      // 如果划过填充的空柱子，则不显示内容
      if (params[0].value !== '') {
        tipsBox = `<div style='color:#333; font-weight: 500'>${params[0].name}</div>
              <div >${params[0].value}</div>`
      } else {
        tipsBox = ''
      }
      return tipsBox
    }
  },
  yAxis: {
    type: 'category',
    // boundaryGap: [0, 0.01],
    data: titleData,
    position: position,
    axisLine: {
      show: false
    },
    // y轴显示文字
    axisLabel: { show: true },
    axisTick: { show: false }
  },
  series: [
    {
      type: 'bar',
      barWidth: 22, // 定死柱子宽度,不然如果只有一根柱子,会很粗
      // barGap: 10,/*多个并排柱子设置柱子之间的间距*/
      data: barData,
      // 默认显示背景
      showBackground: false
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

CSS

css背景图写成绝对路径

background: url('~@/assets/images/test.png') no-repeat;

css取消鼠标事件

pointer-events: auto|none;

元素加动画效果

transition: 0.3s;

内容两行之后显示省略号效果

overflow: hidden;text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;