工作笔记
- 1.缓存$route
- 2.字体大小自适应
- 3.git操作pull,push等操作报错ssl
- 4.日期格式化
- 5.echarts显示暂无数据等(设置title属性)
- 6.获取前一天年月日
- 7.监听高度
- 8.echarts饼状图在图表内部和外部都显示数据
- 10.Thousand
- 11.控制浏览器返回方法
- 13.安装淘宝镜像
- 14、直接跳转第三方页面
- 15、npm,cnpm穿插使用报错
- 17、判断数组、对象
- 18、基本类型、引用类型
- 19、反转字符串(str.reverse())
- 21、图片懒加载
- 22、vue中有关.env;.env.development,.env.production
- 23、WebStorage提供了一些方法
- 24、将方法挂载到window上,让客户端(ios,android)调用
- 25、JSON.parse(),JSON.stringify()
- 26、npm版本为7以上,install报错
- 28、去掉type=number输入框的上下图标
- 31、前端利用redis自启服务
- 32、echarts柱状图设置不同颜色
- 33、千分位过滤器
- 34、数据为空过滤器
- 35、防止多次点击
- 36、图片转base64
- 37、获取节点宽高
- 38、清除浮动(万能方法)
- 39、滑动页面,使输入框失去焦点
- 40、一些vsCode必备插件
- 41、输入框搜索快速变化请求接口,导致数据出现问题
- 43、在vue项目中展示外部链接页面(iframe)
- 44、判断是空对象
- 45、el-image 大图预览(上一张下一张)
- 类数组
1.缓存$route
//缓存$route
getParamsObj(){//判断标签页打开方式
let params = this.$route.params;
let storageName=this.$route.name;
let getRouteParams={};
if(Object.keys(params).length){
sessionStorage.setItem(storageName,JSON.stringify(params));
getRouteParams=params;
}else{
let getSorage = sessionStorage.getItem(storageName);
if(getSorage){
getRouteParams = JSON.parse(getSorage)
}
}
return getRouteParams;
},
Object.assign(this.$route.params, this.getParamsObj())
2.字体大小自适应
//字体自适应大小
fontSize(res){
let docEl = document.documentElement,
clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res*fontSize;
},
3.git操作pull,push等操作报错ssl
git config --global http.sslVerify false
4.日期格式化
//日期格式化
DateToformatDate(date, fmt) {
//按格式返回当前时间
if (fmt == '' || fmt == null) {
fmt = 'YYYY-MM-DD';
}
if (date == '' || date == null) {
date = new Date();
} else {
if (Object.prototype.toString.call(date) !== '[object Date]') {
date = new Date(date);
}
}
var o = {
"M+": date.getMonth() + 1, //月份
"D+": date.getDate(), //日
"H+": date.getHours(), //时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
};
if (/(Y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
},
5.echarts显示暂无数据等(设置title属性)
title: {
text: '暂无数据',
x: 'center',
y: 'center',
textStyle: {
color: '#8c8c8c',
fontWeight: 'normal',
fontSize: 16
}
},
6.获取前一天年月日
//获取年月日
getDay(){
let preDate = new Date();
let date = new Date(preDate.getTime() - 24*60*60*1000);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = (month.toString().length == 1) ? ("0" + month) : month;
day = (day.toString().length == 1) ? ("0" + day) : day;
let toDay = year + '-' + month + '-' + day;
//时间选择器的年月日
this.dataForm.stopDate = toDay;
7.监听高度
<el-card :style="{'height':boxHeight}">
//监听高度,让card自适应
handleHeight(){
this.boxHeight = (window.innerHeight || document.documentElement.clientHeight) - 20 + 'px';
},
8.echarts饼状图在图表内部和外部都显示数据
用两条一样的数据
10.Thousand
const thousand = function(number) {
const arr = (number + '').split('.')
const int = arr[0] + ''
const fraction = arr[1] || ''
const f = int.length % 3
let r = int.substring(0, f)
for (let i = 0; i < Math.floor(int.length / 3); i++) {
r += ',' + int.substring(f + i * 3, f + (i + 1) * 3)
}
if (f === 0) {
r = r.substring(1)
}
return r + (!fraction ? ' ' + fraction : '')
}
export default thousand
11.控制浏览器返回方法
mounted() {
if (window.history && window.history.pushState) {
// 往历史记录里面添加一条新的当前页面的url
history.pushState(null, null, document.URL)
// 给 popstate 绑定一个方法 监听页面刷新
window.addEventListener('popstate', this.backChange, false) //false阻止默认事件
}
},
destroyed() {
window.removeEventListener('popstate', this.backChange, false) //false阻止默认事件
},
methods: {
backChange() {
// this.$router.push({
// path: '/',
// })
history.pushState(null, null, document.URL)
},
},
13.安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
14、直接跳转第三方页面
给页面一个方法,将方法在created里面调用,点击页面则直接跳转到第三方页面
window.location.href = ‘URL’
15、npm,cnpm穿插使用报错
1.清除缓存:npm cache clean --force
2.安装依赖(我使用淘宝镜像安装依赖): cnpm install
17、判断数组、对象
console.log(Object.prototype.toString.call(arr)); //[object Array]
console.log(Object.prototype.toString.call(obj)); //[object Object]
*用apply也可以*
18、基本类型、引用类型
一、 基本类型: string,number,boolean,null,undefined,(symbol)
二、 引用类型: Function,Array,Object
19、反转字符串(str.reverse())
const str = 'hello world !'
function reverseStr(param) {
// split() 的作用是将字符串转换成数组
// 如果不带任何的参数,那么就是将整个字符串一起转换成数组
// 如第二个栗子所示! 带参数就是用指定的参数来
// 将字符串中的每个元素用指定参数进行包裹然后成为
// 新数组中的每个元素
// 如第一个打印的!
console.log(param.split("").reverse().join(""));
}
console.log(str.split(""));
// ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", " ", "!"]
console.log(str.split());
// ['hello world !']
reverseStr(str);
// ! dlrow olleh
21、图片懒加载
相关API
1、document.documentElement.clientHeight //获取屏幕可视区域的高度
2、element.offsetTop //获取元素相对于文档顶部的高度(元素相对于其父元素容器顶部的距离)
3、document.documentElement.scrollTop //获取浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离
如果:offsetTop-scroolTop<clientHeight,则图片进入了可视区内,则被请求。
总结:懒加载其实就两个重点,一个是元素到各个边距的距离,二个就是判断元素是否在可视区域内。
22、vue中有关.env;.env.development,.env.production
1,关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件
.env 全局默认配置文件,不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
2,关于内容
注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX
3,关于文件的加载:
根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”比如执行npm run serve命令,会自动加载.env.development文件
process.env属性(全局属性,任何地方均可使用)
注意:.env文件无论是开发还是生成都会加载的公用文件
23、WebStorage提供了一些方法
1、setItem (key, value) —— 保存数据,以键值对的方式储存信息。
2、getItem (key) —— 获取数据,将键值传入,即可获取到对应的value值。
3、removeItem (key) —— 删除单个数据,根据键值移除对应的信息。
4、clear () —— 删除所有的数据
5、key (index) —— 获取某个索引的key
24、将方法挂载到window上,让客户端(ios,android)调用
created() {
window['endyy'] = code => {
this.endyy(code)
}
},
25、JSON.parse(),JSON.stringify()
1、JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
2、JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。
26、npm版本为7以上,install报错
7以上版本比6更严格,解决办法(亲测2好用):
1、降级到npm6.x
2、npm i --legacy-peer-deps
28、去掉type=number输入框的上下图标
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
31、前端利用redis自启服务
1、将后端服务打包成jar
2、电脑上下载redis
redis-server
java -jar xxxxxx.jar
32、echarts柱状图设置不同颜色
itemStyle:{
color:function(params){
var colorlist = ['#DA251D','#E67716','#FBC300','#11440f','#32585a','#00ff77'];
return colorlist[params.dataIndex];
}
}
33、千分位过滤器
在main.js中
//过滤器 千分位
Vue.filter('formatNumber', function(value = '--', currencyType = '') {
let res
if (value.toString().indexOf('.') === -1) {
res = (value || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
if (value == '') {
res = '--'
}
} else {
const prev = value.toString().split('.')[0]
const next =
value.toString().split('.').length == 1
? value.toString().split('.')[1]
: value.toString().split('.')[1]
res =
(prev || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + '.' + next
}
return currencyType + res
})
34、数据为空过滤器
//过滤器 数据空返回 --
Vue.filter('filterData', function(value) {
if (value == ' ' || value == '' || value == undefined || value == null) {
return '--'
} else {
return value
}
})
35、防止多次点击
//防止多次点击
Vue.directive('preventReClick', {
inserted: function(el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 2000)
}
})
},
})
====== directive.js文件中 ====
import Vue from 'vue'
const preventReClick = Vue.directive('preventReClick',{
inserted: function(el, binding, vNode, oldVnode){
el.addEventListener('click', () => {
if(!el.disabled){
el.disabled = true
setTimeout(() => {
el.disabled = false
}, 2000)
}
})
}
})
export default {
preventReClick
}
====== 在main.js文件中引入指令 =====
import { preventReClick } from './directive/directive.js'
Vue.use( preventReClick )
// 添加新属性
<el-button type="primary" @click="handleSave" v-preventReClick>保存</el-button>
36、图片转base64
// 图片转base64格式 挂载在全局
Vue.prototype.$base64Img = e => {
return new Promise(function(resolve, reject) {
// 使用Promise进行异步处理
let fileSize = 0
const fileMaxSize = 4096 // 设置图片最大为 1M
fileSize = e.target.files[0].size // 获取图片大小
const size = fileSize / 1024
const file = e.target.files[0] // 获取图片文件对象
const reader = new FileReader() // 实例化一个对象
if (size > fileMaxSize) {
e.target.value = '' // 内容清空
resolve({ err: '图片大小必须小于1M' })
} else if (size <= 0) {
e.target.value = '' // 内容清空
resolve({ err: '图片大小大小不能为0M' })
} else {
reader.readAsDataURL(file) // 把图片文件对象转换base64
reader.onload = function(e) {
resolve(e.target.result) // 回到函数返回base64值
}
}
})
}
37、获取节点宽高
offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)
offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)
clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)
clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)
style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)
style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)
scrollWidth //返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同
scrollHeigh //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同
38、清除浮动(万能方法)
.father: after{
content: '',
clear: both,
display: block,
height: 0,
overflow: hidden,
visibility: hidden
}
39、滑动页面,使输入框失去焦点
created(){
this.touchMove()
},
methods:{
touchMove() {
document.body.addEventListener(
'touchmove',
function (e) {
if (document.activeElement) {
document.activeElement.blur()
}
},
{ passive: false },
)
},
}
40、一些vsCode必备插件
41、输入框搜索快速变化请求接口,导致数据出现问题
参考链接
1、https://blog.csdn.net/leilei__66/article/details/122238328
2、https://blog.csdn.net/leilei__66/article/details/122238328
data(){
return{
lastTime:0,
}
}
watch:{
keyword(newVal){
if(this.lastTime == 0){
this.lastTime = setTimeout(()=>{
// AJAX(newVal)
},2000)
}else{
clearTimeout(this.lastTime)
this.lastTime = setTimeout(()=>{
// AJAX(newVal)
},2000)
}
}
}
43、在vue项目中展示外部链接页面(iframe)
<div style="width: 100%;height: 100px;background-color: #00d1b2"></div>
<div style="width: 100%;height: 500px;">
<iframe style="width: 100%; height: 800px;" src="https://vue-js.com/learn-vue/lifecycle/initEvents.html#_2-%E8%A7%A3%E6%9E%90%E4%BA%8B%E4%BB%B6" allowfullscreen="allowfullscreen" frameborder="0" data-id="1"></iframe>
</div>
44、判断是空对象
方法一:将对象转换成字符串,再判断是否等于“{}”
let obj={};
console.log(JSON.stringify(obj)==="{}");
//返回true
45、el-image 大图预览(上一张下一张)
// 大图预览,实现点击当前图片显示当前图片大图,可以随机切换到其他图片进行展示
getPreviewImgList(index, list) {
let arr = [];
let i = 0;
for (i; i < this[list].length; i++) {
arr.push(this[list][i + index]);
if (i + index >= this[list].length - 1) {
index = 0 - (i + 1);
}
}
return arr;
},
类数组
js中有一类数据,虽然可以通过索引取值,有length属性,且是大于等于0的整数值。看起来和数组一样,但其实它不是真正的数组,不能使用数组的方法,Array.isArray()判断返回值一定是false,这就是类数组
例如:
- dom操作比如querySelectorAll返回的dom元素列表;
- 函数的arguments对象;
- 给任意一个普通对象增加一个length属性
类数组转数组:
- Array.from
- Array.prototype.slice.call
- 扩展运算符…