LuviaWu的博客

推荐基于vue3.0开发的后台管理好用的模板，让需要的人快速获取合适的模板

vue实现登录滑动拼图验证的两种方法：第一种是纯前端组件验证，只能区分是人为操作还是机器操作。第二种是前后端同时验证，这种方法加上后端校验相对会更安全一些。1、纯前端组件验证效果如图：原代码gitee链接实现步骤，先npm install：npm install --save vue-monoplasty-slide-verify在main.js引入import Vue from 'vue';import SlideVerify from 'vue-monoplasty-slide-

官方示例中setFitView()对AMap.Marker可以生效，但对海量点标记 AMap.MassMarks 似乎无效Map类有一个方法setBounds也能实现重新调整视角：https://lbs.amap.com/api/javascript-api/reference/map// <script> 中引入高德地图import AMap from 'AMap'var map// 页面上<div id="my-aMap" style="width: 500px;he

mousedown在Dialog上 mouseup在遮罩上时自动关闭弹窗的问题总结在vue中使用鼠标事件@mousedown、@mouseenter等失效的解决办法，以及PC端长按实现

请求后台，导出表格这里的文件导出表格方式是：根据后端返回的值，进行处理下载。（注意后端返回的数据结构，因为会影响到文件流的正常转换，从而导致下载的表格乱码）// 导出表格 downloadExcel() { var that = this this.axios.get('/api/exportExcel', { responseType: 'blob', headers: { token: that.token, 'Content-Typ

文件下载这里的文件，可以包括图片、视频、文档等参数说明：fileUrl：文件服务器的路径（路径后面加上’?response-content-type=application/octet-stream’，可以支持跨域下载）fileName：文件名// 下载文件 downLoad() { const url = fileUrl + '?response-content-type=application/octet-stream' // 支持跨域下载 const name

vue中数据绑定，js数组赋值，多处使用时，一处修改，另一处也会被改变问题描述如下：this.A = [1,2,3]var B = this.AB.push(4)var C = this.Aconsole.log(C) 此时的C会得到 [1,2,3,4]，而不是 [1,2,3]解决办法：1、this.A = [1,2,3]var B = JSON.parse(JSON.stringify(this.A))B.push(4)var C = JSON.parse(JSON.

vue-amap高德地图定位以及文本标注因要求需实现在地图的定位以及该定位的文本标注，所有我看了一下实现的方式有哪些。最后选择了用现成的 vue-amap高德组件 去实现。实现效果如图：实现过程很简单：1.到 高德开发者平台 申请key2.安装vue-amap（官方推荐 npm 安装）npm install vue-amap --save3.使用组件调用地图在main.js引入vue-amap地图组件：import VueAMap from 'vue-amap'Vue.use(Vu

一开始没注意vue-element-admin这个比较好用的框架没支持IE浏览器，后来公司要求支持IE浏览器，所以查了一下，其实，实现起来很简单！附带作者兼容说明链接：https://github.com/PanJiaChen/vue-element-admin/wiki原话是这样：由于vue-element-admin项目暂时没有兼容性需求，如有兼容性需求可自行使用babel-polyfill。所以：1、安装babel-polyfillnpm install --save babel-polyf

node.js下载node.js下载安装，升级版本后，运行项目node-sass会报错，如下图：它告诉你：这通常是因为你的环境在运行“npm install”后发生了更改。运行“npm rebuild node sass”下载当前环境的绑定。让你运行以下命令：npm rebuild node-sass但还是报错：执行命令的时候有时会遇到上图的错误，然后以 windows 平台为例，管理员权限执行以下命令，安装完即可：npm install --global --production win

附上链接：vis网站visjs中文使用说明文档使用步骤：1、安装npm install vis-network2、在页面中引入<div id="mynetwork" class="myChart" :style="{width: '100%', height: '90vh'}"></div>require('vis-network/dist/dist/vis-network.min.css')const vis = require('vis-network/di

echarts绘制关系图，效果如图，粗麻编写，教程往下看1、vue安装echartsnpm install echarts2、引入echarts3、在VUE页面中编写HTML:<div id="myChart" class="myChart" :style="{width: '100%', height: '90vh'}" />JS:// 数据遍历转换（主要是计算多重关系所显示的不同弧度值） changeData() { var data, linksDat

1、在vue项目中安装echartsnpm i echarts -S或cnpm i echarts -S2、在用到echarts地图的vue单页面中引入：import echarts from 'echarts'import '../../../node_modules/echarts/map/js/china.js'require('echarts/extension/bmap/bmap')3、然后在vue项目中public的index.html中引入：其中的ak，是用百度地图时，

话不多，看代码！1、将图片的url转换成base64urlTobase64(url) { var that = this var img = new Image() img.src = url + '?time=' + new Date().valueOf() // 加上时间结尾，处理缓存 //支持http跨域图片。需要后端设置图片支持跨域为*(如果后端不处理，加上这行会无法显示图片，导致拿不到base64) img.setAttribute('crossOrigin', '

1、ie11打不开vue项目，报错 “对象不支持“addEventListener”属性或方法”在index.html中head标签中加上：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">这个属性主要是设置浏览器优先使用什么模式来渲染页面的。#代码IE=edge告诉IE使用最新的引擎渲染网页<...

webpack Invalid Host/Origin header报错问题这是webpack本身出于安全考虑，因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是，在我们的开发环境下，可以禁用掉disableHostCheck这一配置项。在webpack.config.js或webpack.dev.config.js里的devServer加上 disableHostCheck: true...

//禁止页面后退（本来是想每个页面都不能后退的，但是这还能后退一两次）history.pushState(null, null, document.URL);window.addEventListener('popstate', function() { history.pushState(null, null, document.URL);}); // 初始化操作$(doc...

知识点：1 v-model：监听input内容2 watch:监听属性方法3 页面初始化调用函数 mounted一：html元素&amp;amp;lt;table id=&amp;quot;userTable&amp;quot; class=&amp;quot;table table-bordered table-hover&amp;quot;&amp;amp;gt; &amp;amp;lt;thead&amp;amp;gt;

第一步：先npm卸载element-uinpm unstall element-ui 第二步：再安装npm install element-ui -S第三步：main.js中default修改为theme-chalk这时候我们在main.js中修改新增的 theme-chalk 主题：将import ‘element-ui/lib/theme-default/index.css’替...

element upload上传图片到阿里云1、HTML部分<el-upload action="" :http-request="Upload" :data="Aliyun" :multiple="false" :show-file-list="true" list-type="picture-card" :on-preview="handlePictureCardPre...

1、安装：npm install vue-qr --save2、导入vue项目中使用<template> <vue-qr :text="config.url" :logoSrc="config.logo+ '?cache'" :logoScale="0.3" :size="200" :margin="0" colorDark="#f67b29" colorLigh...

官方文档：http://html2canvas.hertzen.com/configuration/外部引入：<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>1、安装npm install html2canvas2、在页面引入 import html2...

1、外部引入JSgithub下载地址：https://gitee.com/weijunw/erweima/blob/master/erweima-jiexi-demo/reqrcode.js（我是拿过来放在公司的阿里云服务器上，在index.html引用的）2、在vue页面使用data：alipayQrcodePrefix: 'alipayqr://platformapi/startap...

在VUE中，有一个需求是判断是否有网络，所以要用到超时返回状态。一开始是在请求头header里面设置timeout:5000，只是没有效果，后面在前面加上{body: {}}后，就可以超时返回了。vue请求timeout正确使用：this.axios.post("/app/json", { body: {} },{timeout:5000}).then(res=>{})vu...

1，导入第三方插件npm install --save qrcode2，在页面上引入import QRCode from 'qrcode'html： <div id='code'></div> <canvas id="canvas"></canvas> <el-button @click="uploadQR">下载二维码&...

推荐几个基于vue2.0开发的后台管理好用的模板，让需要的人快速获取合适的模板

做个打包笔记，工作比较忙粗糙些，文案相似，方式不同最近要把Vue项目部署到服务器上，在测试好的项目中执行npm run build就开始打包了。但是每次只能打包到一个环境，不同环境需要配置不同的地址，还得手动更改接口的地址，这给部署带来了极大的不方便。下面，我们要自己配置命令来实现分环境打包，项目结构如下：1.在config目录内新建test.env.js文件(要保证和prod.env.j...