vue
超帅不是很帅
校门口的抠脚大汉
展开
-
echarts中使用散点图根据后端接口动态生成点,并根据点数据动态渲染点颜色
实现效果如图点击 1 根据接口数据动态生成 2,并根据接口中的数据字段为数据渲染不同颜色,并且鼠标覆盖上去的提示信息不是渲染该数据点的值,而是根据接口获取下来的提示信息接口返回数据如下图1 =》红点 x 方向 数据2 =》黑点 x 方向数据3 =》黑点 提示信息 (echarts中tooltip)的数据来源4 =》红点 提示信息 (echarts中tooltip)的数据来源重点来了 配置 echarts 如下// 点击右侧点触发getDotByElevation(elevation)原创 2021-05-12 10:29:02 · 1181 阅读 · 0 评论 -
vue3自定义组件中的emits使用介绍
<template> <!-- teleport的使用 to属性渲染到id为 teleport-test 的元素身上 在index.html中--> <div id="center" v-if="isOpen"> <slot>插槽</slot> <button @click="buttonClick">关闭模态框</button> </div></templ原创 2021-01-06 20:25:07 · 7155 阅读 · 0 评论 -
vue中使用element的loading组件对axios进行加载提示与错误提示封装处理
如果是看具体逻辑的老铁 直接看第三步一、首先说这样封装的好处1、不必每次请求都调用loading加载提示,减少代码冗余2、对错误进行统一处理,提高代码可维护性实现的加载效果如图所示二、准备工作必须要在项目中安装axios、element安装命令 npm install axios npm i element-ui -S注意要在main.js的入口文件中安装element的组件如下import ElementUI from 'element-ui';import 'element原创 2020-08-31 15:41:31 · 1557 阅读 · 2 评论 -
vue中路由跳转,参数的携带与获取
// 参数的携带两种方式如下(1) this.$router.push({ name:'orderDetail', params:{id:14} })(2) this.$router.push({ path:'/microcosm/orderDetail', params:{id:14} })// 获取参数 对应上面的顺序(1) this.$route.params.id(2) this.$route.query.id第一种方式(1)携带的参数没有拼接在url地址后面;数据比较保密,但是n原创 2020-08-10 12:03:39 · 3598 阅读 · 1 评论 -
vue中在某个页面使用watch监听vuex中数据变化或者路由变化的写法
话不多说直接看代码watch:{ //监听vuex中userNumber的变化 '$store.state.userNumber'(val){ //变化之后根据自己项目需求写自身的逻辑代码,下面只是示例 if( !this.isLogin){ this.dialogVisibleLogin=val } }, //监听路由变化的写法 $route(to,from){ //to要前往的路由,from从那个路由过来 console.log原创 2020-07-30 09:52:32 · 2981 阅读 · 0 评论 -
vue中使用Vue-i18n插件实现页面中英文切换详细教程
1、在项目的根目录中安装插件 npm install vue-i18n2、新建文件夹与文件存放自己配置的语言包,我这里新建的是lang文件夹zh.js为中文语言包 en.js为英文语言包 文件夹与文件可以随便命名,但在引用的时候需要写自己新建的文件夹与文件 ,如图所示3、入口文件main.js中引入并安装和配置该插件import VueI18n from 'vue-i18n' //引入Vue.use(VueI18n) //安装const i18n =new VueI18n({ loca原创 2020-07-27 18:34:57 · 2074 阅读 · 5 评论 -
vue中使用qrcode插件生成二维码
1、首先安装插件 npm install --save qrcode2、在要使用的页面中引入插件 import QRCode from 'qrcode'3、使用方式如下HTML部分<-- 这里是放置二维码的位置 建议写一下样式将二维码的位置给预留出来 --><canvas id="canvas" class="yzq" >二维码位置</canvas >JS部分//url为扫描识别后跳转的地方,我这里是动态获取接口的地址//width、height分别为原创 2020-07-27 16:47:30 · 1454 阅读 · 0 评论 -
vue项目中实现复制粘贴功能
1、首先安装插件npm install --save vue-clipboard2 官方文档点击前往2、然后在项目入口文件main.js中引入和安装插件 如下所示import VueClipboard from 'vue-clipboard2' //引入插件Vue.use(VueClipboard) //安装插件3、在需要使用复制功能的地方使用 如下HTML部分<!-- onCopy表示复制成功的回调 --><span v-clipboard:copy=" '这里是你需要原创 2020-07-27 13:25:52 · 1592 阅读 · 3 评论 -
vue中实现生成海报图片html2canvas详细教程
该插件详细配置文档地址建议谷歌浏览器打开,因为翻译的比较准确实现效果如图所示1.安装插件 npm install --save html2canvas2.将要生成图片的区域用大的元素包裹起来例如代码如下注意如果图片是通过接口来获取的,一定要后台配置一下nginx这个东西,本人在这里踩了坑的 配置如下location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow原创 2020-07-16 15:49:26 · 3216 阅读 · 1 评论 -
vue中按需引入elemen-ui组件时报错
如果不知道如何引入可以查看官方文档按需引入组件按照官网中的按需引入操作时,运行项目,会出现Error: Cannot find module 'babel-preset-es2015' from 'F:\anyu' 错误原因在于项目中没有这个模块,需要安装这个模块,运行命令npm i @babel/preset-env -D安装成功后修改项目中的 .babelrc 文件将其改为{ "presets": [["@babel/preset-env", { "modules": false }]],原创 2020-06-26 17:21:12 · 1175 阅读 · 0 评论 -
vue项目中图片懒加载,使用vue-lazyload插件
vue-lazyload插件官方文档地址 官方文档链接1、首先是在vue项目中安装这个插件 使用命令 npm i vue-lazyload -S2、在vue项目中的入口文件中将插件引入,即在main.js文件中引入并安装插件 ,并在Vue.use(VueLazyload,{})中配置参数 。loading配置的是图片还在加载时的显示,我这里配置的是网上的一个加载图片具体参数配置可以看一下官方文档 ,其实使用只需配置少量参数即可,其它的使用官方默认的配置,就可以了。如图所示3、配置好参数后原创 2020-06-14 13:00:59 · 744 阅读 · 0 评论 -
vue项目运行时报Cannot read property ‘upgrade’ of undefined错误
报错如下图所示主要是因为在vue.config.js中使用了跨域代理 , 如下图所示主要原因是target字段后面是空的,如下图所示解决方法就是让target字段不为空,就可以运行起来了如下图所示原创 2020-05-27 13:08:39 · 20799 阅读 · 2 评论 -
在谷歌浏览器中安装vue项目调试工具 vue-devtools详细安装步骤
谷歌浏览器安装vue-devtools插件前往GitHub下载vue-devtools文件 文件地址 文件链接在GitHub中下载时一定要选择master分支,不然在安装依赖是出现问题,如图所示文件下载完成后,进入文件打开命令栏窗口 ,输入命令npm install 安装依赖 如下图所示依赖安装完成后,运行命令 npm run build 进行打包 如下图所...原创 2020-04-28 13:32:33 · 2771 阅读 · 0 评论