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

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

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

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

<!-- 加一层div -->
<el-tooltip
  effect="dark"
  :disabled="!kkk"
  content="暂时不能确认收货"
  placement="top"
>
  <div>
    <el-button type="primary" :disabled="kkk">确认收货</el-button>
  </div>
</el-tooltip>
<!-- 不加div -->
<el-tooltip
  effect="dark"
  :disabled="!kkk"
  content="暂时不能确认收货"
  placement="top"
>
  <el-button type="primary" :disabled="kkk">确认收货</el-button>
</el-tooltip>

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

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

方法一：数组的方式绑定class
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

方法二：三元表达式动态切换class
<div :class="[isActive ? activeClass : '', errorClass]"></div>

等等

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

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

思路：修改提示框的customClass

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

<style>
  .zZindex {
    z-index:3000 !important;
  }
</style>

参考链接：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

<el-table :data="verificationListDialog" @selection-change="handleSelectionChangeVerificationListDialog">
    <el-table-column type="selection" :selectable="checkSelectable" ></el-table-column>
    <el-table-column type="index" :label="$t('order.verificationDetailTable.number')"></el-table-column>
    <el-table-column prop="verificationNo" :label="$t('order.verificationDetailTable.orderNo')"></el-table-column>
</el-table>

封装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.子组件的方法
父组件
<Amend ref="amend" @submit="refresh"></Amend>
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 单选框：单个单选框实现点击选择，再点击取消？

解决方案：

<el-radio-group v-model="test">
    <el-radio label="Y" @click.native.prevent="testFun">测试</el-radio>
</el-radio-group>
方法上加了.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获取单击的是第几行和第几列？

解决方案：

<!--html-->
<el-table :cell-class-name="tableCellClassName" @cell-click="cellClick">
</el-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 id="testDiv">
    <div>第一个div。</div>
    <div>第二个div。</div>
    <div>第三个div。</div>
    <div>第四个div。</div>
</div>

<script>
$("#testDiv :nth-child(2n)").css({"height":"40px"})
</script>

参考链接：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) 批量图片下载器 （一款用于嗅探、分析网页图片并提供批量下载等功能的浏览器扩展程序）
• 密码生成器 （密码生成器可以随机生成任意位数的数字、字母、符号组合密码）
• 沙拉查词-聚合词典划词翻译 （支持复杂的划词翻译）
• 迅雷下载支持