Javascript

判断对象是否为空

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

经常使用的三元运算

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

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

Vue

在vue data里引入图片路径

1data(){
2  return {
3    testUrl: require('@/assets/image/test.png')
4  }
5}

或者

1import testUrl from "@/assets/images/test.png";
2data(){
3  return {
4    testUrl: testUrl
5  }
6}

强制刷新Vue组件

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

1<pie ref="pieChart" :key="PreKey"/>
2data(){
3  return{
4  	PreKey: 0
5  }
6}
7methods:{
8  search(){
9	this.PreKey++  // 关键代码 key变了之后,组件会强制刷新
10	this.$refs.pieChart.loadData()
11  }
12}

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

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

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

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

webstorm

ctrl+N查不到文件

原文链接

解决步骤:

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

Echarts

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

1xAxis: {
2  type: 'value',
3  interval: 20,
4  axisLine: {
5    show:true,
6  },
7  axisTick: {
8    show: false
9  }
10},
11yAxis: {
12  type: 'category',
13  axisTick: {
14    show: false
15  }
16}

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

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

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

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

echarts让柱子不居中靠左显示

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

1// 如果小于5根柱子的时候,动态添加5-X根柱子填充柱状图宽度或者高度,
2// 我这个图表是垂直柱状图,填充之后即使是一根柱子也会靠左(水平柱状图)或者靠上(垂直柱状图)显示
3if (dataLength < 5) {
4  for (let i = 0; i < 5 - dataLength; i++) {
5    barData.unshift({ value: '', itemStyle: { opacity: 0 } })
6    titleData.unshift({ value: '', itemStyle: { opacity: 0 } })
7  }
8}
9const option = {
10  series: [
11    {
12      // name: '2011',
13      type: 'bar',
14      barWidth: 22, // 定死柱子宽度,不然如果只有一根柱子,会很粗
15      barGap: 10,/*多个并排柱子设置柱子之间的间距*/
16      data: barData,
17      // 默认显示背景
18      showBackground: false,
19      backgroundStyle: {
20        color: 'rgba(180, 180, 180, 0.2)'
21      }
22    }
23  ]
24}
25// 切记,填充的空柱子鼠标划上的时候悬浮框也会有空内容显示,这里我们做个判断
26// 悬浮层的鼠标划上内容判断为空的时候不显示内容
27const option = {
28  tooltip: {
29    // 划过提示文字
30    trigger: 'axis',
31    // 划过背景
32    axisPointer: {
33      // 设为空，以防划过填充的空柱子显示内容
34      type: 'none'
35    },
36    formatter: (params) => {
37      let tipsBox
38      // 如果划过填充的空柱子，则不显示内容
39      if (params[0].value !== '') {
40        tipsBox = `<div style='color:#333; font-weight: 500'>${params[0].name}</div>
41              <div >${params[0].value}</div>`
42      } else {
43        tipsBox = ''
44      }
45      return tipsBox
46    }
47  },
48  yAxis: {
49    type: 'category',
50    // boundaryGap: [0, 0.01],
51    data: titleData,
52    position: position,
53    axisLine: {
54      show: false
55    },
56    // y轴显示文字
57    axisLabel: { show: true },
58    axisTick: { show: false }
59  },
60  series: [
61    {
62      type: 'bar',
63      barWidth: 22, // 定死柱子宽度,不然如果只有一根柱子,会很粗
64      // barGap: 10,/*多个并排柱子设置柱子之间的间距*/
65      data: barData,
66      // 默认显示背景
67      showBackground: false
68    }
69  ]
70}

CSS

css背景图写成绝对路径

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

css取消鼠标事件

1pointer-events: auto|none;

元素加动画效果

1transition: 0.3s;

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

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

内容超出显示省略号

1overflow: hidden;
2text-overflow:ellipsis;
3white-space: nowrap;

其他

node_modules删除

::: tip 因为node_modules的包文件非常多,删除起来非常的麻烦,而且有时候还会面临没有删除权限，所以建议用专门的包删除工具。 :::

1npm install rimraf -g
2

然后在项目根目录cmd命令行里执行以下命令删除文件数量庞大的依赖包

1rimraf node_modules

常用知识整理