目录
vue设置路由title,实现在vue路由发生变化的时候,相应的页面title随之变化
vue+element-ui+sortable.js实现表格行和列的拖拽
Element-ui之ElScrollBar组件滚动条的使用
Vue中结合ElementUI实现:限制输入框只能输入正整数
table默认选中选中一行setCurrentRow(row)以及默认选中多行toggleRowSelection
element el-form如何避免打开模态框时就进行表单验证
vue-cli3 一直运行 /sockjs-node/info?t= 解决方案
vue项目element-ui框架中的弹窗中的表单验证清除问题
Vue项目本地服务器设置既能localhost访问又能手机IP访问
Module build failed (from ./node_modules/sass-loader/lib/loader.js)报错
vue项目(webpack+mintui),使用hbuilder打包app
使用element-ui table expand展开行实现手风琴效果
this.$confirm里面使用await异步调取接口数据
组件中调用Vuex的state,getters,mutations,actions,modules的数据传递、传参问题
git cherry-pick 报错 fatal: bad object
vue项目使用Export2Excel导出和导入Excel表格详细步骤
JS中every()和some()的用法
every():
是对数组中每一项运行给定函数,如果该函数所有一项返回true,则返回true。一旦有一项不满足则返回flase
some():
是对数组中每一项运行给定函数,如果该函数满足任一项返回true,则返回true
用法:可以用在数据过滤或者数据判断
置换元素和非置换元素
置换元素:
在不使用css修饰时,元素的标签和属性也会影响元素的显示
- 比如img标签,浏览器回根据src属性读取图片并显示,且图片大小会影响<img>标签大小
- 再比如,input标签的type属性回影响input的显示时输入还是选择
对置换元素有一个专业定义:
一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素
常见的置换元素:
img
input
textarea
select
object
iframe
canvas
那么,除此之外的其他HTML元素就是非置换元素
非置换元素:
浏览器中的大多数元素都是不可置换元素,即其内容直接展示给浏览器。
例如<label>标签,<p>标签里的内容会被浏览器直接显示给用户
ES6的map数据类型转换
- Map转为数组
- Map转为数组最方便的方法,就是使用扩展运算符(...)
- Array.from()
- for...of循环将map循环添加到一个新数组中
- 数组转为Map
- 将数组转入Map构造函数,就可以转为Map
- Map转为对象
- 如果所有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
- 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
- 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增加参数)
vue原生的方法如果要传自定义的参数,会把原生的参数覆盖。这个时候,就需要$event来代替原生参数传参。
- 官网方法:
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
但是这个方法有局限性,比如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
vue设置路由title,实现在vue路由发生变化的时候,相应的页面title随之变化
vue+element-ui+sortable.js实现表格行和列的拖拽
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官网所示:
使用:
<el-scrollbar></el-scrollbar>
将会出现滚动的内容放到上述标签内就可以了。
这里要简单的设置一下,将标签的height设为100%,读者查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。
-
.el-scrollbar__wrap {
-
overflow-x: hidden;
-
}
示例使用如下:
Vue中结合ElementUI实现:限制输入框只能输入正整数
js判断对象是否为空对象的几种方法
vue+element表单验证(多重object嵌套)
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 默认选中第一行业务需求默认选中表格的第一行<el-table ref="interfaceTable" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit hi...https://blog.csdn.net/u013788943/article/details/94395703
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页面浏览器判断
转载原文章地址:https://segmentfault.com/q/1010000014484082https://segmentfault.com/q/1010000014484082
for-in循环和for-of循环区别
input 去掉默认边框和选中边框
input{
border:0;/*去掉未选中状态边框*/
outline:none;/*去掉选中状态边框*/
background-color:rgba(0,0,0,0);/*透明背景*/
}
vue项目(webpack+mintui),使用hbuilder打包app
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展开行实现手风琴效果
vue中点击空白处隐藏div的实现
textarea去掉右下角的条纹
resize:none
<textarea style="resize:none " rows="8" cols="80" ></textarea>
元素点击出现蓝色边框swiper的按钮点击出现蓝色边框
span:focus {
outline: none;
}
video标签实现多个视频循环播放
转载原文章地址:
this.$confirm里面使用await异步调取接口数据
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的数据传递、传参问题
git cherry-pick 报错 fatal: bad object
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
vue项目使用Export2Excel导出和导入Excel表格详细步骤
Vue中使用cdn加载资源
手摸手,带你优雅的使用 icon
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