ZoeLinJF的博客

在守卫导航中添加参数，在路由跳转时会出现下面问题。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

功能：实时播放视频流：采用xgplayer实时点击按钮来截屏、录屏注意点：视频流播放时，获取每一帧，绘制canvas（界面上不显示）。注意canvas是有默认宽高的，要修改width、height属性，否则绘制的canvas宽高比不对，会变形模糊。videoWidth、videoHeight获取 视频流真正的分辨率（用来获取宽高比）<template> <div class="video-player"> <div class="uav-vid

父级（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

目标滑块拖动数字，从0~100遇到的问题监听主体绑定错误，绑定到了滑块元素上了，导致鼠标移开的时候，再左右移动滑块不会再动了滑块到达100%的时候，会溢出长度了。解决方案是 给滑块（两层结构，给子元素）添加个translateX为-50%代码<div class="track-box"> <div class="track-bg"></div> <div class="track-active" :style="{ width: sens

导出接口，点击接口是正常调用，请求方式和地址都没错。正常情况是直接下载该文档，但是返回结果是乱码（如下图）。解决方法：– 修改请求配置– 返回结果接收调整import axios from 'axios';import { getToken } from '@/utils/utils';export function exportFile(url, params) { // 使...

父组件改变子组件的值<!--在父组件中引用子组件，添加ref标识--><son ref="son"></son>//父组件点击事件clickFunc(){ //若更新子组件里a的值 this.$refs.son.a = 'xx'; //若调用子组件里b方法 this.$refs.son.b();}父组件向子组...

分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...

ES6的模板字符串模板字符串中含有标签元素时：不支持。需要把模板字符串改成单引号或者双引号

异步更新队列：请记住：**vue是依靠数据驱动视图更新的，该更新的过程是异步的。**即：当侦听到你的数据发生变化时， Vue将开启一个队列（该队列被Vue官方称为异步更新队列）。视图需要等队列中所有数据变化完成之后，再统一进行更新。示例：<div id="myApp"> <input type="button" value="点我呀" @click="changeSt...

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...

要求只能输入数字最多一个小数点代码<Input type="text" v-model="ipt" />that.$nextTick(() => { if(this.ipt) { // 如果输入的有字符串，把字符串转化为数字 if(/[^\d\.]/.test(that.ipt)) { ...

<InputNumber v-model.number="iptNum" @on-blur="iptBlur" @on-change="iptChange" />此时，输入框输入多少点，都会显示。但是v-model却只是数字解决方法：添加keyup监听，匹配valuethis.$nextTick(() => { document.getElemen...

在路由router.js中加上：scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }},之前跳转一直没用，最后排查发现给#app这个元素加了 height: 100%。因为页面是超出100%的，所以我改成了min-height: 100%，跳转后滚动条就回到顶部了...

下面是问题图片法1input:-webkit-autofill { -webkit-text-fill-color: #606266 !important; -webkit-box-shadow: 0 0 0px 1000px #1C1E27 inset !important; transition: background-color 500000s...

computed不在data中定义场景：适用于多个变量计算一个变量。比如商品总价，用单价*数量。只要单价或数量发生了变化，总价就会被修改。优点：只有在依赖（即里面的变量）发生变化的时候才会重新计算，否则使用缓存中的数据，大大提高了性能。computed: { totalPrice: { get() { let _totalPrice = 0; .... // 这个值...

主要使用vuedraggable和sortablejs两个组件。 1、安装组件npm install vuedraggablenpm install sortablejs2、引入组件import draggable from 'vuedraggable';import Sortable from 'sortablejs';export default { co...