常用知识整理

helloworld_28799839
• 阅读 291

Javascript

判断对象是否为空

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

经常使用的三元运算

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

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

Vue

在vue data里引入图片路径

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

强制刷新Vue组件

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

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

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

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

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

const timer = setInterval(()=>{

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

webstorm

ctrl+N查不到文件

原文链接

解决步骤:

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

Echarts

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

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

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

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

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

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

echarts让柱子不居中靠左显示

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

// 如果小于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
    }
  ]
}

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;

内容超出显示省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

其他

node_modules删除

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

npm install rimraf -g

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

rimraf node_modules




点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
凯特林 凯特林
1年前
开发中经常遇到的JavaScript问题整理
获取一个月有多少天今天遇到一个需求,已知月份,得到这个月的第一天和最后一天作为查询条件查范围内的数据newDate(year,month,date,hrs,min,sec),newDate可以接受这些参数创建一个时间对象其中当我们把date设置为0的时候,可以直接通过getDate()获取
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
thinkphp3.2.3模板渲染支持三元表达式
thinkphp3.2.3模板渲染支持三元表达式{$status?'正常':'错误'}{$info'status'?$info'msg':$info'error'}注意:三元运算符中暂时不支持点语法。如下:           <divclass"modalhidefade"id'myModa
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Stella981 Stella981
1年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
1年前
Oracle一张表中实现对一个字段不同值和总值的统计(多个count)
需求:统计WAIT\_ORDER表中的工单总数、未处理工单总数、已完成工单总数、未完成工单总数。表结构:为了举例子方便,WAIT\_ORDER表只有两个字段,分别是ID、STATUS,其中STATUS为工单的状态。1表示未处理,2表示已完成,3表示未完成总数。 SQL:  1.SELECT   2