个人碰到的前端问题总结及解决办法5

文章目录

1、echarts柱状图X轴底部文字有的不显示出来？

解决方法：

方法一：在axisLabel里加上（interval: 0）, //去除间隙刻度间隔为0

方法二：对底部文字进行旋转，即在axisLabel里加rotate旋转角度

方法三：通过axisLabel的formatter对文字长的进行省略显示

方法四：给option中加上dataZoom(滚动条)基本配置项

参考链接：

https://blog.csdn.net/XRT_knives/article/details/121539322

https://blog.csdn.net/qq_32963841/article/details/87873460

echarts柱状图数据过多，横坐标数据名称显示不全(问题篇)

https://blog.csdn.net/skyblue_afan/article/details/118993582

2、JS中JSON序列化JSON.stringify的坑点和处理

使用JSON.Stringify 转换的数据中，如果包含function，undefined，Symbol，这几种类型，不可枚举属性，JSON.Stringify序列化后，这个键值对会消失。
转换的数据中包含 NaN，Infinity 值（含-Infinity），JSON序列化后的结果会是null。
转换的数据中包含Date对象，JSON.Stringify序列化之后，会变成字符串。
转换的数据包含RegExp引用类型序列化之后会变成空对象。
无法序列化不可枚举属性。
无法序列化对象的循环引用，（例如: obj[key] = obj)。
无法序列化对象的原型链

参考链接：https://blog.csdn.net/jason_renyu/article/details/123640102

3、vue项目全局修改elementUI的$message默认显示时间的方法

//将下面代码插入main.js文件里
import { MessageBox,Message } from 'element-ui';
Vue.prototype.$message = function (msg) {
  Message(msg)
}
Vue.prototype.$message = function(msg){
  return Message({
    message:msg,
    duration:2000
  })

}
Vue.prototype.$message.success = function (msg) {
  return Message.success({
    message: msg,
    duration: 1500
  })
}
Vue.prototype.$message.warning = function (msg) {
  return Message.warning({
    message: msg,
    duration: 1000
  })
}

参考链接：https://blog.csdn.net/waillyer/article/details/111467362

4、如何将某一文字的下划线长度的改成居中显示，并且长度自己设置？

方法一：

//这里的margin设置和wedth宽度看个人需要自己调整
.head_line:after{
    content:’’;
    display:block;
    width:30px;
    border-bottom:2px solid #ff3700;
    margin: 0 auto;
}

方法二：

将文字的每一个字用span包裹起来，然后对span的底部边框进行样式设置

参考链接：https://blog.csdn.net/qq_43238599/article/details/84403517

https://blog.csdn.net/yaoqiuquan/article/details/84102293

https://blog.csdn.net/shangyanaf/article/details/119990054（text-decoration及其相关属性）

5、如何保证自己的html元素不会被挤变形？

解决方案：设置min-width样式

参考链接：

https://www.cnblogs.com/the-one/p/8410863.html

img标签导致图片变形

https://www.jianshu.com/p/9e8bc5cddbc2

6、单个input输入框，添加校验？

解决方案：在 el-form-item 上绑定error，然后对输入框的输入进行判断修改error绑定值即可

<div class="itemLabel"><span style=">年龄</span><span>:</span></div>
<el-form>
    <el-form-item :error="ageError">
        <el-input style="width: 60px" v-model="age @input="ageParValueChange()"></el-input>
    </el-form-item>
</el-form>

ageParValueChange() {
    this.age= this.age.replace(/\D/g, '');
    if(this.age<=0 || this.age>=150){
        this.ageError='年龄需大于0小于150
    }else{
        this.ageError=''
    }
}

参考链接：

https://blog.csdn.net/qq_45846359/article/details/114694598

7、html2canvas图片截图截不到图像的问题如何解决？

第一步：后端允许跨域
第二步：
html2canvas($("#test"), {
    useCORS: true, //加上这行代码
    backgroundColor:null,
}).then(canvas => {
    let imgUri = canvas.toDataURL("image/png").replace("image/png","image/octet-stream")
    console.log(imgUri);
})

参考链接：

https://blog.csdn.net/u013258556/article/details/90752890

8、elementui的table在IE浏览器下宽度不能100%显示？

解决方法：需要在表格样式添加宽度为100%样式

参考链接：

https://blog.csdn.net/qq_37875903/article/details/108705206

9、使用element中el-table动态增减表头列的时候出现抖动闪动的问题？

解决方案：在beforeUpdate()中使用doLayout方法

//'testTable'为表格的ref值
beforeUpdate() {
    this.$nextTick(() => {
        this.$refs.testTable.doLayout()
    }）
}

参考链接：

https://blog.csdn.net/my466879168/article/details/107150931

element切换tab时table的抖动问题

https://blog.csdn.net/Miss_Y0/article/details/126873199

10、vue v-for选取数组中的一部分？

解决方案：在div元素上直接使用数组slice方法截取,更方便些。

 <div class="conditionDiv" v-for="(item,index) in test.slice(1)"
 {{item}}
 </div>

参考链接：https://blog.csdn.net/stm870581942/article/details/112392034

11、vue proxy代理

参考链接：https://blog.csdn.net/marendu/article/details/103733286

12、element-ui的el-table表格实现无限滚动

//element给表格添加无限滚动
Vue.directive('loadmore', {
  bind(el, binding,vnode) {
    const selectWrap = el.querySelector('.el-table__body-wrapper')
    //无延时
    // selectWrap.addEventListener('scroll', function() {
    //   let sign = 10
    //   const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
    //   // console.log(scrollDistance)
    //   let that = vnode.context
    //
    //   if (scrollDistance <= sign) {
    //     // binding.value()
    //     that[binding.arg](binding.value)
    //   }
    // })
    let that = vnode.context
    binding.handler =debounce(function () {
      let sign = 10
        const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      if (scrollDistance <= sign) {
        that[binding.arg](binding.value)
      }
    }, 200)
    selectWrap.addEventListener('scroll', binding.handler)
  }
})
//防抖时延
const debounce = function (func, delay) {
  let timer = null
  return function () {
    if (timer) clearTimeout(timer)
    timer = null
    let self = this
    let args = arguments
    timer = setTimeout(() => {
      func.apply(self, args)
    }, delay)
  }
}

<el-table
   v-loadmore:loadTableData="index" 
   :data="tableData"
   ref="testTable">
</el-table>
//methods 方法  index 为参数，可更换其他名字
loadTableData(index){
     if(this.currentPage >= 20){
       this.nomore = true
     }else{
       this.currentPage++
     this.tableData.push({
       course_date: '2016-11-02',
       course_name: 'lis',
       course_type: '未发布'
     })
     }
}

参考链接：

https://blog.csdn.net/qq_38074535/article/details/104913340（简单版）

https://blog.csdn.net/qq_43437571/article/details/121864975

https://blog.csdn.net/baidu_27769027/article/details/101924676（下载插件方式）

https://blog.csdn.net/weixin_55560445/article/details/114419966 解决Element的 InfiniteScroll 无限滚动组件报错

https://segmentfault.com/q/1010000017138036 vue 自定义指令绑定一个函数并传参

13、如何删除未推送的git commit？

解决方案：

git reset –soft HEAD~1

参考链接：https://blog.csdn.net/asdfgh0077/article/details/103596340

14、javaScript中两个等于号和三个等于号之间的区别

==先转换类型再比较，===先判断类型，如果不是同一类型直接为false。

参考链接：https://www.cnblogs.com/kristain/articles/2095204.html

15、vue子组件实例上不能触发click事件？

**解决方案：**添加.native 后缀如：v-on:click.native=“test”

**原因：**由于nav-item为自定义组件的实例，使用on直接绑定事件只能绑定自定义的事件，即在组件内部使用emit(‘name’)的方式抛出的事件，如果在子组件实例上绑定原生的事件，需要使用.native的事件修饰符。因为button不是自定义组件，所以可以直接绑定原生事件

16、JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)

function isIE() { //ie?
 if (!!window.ActiveXObject || "ActiveXObject" in window)
  return true;
  else
  return false;
 }

参考链接：https://blog.csdn.net/weixin_45022563/article/details/122146549

17、解决nginx部署前端项目后刷新浏览器报错404的问题

location / {
     root /home/bonc_zj/app/viewApp;
     index  index.html;  
     # 添加响应头,no-cache:协商缓存,no-store:不缓存
    add_header  Cache-Control  max-age=no-cache;
     try_files $uri $uri/ /index.html;  #加这行代码，解决刷新404问题 
     # 主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件，因此需要rewrite到index.html中         
     if (!-e $request_filename) {
         rewrite ^(.*)$ /index.html?s=$1 last;
         break;
     }
 }

参考链接：https://blog.csdn.net/qq_36256590/article/details/120000939

18、vue手写实现 element message 消息提示组件？

element message消息提示是方法的方式触发：this.$message({});

本质上还是组件，故需要将组件转化为方法的方式来使用

最后将方法挂载到 Vue prototype 原型上，即可全局使用

//详情参考链接：如果有问题可以再来看我的
//在组件中没有props接收参数，那么如何给message组件传参，这就需要一个message.js文件去管理
import Vue from "vue";  // 引入vue，是因为会用到 Vue.extend() 方法
import customTip from '@/components/tip/index'

let MessageConstructor = Vue.extend(require('./index.vue').default); // 生产一个 message 组件实例
let instance;

// 改造Message ， 升级为可传递配置项
const CustomTip = (options = {})=>{
    instance = new MessageConstructor({
        data: options,  // data会传到 message.vue 组件中的data中，同理也可以使用 props传参，会一一对应，也就是说你可以同时传多个参数。
    });

    instance.vm = instance.$mount(); // 挂载但是并未插入dom，是一个完整的Vue实例
    //tip.vue里的提示我用的是element的dialog组件
    instance.vm.tipDialogVisible = true   //这里修改message.vue数据中的visible,这样message组件就显示出来
    //console.log(NoticeInstance.vm);
    instance.dom = instance.vm.$el    //获取到本实例的dom元素
    document.body.appendChild(instance.dom) // 将dom插入body
    return instance.vm
}
// export default  CustomTip;   这里为啥使用下面这个主要因为在axios的拦截js文件导入使用提示会报错，换成下面这个就好了，具体原因未知
export {
    CustomTip
};

参考链接：

https://blog.csdn.net/zlq_CSDN/article/details/104701729

https://blog.csdn.net/weixin_45031595/article/details/121123880

19、判断是否输入框输入的字符串是连续数字？

isOrderNumeric(numOrStr) {
    let flag = true;
    for (let i = 0; i < numOrStr.length; i++) {
        if (i > 0) {// 判断如123456

            let num = Number(numOrStr.charAt(i) + "");
            let num_ = Number(numOrStr.charAt(i - 1) + "") + 1;
            // console.log(num+' '+num_)
            if (num != num_) {
                flag = false;
                break;
            }
        }
    }
    if (!flag) {
        for (let i = 0; i < numOrStr.length; i++) {
            if (i > 0) {// 判断如654321
                let num = Number(numOrStr.charAt(i) + "");
                let num_ = Number(numOrStr.charAt(i - 1) + "") - 1;
                // console.log(num+' '+num_)
                if (num != num_) {
                    flag = false;
                    break;
                }else {
                    flag=true
                }
            }
        }
    }
    return flag;
}

20、如何使element的dialog去掉覆盖层、并可操作底层的按钮？

// 覆盖层元素增加可穿透点击事件
.el-dialog__wrapper {
  pointer-events: none;
}
//弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
.el-dialog {
  pointer-events: auto;
}

参考链接：https://blog.csdn.net/weixin_44379204/article/details/118162050

21、其他

1、SVN客户端(TortoiseSVN)安装及使用说明

https://blog.csdn.net/zhuocailing3390/article/details/123850367

下载地址：https://www.visualsvn.com/visualsvn/download/#tortoisesvn

2、解决Mixed Content: The page at ‘https://xxxx‘ was loaded over HTTPS…

https://blog.csdn.net/cczzyc1/article/details/97135143

3、Duplicate named routes definition: name重复

https://blog.csdn.net/weixin_47783830/article/details/110232268

4、router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead

asyncRoutes.forEach(res=>{
  router.addRoute(res);
})

https://blog.csdn.net/yi_zongjishi/article/details/126144212

5、vue中实现点击当前元素之外的元素之执行此方法

https://blog.csdn.net/zk86547462/article/details/108221067

https://blog.csdn.net/m0_37816134/article/details/106517775

6、前端如何确认后端接口是不是伪造的，正确的，主要是token验证和sign签名认证

token验证和sign签名认证有什么区别？

https://blog.csdn.net/weixin_38359571/article/details/102795008

https://blog.csdn.net/qq_28846707/article/details/109513865

前后端请求设置签名验证，提升接口安全

https://blog.csdn.net/lihefei_coder/article/details/111400917

https://bbs.csdn.net/topics/392037056

前后端分离 , 如何保证接口安全性？

https://blog.csdn.net/weixin_43088443/article/details/113046399

7、 npm 查看包的所有版本 npm view jquery versions

8、Sass:RGB颜色函数-Mix()函数

https://www.cnblogs.com/qjuly/p/9125219.html

9、js的15种循环遍历？

https://blog.csdn.net/qq_41899174/article/details/82797089

js中如何终止foreach循环

https://blog.csdn.net/qq_37899792/article/details/97117010

10、Vue中监听浏览器窗口关闭事件，并在窗口关闭进行操作

ps:

对于浏览器的直接关闭有时好使，有时又不好使，原因未知，对应窗口的直接关闭很好使

https://blog.csdn.net/qq_41547882/article/details/114304782

https://www.jianshu.com/p/021beaeee526

11、关于Vue引入组件后报错：Failed to mount component: template or render function not defined.

https://blog.csdn.net/FuyuumiAI/article/details/105312124

原文链接：https://blog.csdn.net/qq_41897351/article/details/127725345