前端工作过程遇到的问题总结(九)

目录

JS中every()和some()的用法 

置换元素和非置换元素

ES6的map数据类型转换

关于原生方法增加参数的问题(element增加参数)

element-ui中的表格el-table滚动条样式修改

vue设置路由title,实现在vue路由发生变化的时候,相应的页面title随之变化

vue+element-ui+sortable.js实现表格行和列的拖拽

Element-ui之ElScrollBar组件滚动条的使用

Vue中结合ElementUI实现:限制输入框只能输入正整数

js判断对象是否为空对象的几种方法

vue+element表单验证(多重object嵌套)

table默认选中选中一行setCurrentRow(row)以及默认选中多行toggleRowSelection

element el-form如何避免打开模态框时就进行表单验证

vue-cli3 一直运行 /sockjs-node/info?t= 解决方案

vue-cli3 引入jquery

JavaScript数组的2种定义方式

vue操作dom元素的三种方法介绍和分析

vue项目element-ui框架中的弹窗中的表单验证清除问题

Vue项目本地服务器设置既能localhost访问又能手机IP访问

Module build failed (from ./node_modules/sass-loader/lib/loader.js)报错

vue项目中如何使用百度三方分享

vue-cli3跨域问题

vue页面浏览器判断

for-in循环和for-of循环区别

input 去掉默认边框和选中边框

vue项目(webpack+mintui),使用hbuilder打包app

js 代码检查配置eslint

使用element-ui table expand展开行实现手风琴效果

vue中点击空白处隐藏div的实现

textarea去掉右下角的条纹

元素点击出现蓝色边框swiper的按钮点击出现蓝色边框

video标签实现多个视频循环播放

this.$confirm里面使用await异步调取接口数据

input 输入事件防抖

组件中调用Vuex的state,getters,mutations,actions,modules的数据传递、传参问题

git cherry-pick 报错 fatal: bad object

Echarts相关文档

vue项目使用Export2Excel导出和导入Excel表格详细步骤

Vue中使用cdn加载资源

手摸手,带你优雅的使用 icon

Vue封装axios以及处理跨域问题

vue动态添加style样式


JS中every()和some()的用法 

every():

是对数组中每一项运行给定函数,如果该函数所有一项返回true,则返回true。一旦有一项不满足则返回flase

some():

是对数组中每一项运行给定函数,如果该函数满足任一项返回true,则返回true

用法:可以用在数据过滤或者数据判断

置换元素和非置换元素

转载原文章地址:HTML中的置换元素(替换元素)和非置换元素(不可替换元素)_eeeecw的博客-CSDN博客_置换元素什么是置换元素“置换元素”又叫做“替换元素”, 它们所具有的特征为:在不使用css修饰时,元素的标签和属性也会影响元素的显示。比如 标签,浏览器会根据src属性读取图片并显示,且图片大小会影响标签大小。再比如,input标签的type属性会影响input的显示是输入还是选择。最后,我们对置换元素有一个专业定义: 一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此https://blog.csdn.net/eeeecw/article/details/78970411

置换元素:

在不使用css修饰时,元素的标签和属性也会影响元素的显示

  • 比如img标签,浏览器回根据src属性读取图片并显示,且图片大小会影响标签大小
  • 再比如,input标签的type属性回影响input的显示时输入还是选择

对置换元素有一个专业定义:

一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素

常见的置换元素:

img
input
textarea
select
object
iframe
canvas

那么,除此之外的其他HTML元素就是非置换元素

非置换元素:

浏览器中的大多数元素都是不可置换元素,即其内容直接展示给浏览器。

例如

标签里的内容会被浏览器直接显示给用户

ES6的map数据类型转换

转载原文章地址:es6 javascript的map数据类型转换_现在学习也不晚-CSDN博客_map的数据类型(1) Map 转为数组前面已经提过, Map 转为数组最方便的方法, 就是使用扩展运算符(...)。let myMap = new Map().set(true, 7).set({ foo: 3}, ['abc']);[...myMap]// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ](2) 数组转为 Map将数组转入 Mahttps://blog.csdn.net/qq_30100043/article/details/53635612

  • Map转为数组
  1. Map转为数组最方便的方法,就是使用扩展运算符(...)
  2. Array.from()
  3. for...of循环将map循环添加到一个新数组中
  • 数组转为Map
  1. 将数组转入Map构造函数,就可以转为Map
  • Map转为对象
  1. 如果所有Map的键都是字符串,它可以转为对象
function strMapToObj(strMap) {
    let obj = Object.create(null);
    for (let [k, v] of strMap) {
        obj[k] = v;
    }
    return obj;
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToObj(myMap)
  • 对象转为Map
function objToStrMap(obj) {
    let strMap = new Map();
    for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
    }
    return strMap;
}
objToStrMap({
    yes: true,
    no: false
})
// [ [ 'yes', true ], [ 'no', false ] ]
  • Map转为JSON        
  1. Map转为JSON要区分两种情况。一种情况是Map的键名都是字符串,这时可以选择转为对象JSON
function strMapToJson(strMap) {
    return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

        2. 另一种情况是,Map的键名有非字符串,这时可以选择转为数组JSON

function mapToArrayJson(map) {
    return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({
    foo: 3
}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'
  • JSON转为Map
  1. JSON转为Map,正常情况下,所以键名都是字符串
function jsonToStrMap(jsonStr) {
    return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes":true,"no":false}')
// Map {'yes' => true, 'no' => false}

        2. 有一种特殊情况,整个JSON就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为Map

function jsonToMap(jsonStr) {
    return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

关于原生方法增加参数的问题(element增加参数)

转载原文章地址:关于原生方法增加参数的问题(element增加参数) - 简书vue原生的方法如果要传自定义的参数,会把原生的参数覆盖。这个时候,就需要$event来代替原生参数传参。官网方法 但是这个方法有局限性,比如element的upload的o...https://www.jianshu.com/p/282be970d4f8

vue原生的方法如果要传自定义的参数,会把原生的参数覆盖。这个时候,就需要$event来代替原生参数传参。

  • 官网方法:

但是这个方法有局限性,比如element的upload的on-change方法,有两个原生参数file和filesList,这时候如果想再传一个自定义的参数,用$event就不行了。查了好多方法,也想了好多。最后还是用到古老的jq时代的方法。通过function方法增加参数 的数量。

  • 具体实现方法是:
:on-change="(file, filesList) => handleImageChange(file, filesList, index)"

element-ui中的表格el-table滚动条样式修改

转载原文章地址:element-ui中的表格el-table滚动条样式修改_吴冬雪的博客-CSDN博客_element table 滚动条样式https://blog.csdn.net/qq_37548296/article/details/89475399ElementUI中表格el-table滚动条样式的优化_Lccccb的博客-CSDN博客_elementui table滚动条ElementUI官方文档提供的table表格的滚动条样式不美观,简单封装之后的效果图这里使用的是elementui中最基表格修改样式.slot::-webkit-scrollbar{ width: 2px;}.slot::-webkit-scrollbar-thumb{ border-radius: 2px; height: 50px; ...https://blog.csdn.net/Lccccb/article/details/89947167

element-ui table 滚动条变细_Wcharles666的博客-CSDN博客在全局样式中加入以下css,只对Google浏览器生效// 滚动条的宽度::-webkit-scrollbar {width: 8px;height: 8px;}// 滚动条的滑块::-webkit-scrollbar-thumb {background-color: #a1a3a9;border-radius: 4px;}...https://blog.csdn.net/Wcharles666/article/details/85340831

vue设置路由title,实现在vue路由发生变化的时候,相应的页面title随之变化

转载原文章地址:vue设置路由title,实现在vue路由发生变化的时候,相应的页面title随之变化_mousse_cake的博客-CSDN博客_vue 路由标题最近用vue来做一个项目,到结尾的时候发现一个问题:不管开的是哪个组件的路由地址,网页的title都是index.html里面的title。下面总结一下解决的办法:原先我使用的是document.title =to.meta.title来改变网页标题。我们使用Vue框架开发的应用是个单页面应用,里面用到的是路由的形式,并不像多页应用开发那样(下面附带区别)。所以想让网页的标题随着路由的改变...https://blog.csdn.net/mousse_cake/article/details/82665271

vue+element-ui+sortable.js实现表格行和列的拖拽

转载原文章地址:vue+element-ui+sortable.js实现表格行和列的拖拽 - 简书引入sortable.js的包: npm install sortable.js --save 调用sortable的函数代打示例如下https://www.jianshu.com/p/362f880d0bfd

Element-ui之ElScrollBar组件滚动条的使用

转载原文章地址:vue element隐藏组件滚动条scrollbar使用_小圣贤君的博客-CSDN博客_element scrollpc端项目中,有时候会在页面内部出现滚动条的情况,windows浏览器默认的滚动条是很丑的,尤其是当滚动天出现在页面内部的时候,这时候,为了页面美观,可以考虑优化滚动条样式。 vue Element UI官方文档上并没有放出滚动条相关的示例说明,但是实际上是有这么一个组件的,读者查看element源码,就可以查到这个组件scrollbar,至于为什么不放开这个组件就不得而知了。 效果图如ele...https://blog.csdn.net/zhongguohaoshaonian/article/details/79734787Element-ui之ElScrollBar组件滚动条的使用_前端江湖-CSDN博客_el-scrollbar在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。使用的原因: 原来是采用优化浏览器样式的方式,对滚动条进行样式调整。但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。.sidebar { position: fixed; border-right:...https://blog.csdn.net/zhouweihua138/article/details/80077311

在vue Element UI官方文档上没有放出滚动条相关的示例说明,但是实际上是有这么一个组件的,读者查看element源码,就可以查到这个组件scrollbar,至于为什么不放开这个组件就不得而知了。 

效果图如element官网所示:

前端工作过程遇到的问题总结(九)_第1张图片

使用:

将会出现滚动的内容放到上述标签内就可以了。 
这里要简单的设置一下,将标签的height设为100%,读者查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。

 
  
  1. .el-scrollbar__wrap {

  2. overflow-x: hidden;

  3. }

示例使用如下: 

Vue中结合ElementUI实现:限制输入框只能输入正整数

转载原文章地址:Vue中结合ElementUI实现:限制输入框只能输入正整数_磐石BedRock的博客-CSDN博客_element input 只能输入正整数Vue中结合ElementUI实现:限制输入框只能输入正整数input输入框中禁止输入小数和负数(*只允许输入正整数 *)        最近在做项目中碰见了这么个问题,需要输入数字,但是只能输入正整数,在网上找的没找到自己想要的,所以就自己想了两个办法,在这里跟大家分享一下。(因为是刚毕业,第https://blog.csdn.net/qq_38774121/article/details/83116967

js判断对象是否为空对象的几种方法

转载原文章地址:js判断对象是否为空对象的几种方法 - 星朝 - 博客园1.将json对象转化为json字符串,再判断该字符串是否为"{}" var data = {}; var b = (JSON.stringify(data) == "{https://www.cnblogs.com/jpfss/p/9105119.html

vue+element表单验证(多重object嵌套)

转载原文章地址:vue+element表单验证(多重object嵌套)_yytoo2的博客-CSDN博客_element表单验证嵌套element的表单验证用的是async-validator, 官方说明文档地址:https://github.com/yiminghe/async-validator;element官网对表单验证只有简单的几个例子这里记录下双层嵌套object数据的表单验证:1. data中数据如下:data(){ return{ ruleForm:{ human...https://blog.csdn.net/yytoo2/article/details/82626219

table默认选中选中一行setCurrentRow(row)以及默认选中多行toggleRowSelection

转载原文章地址:vue+element ui 学习笔记 【table篇】table默认选中选中一行setCurrentRow(row)以及默认选中多行toggleRowSelection(row,selected)_changjiufu的博客-CSDN博客_setcurrentrow序言根据工作的需求,需要实现两个table实现头行级联的功能,所有在调用vue实例对象后,页面挂载完后需要默认选中头的table,获取行数据的id来通过接口实现头行级联功能。干起来~~~~1 element ui-----table默认选中一行setCurrentRow(row)首先我们来看下官方文档:下边我们看下代码:<el-table highlight-c...https://blog.csdn.net/changjiufu/article/details/82426867element UI选中el-table的第一行_未兆的博客-CSDN博客_el-table 默认选中第一行业务需求默认选中表格的第一行https://blog.csdn.net/u013788943/article/details/94395703

element el-form如何避免打开模态框时就进行表单验证

转载原文章地址:

element el-form如何避免打开模态框时就进行表单验证_孟孟~的博客-CSDN博客在项目中,经常需要一些校验字段名是否存在的表单验证,比如新增修改用户时需要校验所填写的用户名是否已存在,避免出现重复的用户名。问题描述最近遇到一个奇怪的问题,在打开修改模态框未做任何修改时,就自动触发了一次校验,提示用户名已存在或者刚打开新增模态框未进行任何操作,就自动进行了校验,提示各个字段不能为空。解决办法通过查看element文档,发现el-form有一个属性设置此属性之后就解...https://blog.csdn.net/qq_37471721/article/details/98869106

vue-cli3 一直运行 /sockjs-node/info?t= 解决方案

转载原文章地址:

vue-cli3 一直运行 /sockjs-node/info?t= 解决方案 - 实现丰盛 - 博客园首先 sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 服务端:sockhttps://www.cnblogs.com/sichaoyun/p/10178080.html

vue-cli3 引入jquery

转载原文章地址:vue-cli3 引入jquery_一只皮皮璐的博客-CSDN博客_vue-cli 引入jquery本篇博客转载于https://juejin.im/entry/5b446efde51d45194e0b8985,写在这里只是用于记录。vue-cli3的所有的配置项都在vue.config.js的文件中进行配置,so步骤搞起来:第一步:安装jquery命令行工具,进入项目文件夹,执行:  npm install jquery --save第二步:确定安装成功提示安装成功后,在p...https://blog.csdn.net/weixin_39975379/article/details/87940256

JavaScript数组的2种定义方式

转载原文章地址:JavaScript数组的2种定义方式 - Luckily726 - 博客园JavaScript中没有数组类型,JavaScript中数组是以内置对象的形式存在的。 数组是存储多个值的集合(仓库)。 JS中定义数组的2种方式: 1、使用new Array()构造函数定义数组https://www.cnblogs.com/sherryStudy/p/array.html

vue操作dom元素的三种方法介绍和分析

转载原文章地址:vue操作dom元素的三种方法介绍和分析_一只前端小菜鸟-CSDN博客_vue操作dom相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue中怎么操作dom呢?以下是常用的三种方法:1、jQuery操作dom(推荐指数:★☆☆☆☆):只要拿jQuery的选择器,选中相应的dom进行操作就可以了,但是大家都知道jQuery获取元...https://blog.csdn.net/qq_43363884/article/details/88285332

vue项目element-ui框架中的弹窗中的表单验证清除问题

转载原文章地址:vue项目element-ui框架中的弹窗中的表单验证清除问题_瞎转悠达的博客-CSDN博客vue项目element-ui框架中的弹窗中的表单验证清除问题问题回顾:1、vue项目的在弹窗上的form表单验证,第一次点击新增时正常,第二次新增打开弹窗后由于表单内容为空,出现验证这种情况2、为了解决上面的情况,在执行点击新增事件加上this.$refs[formName].resetFields()或者this.$refs[fo...https://blog.csdn.net/qq_35859392/article/details/89729481

Vue项目本地服务器设置既能localhost访问又能手机IP访问

转载原文章地址:Vue——Vue项目本地服务器设置既能localhost访问又能手机IP访问_小欣儿的专栏-CSDN博客_vue本地服务器原文链接:vue项目本地服务器设置既能localhost访问又能手机ip访问在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来。 我们在浏览器里输入localhost:8080就可以访问该项目了。但是要是手机想访问的话,就得通过ip地址,但当我输入ip地址进行访问时,却发现不行。于是我找项目的配置文件,发现...https://blog.csdn.net/u012230055/article/details/82152111

Module build failed (from ./node_modules/sass-loader/lib/loader.js)报错

转载原文章地址:Module build failed (from ./node_modules/sass-loader/lib/loader.js):_PHP学习手记-CSDN博客现在线上的vue项目代码修改了,svn更新后,在windows下输入命令:npm run dev 报错,windows下的报错已经解决,没有截图了,这个是linux下的截图,基本报错都是差不多的,如下图:这个是因为node-sass没安装好,所以要重新安装windows下运行命令:npm install node-sass --registry=https://registry.npm.ta...https://blog.csdn.net/man8023man/article/details/95590474

vue项目中如何使用百度三方分享

转载原文章地址:vue项目中如何使用百度三方分享_a5252145的博客-CSDN博客_vue 中使用百度分享百度三方分享今天项目中用到分享功能,正好是vue项目,本来想着在网上找下操作教程,结果找了半天,发现也没几个能用的,还一个比一个能吹,步骤没一点思绪,就一气之下自己着手摸索出来一个,还没写样式,但功能已经能用了。效果图如下:步骤在百度分享官网下载代码:http://share.baidu.com/,如下:(我这里用的是图标式,一般选择浮窗式,因为浮窗式只有js,不用加载html)下...https://blog.csdn.net/a5252145/article/details/85126398

vue-cli3跨域问题

转载原文章地址:vue-cli3跨域问题(已解决)_一只狂躁的兔子的博客-CSDN博客_vuecli3跨域配置无效在vue cli3项目中没有config文件,没有index.js文件,如何解决跨域问题?其实很简单,是我想的太复杂了,只需要在vue项目的根目录下新建一个vue.config.js的文件(vue默认识别这个文件),在文件中配置跨域信息就行了,代码如下:// vue.config.js 配置说明//官方vue.config.js 参考文档 https://cli.vuejs.org/z...https://blog.csdn.net/qq_38337245/article/details/96112548

vue页面浏览器判断

转载原文章地址:https://segmentfault.com/q/1010000014484082https://segmentfault.com/q/1010000014484082

for-in循环和for-of循环区别

转载原文章地址:for-in循环和for-of循环区别_jd_gracias的博客-CSDN博客_for循环in和of的区别for~in语句用于遍历对象,而for~of语句用于遍历数组,但这不是必须的,只是这样操作比较方便。1.遍历数组For-in循环var arr=[1,2,3,4,5,6,7] //申明一个数组for(var x in arr){ document.write("arr["+x+"]="+arr[x] + " "); //x为数组的下标}For-of循环var a...https://blog.csdn.net/weixin_37858031/article/details/89574471

input 去掉默认边框和选中边框

input{

      border:0;/*去掉未选中状态边框*/

     outline:none;/*去掉选中状态边框*/

     background-color:rgba(0,0,0,0);/*透明背景*/

}

vue项目(webpack+mintui),使用hbuilder打包app

转载原文章地址:vue项目(webpack+mintui),使用hbuilder打包app - 小Ling的博客 - 博客园一、配置config/index.js 本人没有配置index.js文件,就开始进行了打包,结果最终效果是页面空白,解决了空白,接着底部图标(我是用的阿里巴巴图片)资源找不到。所以配置这步比较重要。https://www.cnblogs.com/feng-xl/p/9183212.html

js 代码检查配置eslint

转载原文章地址:js 代码检查配置eslint - 简书.eslintrc.js 文件中 附:关闭vue-cli3 代码检查:vue.config.js中(没有可在项目根目录下创建):https://www.jianshu.com/p/3904768140d2.eslintrc.js 文件中


    "no-alert": 0,//禁止使用alert confirm prompt
    "no-array-constructor": 2,//禁止使用数组构造器
    "no-bitwise": 0,//禁止使用按位运算符
    "no-caller": 1,//禁止使用arguments.caller或arguments.callee
    "no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
    "no-class-assign": 2,//禁止给类赋值
    "no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
    "no-console": 2,//禁止使用console
    "no-const-assign": 2,//禁止修改const声明的变量
    "no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
    "no-continue": 0,//禁止使用continue
    "no-control-regex": 2,//禁止在正则表达式中使用控制字符
    "no-debugger": 2,//禁止使用debugger
    "no-delete-var": 2,//不能对var声明的变量使用delete操作符
    "no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
    "no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
    "no-dupe-args": 2,//函数参数不能重复
    "no-duplicate-case": 2,//switch中的case标签不能重复
    "no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
    "no-empty": 2,//块语句中的内容不能为空
    "no-empty-character-class": 2,//正则表达式中的[]内容不能为空
    "no-labels": 2,//禁止使用空label
    "no-eq-null": 2,//禁止对null使用==或!=运算符
    "no-eval": 1,//禁止使用eval
    "no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
    "no-extend-native": 2,//禁止扩展native对象
    "no-extra-bind": 2,//禁止不必要的函数绑定
    "no-extra-boolean-cast": 2,//禁止不必要的bool转换
    "no-extra-parens": 2,//禁止非必要的括号
    "no-extra-semi": 2,//禁止多余的冒号
    "no-fallthrough": 1,//禁止switch穿透
    "no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
    "no-func-assign": 2,//禁止重复的函数声明
    "no-implicit-coercion": 1,//禁止隐式转换
    "no-implied-eval": 2,//禁止使用隐式eval
    "no-inline-comments": 0,//禁止行内备注
    "no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明(变量或函数)
    "no-invalid-regexp": 2,//禁止无效的正则表达式
    "no-invalid-this": 2,//禁止无效的this,只能用在构造器,类,对象字面量
    "no-irregular-whitespace": 2,//不能有不规则的空格
    "no-iterator": 2,//禁止使用__iterator__ 属性
    "no-label-var": 2,//label名不能与var声明的变量名相同
    "no-labels": 2,//禁止标签声明
    "no-lone-blocks": 2,//禁止不必要的嵌套块
    "no-lonely-if": 2,//禁止else语句内只有if语句
    "no-loop-func": 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
    "no-mixed-requires": [0, false],//声明时不能混用声明类型
    "no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
    "linebreak-style": [0, "windows"],//换行风格
    "no-multi-spaces": 1,//不能用多余的空格
    "no-multi-str": 2,//字符串不能用\换行
    "no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
    "no-native-reassign": 2,//不能重写native对象
    "no-negated-in-lhs": 2,//in 操作符的左边不能有!
    "no-nested-ternary": 0,//禁止使用嵌套的三目运算
    "no-new": 1,//禁止在使用new构造一个实例后不赋值
    "no-new-func": 1,//禁止使用new Function
    "no-new-object": 2,//禁止使用new Object()
    "no-new-require": 2,//禁止使用new require
    "no-new-wrappers": 2,//禁止使用new创建包装实例,new String new Boolean new Number
    "no-obj-calls": 2,//不能调用内置的全局对象,比如Math() JSON()
    "no-octal": 2,//禁止使用八进制数字
    "no-octal-escape": 2,//禁止使用八进制转义序列
    "no-param-reassign": 2,//禁止给参数重新赋值
    "no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
    "no-plusplus": 0,//禁止使用++,--
    "no-process-env": 0,//禁止使用process.env
    "no-process-exit": 0,//禁止使用process.exit()
    "no-proto": 2,//禁止使用__proto__属性
    "no-redeclare": 2,//禁止重复声明变量
    "no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
    "no-restricted-modules": 0,//如果禁用了指定模块,使用就会报错
    "no-return-assign": 1,//return 语句中不能有赋值表达式
    "no-script-url": 0,//禁止使用javascript:void(0)
    "no-self-compare": 2,//不能比较自身
    "no-sequences": 0,//禁止使用逗号运算符
    "no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
    "no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
    "no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
    "no-sparse-arrays": 2,//禁止稀疏数组, [1,,2]
    "no-sync": 0,//nodejs 禁止同步方法
    "no-ternary": 0,//禁止使用三目运算符
    "no-trailing-spaces": 1,//一行结束后面不要有空格
    "no-this-before-super": 0,//在调用super()之前不能使用this或super
    "no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
    "no-undef": 1,//不能有未定义的变量
    "no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
    "no-undefined": 2,//不能使用undefined
    "no-unexpected-multiline": 2,//避免多行表达式
    "no-underscore-dangle": 1,//标识符不能以_开头或结尾
    "no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
    "no-unreachable": 2,//不能有无法执行的代码
    "no-unused-expressions": 2,//禁止无用的表达式
    "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
    "no-use-before-define": 2,//未定义前不能使用
    "no-useless-call": 2,//禁止不必要的call和apply
    "no-void": 2,//禁用void操作符
    "no-var": 0,//禁用var,用let和const代替
    "no-warning-comments":0,//允许有警告备注
    "no-with": 2,//禁用with

    "array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
    "arrow-parens": 0,//箭头函数用小括号括起来
    "arrow-spacing": 0,//=>的前/后括号
    "accessor-pairs": 0,//在对象中使用getter/setter
    "block-scoped-var": 0,//块语句中使用var
    "brace-style": [1, "1tbs"],//大括号风格
    "callback-return": 1,//避免多次调用回调什么的
    "camelcase": 2,//强制驼峰法命名
    "comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
    "comma-spacing": 0,//逗号前后的空格
    "comma-style": [2, "last"],//逗号风格,换行时在行首还是行尾
    "complexity": [0, 11],//循环复杂度
    "computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
    "consistent-return": 0,//return 后面是否允许省略
    "consistent-this": [2, "that"],//this别名
    "constructor-super": 0,//非派生类不能调用super,派生类必须调用super
    "curly": [2, "all"],//必须使用 if(){} 中的{}
    "default-case": 2,//switch语句最后必须有default
    "dot-location": 0,//对象访问符的位置,换行的时候在行首还是行尾
    "dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
    "eol-last": 0,//文件以单一的换行符结束
    "eqeqeq": 2,//必须使用全等
    "func-names": 0,//函数表达式必须有名字
    "func-style": [0, "declaration"],//函数风格,规定只能使用函数声明/函数表达式
    "generator-star-spacing": 0,//生成器函数*的前后空格
    "guard-for-in": 0,//for in循环要用if语句过滤
    "handle-callback-err": 0,//nodejs 处理错误
    "id-length": 0,//变量名长度
    "indent": [2, 4],//缩进风格
    "init-declarations": 0,//声明时必须赋初值
    "key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
    "lines-around-comment": 0,//行前/行后备注
    "max-depth": [0, 4],//嵌套块深度
    "max-len": [0, 80, 4],//字符串最大长度
    "max-nested-callbacks": [0, 2],//回调嵌套深度
    "max-params": [0, 3],//函数最多只能有3个参数
    "max-statements": [0, 10],//函数内最多有几个声明
    "new-cap": 2,//函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用
    "new-parens": 2,//new时必须加小括号
    "newline-after-var": 2,//变量声明后是否需要空一行
    "object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
    "object-shorthand": 0,//强制对象字面量缩写语法
    "one-var": 1,//连续声明
    "operator-assignment": [0, "always"],//赋值运算符 += -=什么的
    "operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
    "padded-blocks": 0,//块语句内行首行尾是否要空行
    "prefer-const": 0,//首选const
    "prefer-spread": 0,//首选展开运算
    "prefer-reflect": 0,//首选Reflect的方法
    "quotes": [1, "single"],//引号类型 `` "" ''
    "quote-props":0,//对象字面量中的属性名不强制双引号
    "radix": 2,//parseInt必须指定第二个参数
    "id-match": 0,//命名检测
    "require-yield": 0,//生成器函数必须有yield
    "semi": 0,//语句接触强制分号结尾
    "semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
    "sort-vars": 0,//变量声明时排序
    "space-after-keywords": [0, "always"],//关键字后面是否要空一格
    "space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
    "space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
    "space-in-parens": [0, "never"],//小括号里面要不要有空格
    "space-infix-ops": 0,//中缀操作符周围要不要有空格
    "space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
    "spaced-comment": 0,//注释风格要不要有空格什么的
    "strict": 2,//使用严格模式
    "use-isnan": 2,//禁止比较时使用NaN,只能用isNaN()
    "valid-jsdoc": 0,//jsdoc规则
    "valid-typeof": 2,//必须使用合法的typeof的值
    "vars-on-top": 2,//var必须放在作用域顶部
    "wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
    "wrap-regex": 0,//正则表达式字面量用小括号包起来
    "yoda": [2, "never"]//禁止尤达条件

EsLint 规则配置

附:关闭vue-cli3 代码检查:

vue.config.js中(没有可在项目根目录下创建):

module.exports = {
    lintOnSave: false // 关闭eslint代码检查
};

使用element-ui table expand展开行实现手风琴效果

转载原文章地址:使用element-ui table expand展开行实现手风琴效果 - 电子猫 - 博客园写这篇博客的初衷:官网演示效果为点击toggle,已经展开的项不会因为其他项展开而关闭,所以延伸了下,扩展为手风琴效果。 根据留言反馈,新增了“修改操作栏文字”、“修改扩展栏内容”功能,完整代码传送门https://www.cnblogs.com/e-cat/p/10532982.html

vue中点击空白处隐藏div的实现

转载原文章地址:vue中点击空白处隐藏div的实现(用指令优雅的实现) - 简书简单想应该怎么实现?1、肯定是给document增加一个click事件监听2、当发生click事件的时候判断是否点击的当前对象结合着本思路和指令咱们来实现。 简单介绍vue指...https://www.jianshu.com/p/7409bee595a5

textarea去掉右下角的条纹

resize:none


元素点击出现蓝色边框swiper的按钮点击出现蓝色边框

span:focus {
    outline: none;
}

video标签实现多个视频循环播放

转载原文章地址:

video标签实现多个视频循环播放 - yvioo - 博客园 <https://www.cnblogs.com/pxblog/p/12196280.html

this.$confirm里面使用await异步调取接口数据

转载原文章地址:this.$confirm里面使用await异步调取接口数据_my466879168的博客-CSDN博客_this.$confirm异步this.$confirm里面使用await在this.$comfirm中需要点击确定后进行某些异步操作,如果在方法名上写async的话会直接报错:Can not use keyword ‘await’ outside an async function (419:23)async cancelappointment(item) { this.$confirm("确认取消该议程吗?", "取消", { confirmButtonText: "确认", canchttps://blog.csdn.net/my466879168/article/details/106895653

input 输入事件防抖

input值变化,延时触发事件(防抖,节流) - 我爱一条柴。 - 博客园https://www.cnblogs.com/ImmortalWang/p/11551159.html

watch: {
	searchValue: {
        handler() {
            if (this.timer) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                this.search();
            }, 200)
            },
        deep: true
	}
}

组件中调用Vuex的state,getters,mutations,actions,modules的数据传递、传参问题

转载原文章地址:11.组件中调用Vuex的state,getters,mutations,actions,modules的数据传递、传参问题_扛麻袋的少年的博客-CSDN博客_组件调用mutations博主为什么要总结标题的这些问题呢 1. 因为在之前Vue 2.0之前,面对小型前端单页面富应用(SPA)应用,都是使用localStorage等一些缓存等简单的方式来解决数据之间的传输问题。面对相对大型的应用,使用上述localStorage等简单方法已经无法满足需求,所以需要使用到Vuex,可以更加方便的知晓页面之间具体的流向问题。 2.在学习到Vuex时,简单...https://blog.csdn.net/lzb348110175/article/details/89351059

git cherry-pick 报错 fatal: bad object

转载原文章地址:git cherry-pick 报错 fatal: bad object - 加个小鸡腿 - 博客园场景:程序员A提交了一个commit到gerrit上,我们叫他为commit_id1,但是还没有review,那就是没有入库,程序员B想再本地拿到这个commitd_id1,既然这个提交没有入库,很明https://www.cnblogs.com/zndxall/p/9641586.html

Echarts相关文档

Echarts - tooltip属性设置 - 简书tooltip:提示框组件,用于配置鼠标滑过或点击图表时的显示框。https://www.jianshu.com/p/01f59a2b8d49echarts tooltip的formatter自定义样式设置_穆啊的博客-CSDN博客_echarts formatter样式用echarts折线图的时候,hover数据点的样式是默认,但是有的时候显示的样式和自己理想的样式有区别的时候,我们就需要自己更改样式,来满足自己的需求,呢要怎么进行更改呢,官方文档说明可以在tooltip的formatter方法里面进行定义,下面我们来看一下:hover数据点的默认样式是这样的:因为时间段比较长的时候,他只会显示年份,月份和日份,但是我如果需要加上每段数据的具体时间,也就是精确到几点几分,这个时候会怎么办呢?我们就可以在tooltip的formatter里面进行自定义,手动添加一些我https://blog.csdn.net/weixin_46188204/article/details/107706518

echarts_部分图表配置简介_横向柱状图 - 孙大阳 - 博客园横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下:https://www.cnblogs.com/cy3664983/p/7280245.html

vue项目使用Export2Excel导出和导入Excel表格详细步骤

转载原文章地址:vue项目使用Export2Excel导出和导入Excel表格详细步骤_一个差技术的爱好者的博客-CSDN博客_export2excel 文档在前端项目中导出Excel表格,Vue.js确实可以实现,亲测具体实现步骤为:1.安装依赖包(安装过淘宝镜像的用 "cnpm" 安装依赖快) cnpm install -S file-saver cnpm install -S xlsx cnpm install -D script-loader2.导入两个jsBlob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件(下面有.https://blog.csdn.net/qq_42616672/article/details/108803898

Vue中使用cdn加载资源

转载原文章地址:Vue中使用cdn加载资源 - 搬砖滴 - 博客园搭建vue的时候,一般都使用vue官方推荐的命令行工具。需要打包的时候,默认会把所有代码合并生产新文件,其中包括各种库,就会导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。 在Vue项目https://www.cnblogs.com/qtiger/p/13207286.html

vue-cli3打包项目使用CDN的方式引入框架文件_ydongabc-CSDN博客_vuecli 打包cdn1.在vue.config.js中使用chainWebpack添加externals配置module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // #region 忽略生成环境打包的文件 var...https://blog.csdn.net/weixin_45829115/article/details/104537405

手摸手,带你优雅的使用 icon

转载原文章地址:手摸手,带你优雅的使用 icon - 掘金首先我们来说一下前端 icon 的发展史。 在我刚开始实习时,大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分,所以为了优化有了image sprite 就是所谓的雪碧图,就是将多个图片合成一个图片,然后利用 css 的 backgrou…https://juejin.cn/post/6844903517564436493

Vue封装axios以及处理跨域问题

转载原文章地址:Vue封装axios以及处理跨域问题(解决OPTIONS请求返回302错误) - 简书安装axios 新建一个js文件,http.js,在这里我给headers自定了token,所以我们发送的请求都是非简单请求,而发送了非简单请求,就会每次发送请求的时候触发一...https://www.jianshu.com/p/674e738ccb73Axios封装、跨域解决、开发环境配置以及代理配置 - 简书一、Axios封装 安装Axios npm i -S axios 在src下新建文件件utils->request.jsimage.png 二、跨域解决 在服务器端修改端口号...https://www.jianshu.com/p/ac36315ded69

vue动态添加style样式

转载原文章地址:vue动态添加style样式_weixin_30736301的博客-CSDN博客注意:凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff【对象】html :style="{ color: activeColor, fontSize: fontSize + 'px' }"...https://blog.csdn.net/weixin_30736301/article/details/100093744

你可能感兴趣的:(前端工作遇到的问题,前端)