- 博客(34)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue-router 在beforeEach中添加每次跳转带上的参数，报错问题
在守卫导航中添加参数，在路由跳转时会出现下面问题。Redirected when going from “/a” to “/b” via a navigation guard. at createRouterError (vue-router.esm.js?8c4f:2008)解决方法：添加下面最后两个方法router.beforeEach((to, from, next) => { // 修改标题 if (to.meta.title) { document.title = to
2020-12-29 17:08:53
5446
1
原创 canvas实现实时截屏、录屏，解决模糊问题
功能：实时播放视频流：采用xgplayer实时点击按钮来截屏、录屏注意点：视频流播放时，获取每一帧，绘制canvas（界面上不显示）。注意canvas是有默认宽高的，要修改width、height属性，否则绘制的canvas宽高比不对，会变形模糊。videoWidth、videoHeight获取 视频流真正的分辨率（用来获取宽高比）<template> <div class="video-player"> <div class="uav-vid
2020-12-11 17:44:53
3333
原创 iframe 父子页面传值 postMessage
父级（vue项目）<iframe id="myIframe" :src="iframeUrl + '/test.html'" width="80%" height="60%" style="position: absolute;top: 0;left: 0;"></iframe> data() { return { iframeUrl : 'http://127.0.0.1:5500' } },mounted() { this.ifra
2020-11-25 10:37:24
1508
原创 js 鼠标拖动滑块在一定范围内进行选择
目标滑块拖动数字，从0~100遇到的问题监听主体绑定错误，绑定到了滑块元素上了，导致鼠标移开的时候，再左右移动滑块不会再动了滑块到达100%的时候，会溢出长度了。解决方案是 给滑块（两层结构，给子元素）添加个translateX为-50%代码<div class="track-box"> <div class="track-bg"></div> <div class="track-active" :style="{ width: sens
2020-07-24 11:19:59
1138
原创 js中位置和宽高 offset、client、scroll
offset家族offsetWidth：自身宽度 = width+padding+border（没有单位）offsetHeight：自身高度offsetLeft：当前元素左边的外边缘 距离 定位父级左边内边缘 的距离（最近的设置定位属性的父级，如果都没有，则是距离body）offsetTop：顶部client家族clientWidth：内容宽度 = width+padding（没有单位）clientHeight：内容高度clientLeft：当前元素的border.leftclie..
2020-07-23 17:43:50
146
原创 使用axios，导出文件时，接口正常，返回乱码问题修复
导出接口，点击接口是正常调用，请求方式和地址都没错。正常情况是直接下载该文档，但是返回结果是乱码（如下图）。解决方法：– 修改请求配置– 返回结果接收调整import axios from 'axios';import { getToken } from '@/utils/utils';export function exportFile(url, params) { // 使...
2020-04-29 14:26:34
1205
原创 vue 组件传值
父组件改变子组件的值<!--在父组件中引用子组件，添加ref标识--><son ref="son"></son>//父组件点击事件clickFunc(){ //若更新子组件里a的值 this.$refs.son.a = 'xx'; //若调用子组件里b方法 this.$refs.son.b();}父组件向子组...
2020-04-14 13:33:13
254
原创 vue-cli3 配置不同环境的请求地址
分dev环境、test环境、prod环境在根目录下，新建各个环境的文件。例如 .env.prodNODE_ENV = 'production'VUE_APP_ENV_ALIAS = 'prod'在package.json中设置打包命令"scripts": { "serve": "vue-cli-service serve --host 0.0.0.0", "pr...
2020-04-10 18:04:49
1855
原创 小程序问题汇总
showToast在真机上闪现问题问题描述：微信小程序发送网络请求前，调用wx.showLoading()显示加载中，在回调success和fail中先调用wx.hideLoading()关闭加载提示框，再调用相应业务提示wx.showToast()；开发工具中一切正常，真机测试时却一闪而过原因阐述：小程序中，showLoading和showToast调用的是同一个提示框，都受 w...
2020-01-10 10:27:24
259
原创 域名造成后台cookie取不到值问题
问题：网站域名是study.com（例子），请求接口地址是api.study.com，域名不一致，导致后台取不到前台设置的cookie。并且chrome中控制台的请求头中也不会显示cookie。解决方案：设置cookie时，配置域名import Cookies from 'js-cookie';utils.setCookie = (key, value) => { let ...
2020-01-09 15:28:17
1660
原创 双层循环时，外循环越小，耗时越小
console.time();var sum = 0;for(var i = 0; i < 2; i++) { for(var j = 0; j < 5000; j++) { sum += i * j; }}console.timeEnd();console.time();var sum = 0;for(var i = 0; i <...
2019-12-24 11:19:39
556
原创 get方法传中文报错问题修复
get方法，传中文参数时，会报错400，类型也会错误（如图第一条）解决方法：encodeURIComponent（参数）即可
2019-11-05 10:12:19
429
转载 vue nexttick的理解
异步更新队列：请记住：**vue是依靠数据驱动视图更新的，该更新的过程是异步的。**即：当侦听到你的数据发生变化时， Vue将开启一个队列（该队列被Vue官方称为异步更新队列）。视图需要等队列中所有数据变化完成之后，再统一进行更新。示例：<div id="myApp"> <input type="button" value="点我呀" @click="changeSt...
2019-09-04 17:43:30
180
原创 vue this.$set
data() { str: '111', arr: [1, 2, 7, 4], obj: { name: 'lin', age: 18 }}this.$set(this, 'str', 'aaa') // aaathis.$set(this.arr, 2, 3) // 1, 2, 3, 4 修改this.$set(this.arr, this.ar...
2019-09-04 16:50:02
658
原创 iview input金额校验
要求只能输入数字最多一个小数点代码<Input type="text" v-model="ipt" />that.$nextTick(() => { if(this.ipt) { // 如果输入的有字符串，把字符串转化为数字 if(/[^\d\.]/.test(that.ipt)) { ...
2019-09-04 15:55:07
1307
原创 iview InputNumber 数字输入框完整校验（多个小数点问题）
<InputNumber v-model.number="iptNum" @on-blur="iptBlur" @on-change="iptChange" />此时，输入框输入多少点，都会显示。但是v-model却只是数字解决方法：添加keyup监听，匹配valuethis.$nextTick(() => { document.getElemen...
2019-09-02 11:49:17
5010
原创 css制页面渲染前的loading
<body> <div id="spinner"></div> </body><script> //在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = `<div class="rect1"></div> ...
2019-08-23 17:11:40
439
原创 vue 跳转页面后回到滚动条顶部
在路由router.js中加上：scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }},之前跳转一直没用，最后排查发现给#app这个元素加了 height: 100%。因为页面是超出100%的，所以我改成了min-height: 100%，跳转后滚动条就回到顶部了...
2019-08-16 17:33:04
2318
1
原创 ES6 引入模块时加{}问题
// 导出 abc.js文件 导入export const A = 1; import { A } from './abc.js'export const B = 2; import { B } from './abc.js'export default const C = 3; import name from abc.js ...
2019-07-29 15:16:43
383
原创 rem PC端和手机端适配 问题
当手机端和pc端需要做适配时，建议手机端用rem为单位。设置px和rem的比例。因为rem是相对于页面根元素元素大小来设置的 let iWidth = document.documentElement.clientWidth; document.getElementsByTagName('html')[0].style.fontSize = 100 * iWidth / 750 + 'p...
2019-07-24 17:43:19
1591
转载 JavaScript中 && 和 || 操作符
首先，在js逻辑运算中，0、""、null、false、undefined、NaN都会判为false&&（逻辑与）短路原理：1、只要“&&”前面是false，结果都将返“&&”前面的值（无论“&&”后面是true还是false）2、只要“&&”前面是true，结果都将返“&&”后面的值（无论“&...
2019-07-24 17:30:25
324
原创 数组的对象方法
长度属性：arr.length:返回数组长度添加元素：arr.push(): push可以接受任意数量的参数，将参数放在原数组的尾部，该方法返回的是最终数组的长度 【会更改原数组】arr.unshift(): 向数组的开头添加一个或更多元素，并返回新的长度 【会更改原数组】arr.splice(): 实现数组的增删改功能 【返回的是被删除项目的新数组，如果有的话】【会更改...
2019-07-24 15:34:57
305
原创 谷歌浏览器自动记住后输入框样式问题修改
下面是问题图片法1input:-webkit-autofill { -webkit-text-fill-color: #606266 !important; -webkit-box-shadow: 0 0 0px 1000px #1C1E27 inset !important; transition: background-color 500000s...
2019-07-12 19:01:10
1844
原创 vue的computed、watch
computed不在data中定义场景：适用于多个变量计算一个变量。比如商品总价，用单价*数量。只要单价或数量发生了变化，总价就会被修改。优点：只有在依赖（即里面的变量）发生变化的时候才会重新计算，否则使用缓存中的数据，大大提高了性能。computed: { totalPrice: { get() { let _totalPrice = 0; .... // 这个值...
2019-06-26 16:10:06
233
原创 微信小程序中，动态给对象数组中的某个字段赋值
// 切换显示与隐藏 toggleShow(e){ let _index = e.currentTarget.dataset.index; let _ifshow = e.currentTarget.dataset.ifshow; let _disOrderList = this.data.disOrderList; _disOrderList[_index]....
2018-09-13 15:04:10
3486
原创 vue.draggable 编写表格拖拽排序
主要使用vuedraggable和sortablejs两个组件。 1、安装组件npm install vuedraggablenpm install sortablejs2、引入组件import draggable from 'vuedraggable';import Sortable from 'sortablejs';export default { co...
2018-09-05 16:23:48
7507
转载 监听页面返回事件或者移动端返回按钮事件
监听页面返回事件或者移动端返回按钮事件pushHistory(); window.addEventListener("popstate", function(e) {// pushHistory(); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false); function pushHistory() {
2018-01-24 16:53:25
12344
2
原创 Linux基本命令
1、用22端口号，以root用户名登录服务器ssh -p 22 root@115.28.131.2272、创建a.txt文件，并将当前日期和时间输入到其中。再打开显示touch a.txtdate > a.txtvi a.txt3、从源码安装node.jscd node.js //进入nodejs路径make make install4、查看cpu信息cat /proc/cpuin
2018-01-04 21:12:43
223
原创 截取指定字符串前后的字符
/*string 字符串;str 指定字符;split(),用于把一个字符串分割成字符串数组;split(str)[0],读取数组中索引为0的值（第一个值）,所有数组索引默认从0开始;*/function getStr(string,str){ var str_before = string.split(str)[0]; var str_after = string.split(
2018-01-04 21:07:51
8287
原创 从url获取参数
//获取url参数值function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.su bstr(1).match(reg); //获取url中"?"符后的字符串并正则匹配 var co
2018-01-04 21:03:09
760
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人