vue
文章平均质量分 80
川上饺子
这个作者很懒,什么都没留下…
展开
-
vue项目 利用异步特性实现图片懒加载
一、前言标题中写的“vue 图片懒加载...“,虽然确实是在vue项目中写的,但其实这篇文章主要讲的是一个思路,无论是不是在vue中,都是这个道理。二、简单介绍本文的懒加载是针对如下情况:通过调用接口,获取当页的用户信息(包括用户头像)。但这个时候数据中的头像不能直接通过<img>展示出来,而是需要先调用接口转为base64 ,例如:<img src="data:image/png;base64,iVBO..."/> 。这个时候有10条用户信息,就需要调用接口读取图片10原创 2021-03-10 17:03:19 · 1805 阅读 · 0 评论 -
vue 项目开发的搭建
一、介绍本文是基于https://github.com/PanJiaChen/vue-admin-template的模版进行搭建。在模板基础上的搭建过程中,提出以下可能遇到的问题:1、如何mock接口数据?大家都知道前后端开发速度不一定一致,有时候前端开发比较快,这个时候可以先进行mock数据进行测试。这个模板已经有mock例子了,因此下面会简单以mock菜单为例子做演示。通过讲菜单mock,顺便能够了解一下菜单如何动态添加的。2、mock的api和后端api接口如何进行切换?3、如..原创 2020-12-30 13:14:17 · 163 阅读 · 0 评论 -
令牌过期以后刷新token并重调接口
一、目标设置客户端时间,只要超过客户端时间,系统自动退回到登录页面;当未超过客户端设置的时间时,调用接口,发现令牌过期了,先调用更新令牌接口,然后再重新调用接口。我原来的token刷新方式是:登录获取过期时间,在每次调用接口的时候比较当前时间和过期时间,如果调用接口的时候发现即将过期,刷新令牌获取新的时间;如果调用接口发现过期了,退出页面。由于是有相似之处的,所以我在此基础上进行修改。二、思路1、在外置参数中设置客户端时间2、登录的时候存储客户端时间,每次调用接口的时候判断有没有过期原创 2020-12-28 10:33:12 · 4434 阅读 · 0 评论 -
vue el-tree的展示和节点默认勾选,以及踩的坑
一、目标:点击按钮,获取tree,并且勾选相应的节点。二、实现:1、写一个树<el-tree :data="treeData" default-expand-all show-checkbox node-key="id" ref="tree" @current-change="handleCheckChange" @check="handleCheckChange" :default-checked-keys="checkedRole"原创 2020-12-25 10:21:10 · 6041 阅读 · 2 评论 -
移动端 软键盘遮挡输入框问题
背景:安卓开发人员获取pda的响应事件(扫码),后端开发接口,前端进行问题描述:移动端开发的时候,在登录界面,由于输入框在底部位置,点击以后,弹出输入法遮挡了输入框,看不到输入的内容。...原创 2020-12-11 13:59:33 · 465 阅读 · 1 评论 -
vue 如何用signalR与后端对接实现通信
1、:安装npm install @aspnet/signalr2、在signalR.js中封装signalR方法import bus from "./bus.js"const signalR = require("@aspnet/signalr");let connection = null;export let connectServer = (url, createUserDto) => { connection = new signalR.HubConne原创 2020-12-10 16:12:05 · 1628 阅读 · 0 评论 -
vue 中echarts生成柱状图
一、目标:生成如下的柱状图。二、对series、横纵坐标参数分析 this.chart.setOption({ title: { text: '部门疾病类型统计数', x: '33%', top: '20', textStyle: { color: '#000', fontSize: '18' }, .原创 2020-12-03 11:57:58 · 2028 阅读 · 0 评论 -
vue 如何获取后端验证码图片,及其携带的headers参数
知识点:1、如何把二进制流转为base642、如何获取接口中后端定义的response headers里面的参数背景:后端给了一个接口,直接访问接口就可以获得图片。讲道理,直接这样写就ok了。<el-image :src="codeImg" alt @click="handleCaptcha" ></el-image>...handleCaptcha() { this.codeImg = `${this.baseUrl}/api/Jwt.原创 2020-12-02 11:22:47 · 2678 阅读 · 0 评论 -
vue项目 table的展示列控制+行计数+table相同行的合并
直接上代码<template> <div> <div> <el-popover placement="bottom" title="展示列控制" width="350" trigger="click"> <el-checkbox-group v-model="checkedC原创 2020-11-03 09:35:42 · 830 阅读 · 0 评论 -
vue项目中将treetable(树形表格)数据导出到Excel
1、安装依赖npm install -S file-savernpm install -S xlsxnpm install -D script-loader2、引入在src目录下引入相关文件/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * By Devin Samarin, https://github....原创 2020-11-02 17:07:55 · 3121 阅读 · 4 评论 -
vue项目 如何使用websocket
一、介绍业务要求:用户可以看到列表中哪些用户是在线的,能跟在线用户发送消息,并收到即时消息。参考网上一些介绍,根据实战经验进行总结。二、思路1、用户登录以后,进行websocket连接;2、首次登录,获取在线用户信息并渲染,每次接受新消息,出现消息提示,并调用相应方法(根据业务需要);3、退出登录需要断开连接。三、注意1、token过期问题。websocket在连接过程中,token可能过期。解决思路:2、页面刷新问题。如果登录时进行websocket连接,那原创 2020-10-27 15:28:53 · 3259 阅读 · 1 评论 -
vue项目中的单点登录
要实现单点登录,集成项目和跳转目标项目分别要怎么做?一、集成项目的代码页面html代码:添加handleRoute()方法 <div class="content"> <div class="content-box text-center" v-for="(item, index) in appList" :key="index" :style=原创 2020-10-13 16:27:08 · 2758 阅读 · 1 评论 -
vue项目 el-tree的界面自定义 实现增删改查操作
介绍:el-tree在element文档中有查询全树的代码,本文主要是在此基础上添加了增加、删除、修改的界面样式与功能。具体来说:1、鼠标移动到树上显示删除和修改: 点击删除,当前节点删除; 点击修改,树的选中节点变成input可以重新输入名称并且右边出现取消或确认的icon。2、点击底部添加按钮,如果未选中树节点,则在最外层新增input进行名称输入,右边同样有取消或确认的icon。若选中树节点,则在选中节点下添加子节点,同样以input形式输入名称。实现效果:...原创 2020-06-22 09:26:39 · 4503 阅读 · 14 评论 -
vue项目 使用simple-uploader进行携带参数进行文件和文件夹上传
介绍:由于element的el-upload不支持文件夹上传,所以用了vue-simple-uploader,实现了文件夹/文件的携带form data 和 headers参数上传。vue-simple-uploader还能用于切分上传、断续上传,此处项目没有用到。想对上传做更多的处理的小伙伴,推荐去看源码。另:以下代码加了文件列表的拖拽。1、安装:npminstall vue-simple-uploader--save2、 <uploader ...原创 2020-06-04 09:39:31 · 9798 阅读 · 36 评论 -
vue项目的换肤功能
踩坑:看到网上一个办法是在static中写好不同的样式文件。当按钮点击切换的时候,调用方法,去动态加载css文件。export function getTheme(themeId){ return require("../../static/css/theme/" + themeId + "/index.scss");}但是!这样切换的时候,后面的样式会覆盖前面的样式!...原创 2020-04-14 11:40:06 · 660 阅读 · 0 评论