Summary

最新推荐文章于 2023-12-27 15:57:42 发布

chujg0511

最新推荐文章于 2023-12-27 15:57:42 发布

阅读量294

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43899211/article/details/119873911

版权

JS获取地址栏参数的方法

function GetQueryString(name){

var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if(r!=null)return unescape(r[2]); return null;

}

// 解决参数值乱码

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg);

if (r != null) return decodeURI(r[2]); return null;

localStorage sessionStorage

const str = "我是要保存的信息";

sessionStorage.setItem('msg', str);

sessionStorage.getItem('msg');

sessionStorage.clear();

const str = "我是要保存的信息";

localStorage.setItem('msg', str);

localStorage.getItem('msg');

localStorage.clear();

存储一个数组对象

localStorage.setItem('UserInfo', JSON.stringify(userinfo));//存

JSON.parse(localStorage.getItem('UserInfo'));//取

只在关闭浏览器时清除localStorage的方法

window.onbeforeunload = function () { //即将离开当前页面(刷新或关闭)时执行 if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)

{ var storage = window.localStorage; storage.clear() } }

图片下方默认3像素

img{ display:block; }

滚动到底部请求接口

mounted(){

window.addEventListener('scroll',this.debounce(this.handleScroll,500))

}，

methods:{

debounce(fn, wait) { //节流方法

var timeout = null; // 初始化定时器

return function() {

if(timeout !== null) clearTimeout(timeout); // 如果scroll方法反复触发，则清空定时器

timeout = setTimeout(fn, wait); // 如果方法没有反复触发，那么就调用我们判断滚动的方法，然后去调用数据，他就只会请求一次了

}

handleScroll(){

if(this.isAtBottom) return;

let scrollTop = document.documentElement.scrollTop // 屏幕滚动高度

let innerHeight = document.querySelector('#app').clientHeight // 容器高度

let outerHeight = document.documentElement.clientHeight // 屏幕高度

if (outerHeight + scrollTop >= innerHeight+10) {

// getData() 这里就可以去请求数据了

}

lazyLoading () { // 滚动到底部，再加载的处理事件

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //网页被卷去的高

sessionStorage.setItem("scrollTop",scrollTop)

let clientHeight = document.documentElement.clientHeight; //网页可见区域高

let scrollHeight = document.documentElement.scrollHeight; //网页正文全文高

if (scrollTop + clientHeight >= (scrollHeight - 200)) { // 滚动到底部

}},

鼠标触发事件

https://blog.csdn.net/weixin_33962621/article/details/94494113

ondblclick

box-shadow

四个px值: x轴偏移量、y轴偏移量、模糊半径、扩散半径和颜色

echarts.default.init is not a function"

const echarts = require('echarts');

require('echarts-gl');

const KnowledgeOPs = echarts.init(document.getElementById('containerKG'));

这样写就不会报错了

点击div之外触发事件

//点击要触发的事件

directives: {

clickoutside: { // 初始化指令

bind(el, binding, vnode) {

function documentHandler(e) {

// 这里判断点击的元素是否是本身，是本身，则返回

if (el.contains(e.target)) {

return false;

}

// 判断指令中是否绑定了函数

if (binding.expression) {

// 如果绑定了函数则调用那个函数，此处binding.value就是handleClose方法

binding.value(e);

}

// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听

el.__vueClickOutside__ = documentHandler;

document.addEventListener('click', documentHandler);

update() {},

unbind(el, binding) { // 解除事件监听

document.removeEventListener('click', el.__vueClickOutside__);

delete el.__vueClickOutside__;

}

watch监听query变化请求数据

弹框显示组件重新渲染

通过vue key 实现，原理官方文档。所以当key 值变更时，会自动的重新渲染。

vue中设置body padding margin

删除query参数

if(this.$route.query.searchId){

let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 先拷贝一个一模一样的对象

delete newQuery.searchId //再删除page

this.$router.replace({ query: newQuery }) //再把新的替换了

}

**import * as echarts from "echarts";**

ios 火狐 new Date()

('2020-01-02').replace(/-/g, "/"); //投票结束时间 ios new Date()不支持 - 连接

('2020/01/02').replace(/\//g, "-");

遍历字符索引数组 for (var key in msgs) { }

el-table全选反选

全选this.$refs.listTalbe.toggleAllSelection()

反选this.people_list.forEach((item) => {

this.$refs.listTalbe.toggleRowSelection(item,false)

})

vue js中解决二进制转图片显示问题

vue-router携带不同参数多次push到一个页面时请求不重新触发问题 ,只有第一次触发

watch: {

'$route': {

immediate: true,

handler: function(to, from) {

//拿到目标参数 to.query.id 去再次请求数据接口

console.log('监测参数type：' + to.query.id);

console.log('监测参数deviceType： ' + to.query.name);

this.init(to.query.id, to.query.name);

}

根据参数升序

var arr = [

{name:'zopp',age:0},

{name:'gpp',age:18},

{name:'yjj',age:8}

];

function compare(property){

return function(a,b){

var value1 = a[property];

var value2 = b[property];

return value1 - value2;

}

arr.sort(compare('age'))

Math.random()随机数

包括下线数字（lower）不包括上限数字（upper）

包括下线数字（lower）也包括上限数字（upper）

随机产生rgba颜色

使用ES6的Promise完美解决回调地狱

https://www.cnblogs.com/qq9694526/p/5714124.html

//Promise的方法then,catch方法

getUserInfo.then(function(ResultJson){

//通过拿到的数据渲染页面

}).catch(function(ErrMsg){

//获取数据失败时的处理逻辑

})

//Promise的all方法，等数组中的所有promise对象都完成执行

Promise.all([getUserInfo,getDataList]).then(function([ResultJson1,ResultJson2]){

//这里写等这两个ajax都成功返回数据才执行的业务逻辑

})

el-row type="flex"

tinymce.min.js:677 Unable to preventDefault inside passive event listener invocation.

video控制

png等格式图片转为data:image格式

var canvas = document.createElement("canvas");

var ctx = canvas.getContext('2d'),

img = new Image;

img.src="./images/arrow05.png";

//img.setAttribute('crossOrigin', 'anonymous') // 图片跨域时有用

img.onload = function(){

canvas.height = img.height;

canvas.width = img.width;

ctx.drawImage(img,0,0);

dataURL =canvas.toDataURL("image/png");

$('#img').attr('src', dataURL);

console.log(canvas.toDataURL("image/png"))

};

计算天数差

DateDiff(sDate1, sDate2) { //sDate1和sDate2是2017-9-25格式

var aDate, oDate1, oDate2, iDays

aDate = sDate1.replace(/-/g,"/").split("/")

oDate1 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]); //转换为9/25/2017格式

aDate = sDate2.replace(/-/g,"/").split("/")

// aDate = sDate2

oDate2 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]);

iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒数转换为天数

eturn iDays

微信缓存修改文件不生效

document.write("<link rel='stylesheet' type='text/css' href='./css/index.css?v="+new Date().getTime()+"'>");

</script>

this.$set

数组 this.$set( arr, index, value)

全局filters

filters.js 定义方法

exports.trim = function (val) { }

main.js中引入

//注册filter

import filters from ' filters.js'

Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))

使用

<div class="page-title">{{value | trim}}</div>

chujg0511

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Summary

目录JS获取地址栏参数的方法localStorage sessionStorage只在关闭浏览器时清除localStorage的方法图片下方默认3像素滚动到底部请求接口鼠标触发事件box-shadowecharts.default.init is not a function"点击div之外触发事件watch监听query变化请求数据弹框显示组件重新渲染vue中设置bodypaddingmargin删除query参数import * as ech..
复制链接

扫一扫