个人碰到的前端问题总结及解决方法2

个人碰到的前端问题总结及解决方法2

文章目录

  • 个人碰到的前端问题总结及解决方法2
      • 1、ElementUI如何禁用按钮的同时给出提示?
      • 2、vue如何动态给定class和style?
      • 3、vue+elementui--$message提示框被dialog遮罩层挡住问题?
      • 4、`this.$message is not a function`错误问题?
      • 5、element 表单重置?
      • 6、将数字转为中文,比如“123”,转为“壹贰叁”?
      • 7、Element table表格的多选按钮 设置不可勾选的方法?
      • 8、element样式问题
      • 9、Syntax Error: TypeError: token.type.endsWith is not a function
      • 10、asset size limit: The following asset(s) exceed the recommended size limit (244 KiB) (webpack压缩文件大小限制问题)
      • 11、Promise 使用axios库报500错误而前端未捕获到的解决方法?
      • 12、父子组件方法的互相调用?
      • 13、element表格根据数据量动态高度?
      • 14、element表格 右边滚动条遮挡最后一列
      • 15、重装系统后如何恢复前端编写环境?
      • 16、HTML标签textarea去除红色下划线?
      • 17、隐藏浏览器自带滚动条?
      • 18、element ui el-table在ie浏览器数据多时卡顿问题?
      • 19、element ui 单选框:单个单选框实现点击选择,再点击取消?
      • 20、element 表格悬浮颜色和选中背景色?
      • 21、element Table获取单击的是第几行和第几列?
      • 22、js和jquery获取div高度?
      • 23、一行两个div,一个固定宽度,一个自适应铺满?
      • 24、jquery中选择第n个孩子的选择器即nth-child选择器如何使用?
      • 25、flex布局: 一行显示固定个数,强制换行且均匀分布(超出的分布靠左)?
      • 其他
          • 1、字体转换
          • 2、给元素添加样式类
          • 3、blur失去焦点事件与其他按钮点击事件冲突的解决方法
          • 4、js比较字符相同,没有equals方法
          • 5、好用的终端工具 xshell SecureCRT MobaXterm
          • 6、数据库mysql8.0 开窗函数和聚合函数 行级锁和表级锁
          • 7、如果前端一次性接收后端10万条数据,如何解决
          • 8、tab切换 动态更改table数据不及时
          • 9、vue路由缓存的几种方式
          • 10、window.location对象(可不带 window 前缀书写)
          • 11、vue一些好用的插件
          • 12、edge浏览器好用的扩展插件

1、ElementUI如何禁用按钮的同时给出提示?

解决方案:在el-button的外层,再加上一个div包裹起来。



  
确认收货
确认收货

参考链接:https://blog.csdn.net/qq_34626094/article/details/121956245

2、vue如何动态给定class和style?

方法一:数组的方式绑定class
data: { activeClass: 'active', errorClass: 'text-danger' } 方法二:三元表达式动态切换class
等等

参考链接:https://blog.csdn.net/weixin_44251396/article/details/97390238

3、vue+elementui–$message提示框被dialog遮罩层挡住问题?

思路:修改提示框的customClass

解决方案:
this.$message({message:'这是一条消息提示',type:'success',customClass:'zZindex'});


参考链接:https://blog.csdn.net/u012138137/article/details/87182342

4、this.$message is not a function错误问题?

解决方案
方法1. this.$message is not a function错误解决
方法2. 把antd的引入删除,即可

参考链接:https://blog.csdn.net/qq_40608283/article/details/110392018

5、element 表单重置?

解决方案this.$refs[formName].resetFields();

参考链接:https://blog.csdn.net/qq_40608283/article/details/110392018

6、将数字转为中文,比如“123”,转为“壹贰叁”?

解决方案:
smallToBig(money) {
  //  将数字金额转换为大写金额
  var cnNums = new Array(
    "零",
    "壹",
    "贰",
    "叁",
    "肆",
    "伍",
    "陆",
    "柒",
    "捌",
    "玖"
  ); //汉字的数字
  var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
  var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
  var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
  var cnInteger = "整"; //整数金额时后面跟的字符
  var cnIntLast = "元"; //整数完以后的单位
  //最大处理的数字
  var maxNum = 999999999999999.9999;
  var integerNum; //金额整数部分
  var decimalNum; //金额小数部分
  //输出的中文金额字符串
  var chineseStr = "";
  var parts; //分离金额后用的数组,预定义
  if (money == "") {
    return "";
  }

  money = parseFloat(money);
  if (money >= maxNum) {
    //超出最大处理数字
    return "超出最大处理数字";
  }
  if (money == 0) {
    chineseStr = cnNums[0] + cnIntLast + cnInteger;
    return chineseStr;
  }

  //四舍五入保留两位小数,转换为字符串
  money = Math.round(money * 100).toString();
  integerNum = money.substr(0, money.length - 2);
  decimalNum = money.substr(money.length - 2);

  //获取整型部分转换
  if (parseInt(integerNum, 10) > 0) {
    var zeroCount = 0;
    var IntLen = integerNum.length;
    for (var i = 0; i < IntLen; i++) {
      var n = integerNum.substr(i, 1);
      var p = IntLen - i - 1;
      var q = p / 4;
      var m = p % 4;
      if (n == "0") {
        zeroCount++;
      } else {
        if (zeroCount > 0) {
          chineseStr += cnNums[0];
        }
        //归零
        zeroCount = 0;
        chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
      }
      if (m == 0 && zeroCount < 4) {
        chineseStr += cnIntUnits[q];
      }
    }
    chineseStr += cnIntLast;
  }
  //小数部分
  if (decimalNum != "") {
    var decLen = decimalNum.length;
    for (var i = 0; i < decLen; i++) {
      var n = decimalNum.substr(i, 1);
      if (n != "0") {
        chineseStr += cnNums[Number(n)] + cnDecUnits[i];
      }
    }
  }
  if (chineseStr == "") {
    chineseStr += cnNums[0] + cnIntLast + cnInteger;
  } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
    chineseStr += cnInteger;
  }
  return chineseStr;
}

参考链接:https://blog.csdn.net/ygkyufcl/article/details/107468557

7、Element table表格的多选按钮 设置不可勾选的方法?

解决方案:封装selectable


    
    
    

封装selectable方法
checkSelectable(row,index){ 
   let flag = true;
   if(row.verificationAmountRemain<=0){
     flag = false
   }
   return flag
 }

参考链接:https://blog.csdn.net/weixin_48228930/article/details/114090869

8、element样式问题

参考文档:https://juejin.cn/post/7011016159545786376

9、Syntax Error: TypeError: token.type.endsWith is not a function

解决方案
方法一:降低 babel-eslint 的版本
方法二:将 babel 升级到 v7 参考文档

参考方案:https://blog.csdn.net/qq_41011894/article/details/120793391

10、asset size limit: The following asset(s) exceed the recommended size limit (244 KiB) (webpack压缩文件大小限制问题)

解决方案:在webpack.config.js里加上下面代码

configureWebpack: config => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config["performance"] = {//打包文件大小配置
        "maxEntrypointSize": 100000000,
        "maxAssetSize": 300000000
      }
    }
  }

参考链接:
https://www.cnblogs.com/bbldhf/p/14327133.html
https://blog.csdn.net/pnjtvxcp/article/details/106075430

11、Promise 使用axios库报500错误而前端未捕获到的解决方法?

配置axios时要返回 return Promise.reject(new Error(error))

参考链接:https://www.cnblogs.com/yangtoude/p/promise-chain.html

12、父子组件方法的互相调用?

this.$emit 子调用父组件方法  
父组件 @changeCardData="toChangeCardData"
methods:{
    toChangeCardData:(val,val1){
        console.log(val,val1)
    }
}
子组件
changeType(val) {
  this.abilityType = val
  this.$emit('changeCardData', this.cardsymbol, this.abilityType)
}

this.$refs.子组件的ref.子组件的方法
父组件

alter(row) {
  // 调用子组件方法并传参,row为该行数据
  this.$refs.amend.show(row)
  console.log(row)
},
子组件
show(row) {
  // 将该行数据赋给表单
  this.ruleForm = row
  console.log(this.ruleForm)
  this.dialogVisible = true
},

13、element表格根据数据量动态高度?

解决方案: max-length属性 为 Table 设置一个最大高度,超过则出现滚动条。

14、element表格 右边滚动条遮挡最后一列

解决方案:

.el-table ::-webkit-scrollbar {
    width: 0px;
}

15、重装系统后如何恢复前端编写环境?

步骤:
1、安装程序编写软件 webstorm 破解

参考链接:https://www.exception.site/essay/idea-reset-eval

2、安装node.js 版本:v16.15.1 环境配置

参考链接:https://blog.csdn.net/chanyeolchichi/article/details/121348541

3、修改node.js https://www.cnblogs.com/himeka/p/16359626.html

参考链接:
更换源 https://www.cnblogs.com/netyts/p/14106759.html
赋权 https://blog.csdn.net/mys_mys/article/details/124799642

4、更换依赖包版本 node-sass

参考链接:https://www.cnblogs.com/huasonglin/p/14777752.html

5、【前端项目问题】Cannot read properties of null (reading ‘pickAlgorithm‘) > > >
清理缓存:npm cache clear --force

参考链接:https://blog.csdn.net/weixin_46318413/article/details/122986484

6、更换计算机执行策略 (脚本可能不能运行,例如npm-check 包管理工具)

参考链接:https://blog.csdn.net/weixin_37861326/article/details/104295379

7、最后发现node版本太新,导致node-sass安装不成功,或不匹配,然后卸载了node,下载了nvm(node version manager )即npm版本管理工具

参考链接:
nvm如何安装 https://www.jianshu.com/p/13c0b3ca7c71
nvm报错信息解决
https://blog.csdn.net/qq_44468012/article/details/122079210
https://www.jianshu.com/p/e6ac5f5fa421

8、webstorm插件下载

webstorm开发效率优化操作— 热更新、选项卡换行显示、自动换行

参考链接:
https://blog.csdn.net/xs20691718/article/details/107247645
https://blog.csdn.net/u010281877/article/details/111722817

16、HTML标签textarea去除红色下划线?

解决方案: spellcheck=false

参考链接:https://blog.csdn.net/qq_44408319/article/details/122244314

17、隐藏浏览器自带滚动条?

解决方案:

//谷歌与苹果自带浏览器
*::-webkit-scrollbar {
	display: none;
}
//火狐浏览器
* {
	scrollbar-width: none;
}
//IE 与微软浏览器
* {
	-ms-overflow-style: none;
}

参考链接:https://blog.csdn.net/weixin_44198965/article/details/116597473
其他:
javascript隐藏页面竖向滚动条 https://blog.csdn.net/qiguiting/article/details/40657401
滚动条样式 https://blog.csdn.net/qq_44624742/article/details/117694764

18、element ui el-table在ie浏览器数据多时卡顿问题?

解决方案:
1、升级elementUI到v2.8.0以上
2、避免使用表格中使用show-overflow-tooltip
3、在el-table或父元素上设置z-index,或调高z-index (针对ie)(调高z-index,请注意页面弹出框等元素z-index值要比el-table的大,不然会被遮挡)

参考链接:https://blog.csdn.net/weixin_52400118/article/details/112464017

19、element ui 单选框:单个单选框实现点击选择,再点击取消?

解决方案:


    测试

方法上加了.native 和 .prevent 后,样式会有些改变,添加以下css
.el-radio:focus:not(.is-focus):not(:active) {
  -webkit-box-shadow: 0 0 0px 0px #fff!important;
  box-shadow: 0 0 0px 0px #fff!important;
}

参考链接:https://blog.csdn.net/Gomeer/article/details/97369735

20、element 表格悬浮颜色和选中背景色?

解决方案:

//悬浮颜色
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #c6cfdf !important;
}

//选中背景色
https://blog.csdn.net/qq_43327305/article/details/116158638
highlight-current-row
.el-table__body tr.current-row > td{
    background-color: green !important;
  }

参考链接:https://blog.csdn.net/csdn_jy/article/details/88971258

21、element Table获取单击的是第几行和第几列?

解决方案:





//js
methods:{
    tableCellClassName({row, column, rowIndex, columnIndex}){
      //注意这里是解构
      //利用单元格的 className 的回调方法,给行列索引赋值
      row.index=rowIndex;
      column.index=columnIndex;
    },
    cellClick(row, column, cell, event){
      console.log(row.index);
      console.log(column.index);
    }
}

参考链接:https://blog.csdn.net/z591102/article/details/111386616

22、js和jquery获取div高度?

解决方案:

//js
document.getElementById('mochu').clientHeight
//jquery
$('#mochu').height()

参考链接:
https://blog.csdn.net/qq_33019839/article/details/102389114
https://www.jianshu.com/p/58c12245c2cc

23、一行两个div,一个固定宽度,一个自适应铺满?

解决方案:

  • 方法一: flex布局
  • 方法二: css的计算函数 width:calc(100%-200px);
  • 方法三:外边距法 margin-left:200px; /使用外边距推开/

参考链接:https://blog.csdn.net/qq_42205731/article/details/81670026

24、jquery中选择第n个孩子的选择器即nth-child选择器如何使用?

解决方案:

第一个div。
第二个div。
第三个div。
第四个div。

参考链接:https://blog.csdn.net/taiyb/article/details/40633275

25、flex布局: 一行显示固定个数,强制换行且均匀分布(超出的分布靠左)?

解决方案: width:calc((100% - testWidth) / 4

参考链接:https://blog.csdn.net/EnidChann/article/details/102725124

其他

moment 日期处理格式 、toFixed 四舍五入几位小数 、a标签提示 title属性、
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动

1、字体转换

https://blog.csdn.net/weixin_36213143/article/details/117805078

2、给元素添加样式类
let element=document.getElementById(self.checkedNames[i])              
var style = document.createElement("style");
document.getElementById(self.checkedNames[i]).appendChild(style);
let sheet = style.sheet;
sheet.addRule('.isJustEvaluated:after','color: green');  // 兼容IE浏览器
sheet.insertRule('.isJustEvaluated:after { color: green }', 0); // 支持非IE的现代浏览器
// element.setAttribute("class",element.getAttribute("class")+" "+"isJustEvaluated");
 console.log(element.getAttribute("class"))

https://blog.csdn.net/weixin_42888950/article/details/82287017

3、blur失去焦点事件与其他按钮点击事件冲突的解决方法

https://blog.csdn.net/jomes_wang/article/details/111628237
https://juejin.cn/post/6932871023373058056
https://blog.csdn.net/zttaiwx/article/details/53468449

4、js比较字符相同,没有equals方法

https://blog.csdn.net/qq_30979185/article/details/70159441

5、好用的终端工具 xshell SecureCRT MobaXterm

MobaXterm安装教程
https://blog.csdn.net/feizuiku0116/article/details/122746377
https://blog.csdn.net/qq_43264006/article/details/101265717
https://blog.csdn.net/qq_25889465/article/details/94554099

6、数据库mysql8.0 开窗函数和聚合函数 行级锁和表级锁

去IOE是阿里巴巴造出的概念。其本意是,在阿里巴巴的IT架构中,去掉IBM的小型机、Oracle数据库、EMC存储设备,代之以自己在开源软件基础上开发的系统。

去IOE百度百科 https://baike.baidu.com/item/%E5%8E%BBioe/16631112 常用数据库
http://c.biancheng.net/view/7109.html
去O:为什么这么难?https://tech.it168.com/a2020/1109/6386/000006386104.shtml
2019,为什么“去O” 势在必行? https://cloud.tencent.com/developer/article/1445120

7、如果前端一次性接收后端10万条数据,如何解决

解决方案: 分页查询渲染数据、根据滚动条划动到底部延迟加载渲染数据

8、tab切换 动态更改table数据不及时

解决方案:给table加动态key

9、vue路由缓存的几种方式

https://blog.csdn.net/liyunkun888/article/details/100537764

10、window.location对象(可不带 window 前缀书写)

一些例子:
window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议(http: 或 https:)
window.location.assign 加载新文档

https://blog.csdn.net/u011010220/article/details/114871948

window._CONFIG

https://blog.csdn.net/bbt953/article/details/124142910

11、vue一些好用的插件
  • 前端打印功能、js打印功能、vue打印功能、vue-print-nb 打印table,数据很多,打印不全
    vue-print-nb-jeecg 打印插件

https://blog.csdn.net/qq_45351419/article/details/111992506

  • tinymce:功能强大、所见即所得的富文本编辑器

http://tinymce.ax-z.cn/demos/demo-classic.php

  • clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中

clipboard使用总结
https://blog.csdn.net/qq_24147051/article/details/106908326

  • Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、
    vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。

https://www.itxst.com/vue-draggable/yvq3mifz.html 官网中文文档

  • vue-photo-preview 基于photoswipe的vue图片预览插件

https://826327700.github.io/vue-photo-preview/
https://blog.csdn.net/yaojie5519/article/details/103638275

  • vue-cropper是一个可以进行图片剪辑的插件,使用于vue

https://blog.csdn.net/aizenmoxiguan/article/details/121678780

  • Vue中 引入使用 vue-splitpane 实现窗格的拆分、调节

https://blog.csdn.net/ZYS10000/article/details/119429504
https://www.jianshu.com/p/14772f69fb55

  • 数字滚动插件 vue-countup-v2

https://blog.csdn.net/weixin_44948981/article/details/123544242

12、edge浏览器好用的扩展插件
  • AdGuard 广告拦截器
  • Convertio (万能格式转化器)
  • Tampermonkey (下载插件和管理插件工具)
  • Vue.js devtools (浏览器vue项目代码开发工具)
  • iTab新标签页 (自定义您的浏览器的标签页)
  • 万能网页复制 (一键破解网页文本复制限制)
  • 即时工具 (一款在线高效办公工具,拥有近300款工具)
  • 哔哩哔哩(Bilibili)播放器扩展 (为B站播放器提供快捷键以及调整默认状态的功能)
  • 图片助手(ImageAssistant) 批量图片下载器 (一款用于嗅探、分析网页图片并提供批量下载等功能的浏览器扩展程序)
  • 密码生成器 (密码生成器可以随机生成任意位数的数字、字母、符号组合密码)
  • 沙拉查词-聚合词典划词翻译 (支持复杂的划词翻译)
  • 迅雷下载支持

你可能感兴趣的:(个人工作碰到问题记录及解决办法,前端,vue.js,elementui)