过去式的美好-CSDN博客

原创 vue前端通过sessionStorage缓存字典

通过后端获取字典，保存在前端session中，如果session有则使用，不存在的则调接口获取并增加字典过期时间

2024-07-01 16:08:04 576

原创 vue2实现浏览器大小变动页面缩放功能

在页面html部分获取元素对象（这个一般设置在页面div的第二层）。4.页面具体内容的宽高最好设置。这样按比例的属性会导致在不同分辨率下的排版出现问题（比如1920跟1366）。需要实现根据浏览器大小变化从而页面内容同样缩放思想实现：1.使用css中的。监听方法，监听尺寸变化从而调用缩放相关方法。这样的具体属性，如果设置。获取操作应该也是一样的。

2023-05-09 09:45:41 5390 1

在v2的时候，默认的prop字段是value，emit触发的名称是input，对于其他非输入框的例如checkbox的prop应该是checked，emit触发的名称应该是change。这些prop跟emit对应的用于原生组件使用。v3则由默认的value改成modelValue，并且emit触发的名称由input改成update。并且允许加上修饰符(绑定自己定义的属性名称)，例如:emit(‘update:values’, e)；因此v3可以绑定多个属性为双向绑定。v2通过原生组件@input事件得到的

2022-11-18 09:43:37 918

原创 express+mockjs+axios实现简单的vue3.x获取分页模拟数据

想为了提升开发效率，基于接口文档已确定，前端可以模拟后端数据接口返回一些mock数据从而达到同步开发。使用到的框架依赖：expressmockjsbody-parser@vue/cli到4.x脚手架就够了，5.x的看个人需求axioselement-plus我这边是分两个项目分别搭建服务器跟前端（都在同一台电脑上），使用vue脚手架创建项目，并安装axios,element-plus依赖。使用npm init在空文件中初始化服务器项目，并安装express,mockjs,body-par

2022-02-24 10:48:43 903

原创记录vue+elementui 动态添加输入选择框并增加校验

一个新的需求，需要动态添加选择条件，虽然可以实现了，但是在校验提示部分感觉欠佳，直接通过$message 的方式提示不够友好，最后通过网上示例完善校验，对部分几个点做个人总结。实现思路：1.由于vue是通过数据驱动展示页面内容，那么可以通过“添加条件”按钮往一个数组中添加对象，然后在下面展示区for循环遍历数组，从而动态生成输入表单。2.已经完成了动态生成输入框/选择框。那么就是怎么加校验了。注意点来了，该循环的数组对象一点是要在这个form表单绑定的对象中才行:model="dialogForm"

2022-01-20 16:45:54 6442

原创 vue for循环图片加载异常显示默认图片

<el-row > <el-col :sm="6" :md="4" v-for="(o,index) in tableData" :key="o.id" style="padding:20px"> <el-tooltip effect="dark" :offset="0" placement="top"> <div slot="content">访问地址:{{o.visi

2021-08-23 18:04:05 399

原创 vue 左侧导航右侧内容互定位

1.需求：点击左侧导航，右侧内容定位到指定位置。右侧数据内容滚动，左侧导航对应定位颜色。同时左侧导航复选框选中时，右侧内容位置对应选中。部分代码通过百度网上查到，抄抄改改。2.实现思路：左侧用 ul li 实现导航效果，从左侧导航到右侧内容定位可以用锚点方式。我这边左侧用 click点击事件，<div style="width:100%;height:500px;overflow:auto"><div class="left-menu"> <ul .

2021-08-17 18:27:01 3441 2

原创 el-tree支持类似懒加载效果及其多选回填功能

需求来源：组织机构树的数据太多全一次性加载树数据会导致页面卡死或崩溃（比如组织机构树有十万条而且有十级层级）原先是想用官方懒加载功能，但是用时发现取不到树的data属性值，也就是树数据源。导致没办法回填勾选树节点。也取不到树数据做些其他操作。后续觉得可以自己根据已有根节点加载出响应的下级子节点。这样就相当于懒加载了。实现思路：1，页面初始化时调接口后端返回根节点数据。2，点击节点时后端根据节点Id 返回当前节点及其下层子节点数据(children)属性数据。3. 迭代当前树数据，判断当前点击的节点id

2021-04-15 18:44:25 1677 2

原创 el-tree只能勾选已选同层

最近有个需求，树结构选项，如果有已勾选节点了，后续只能勾选同一层级节点数据。感觉可以记录下。实现思路：1.同一层级的上一节点(父节点)肯定是相同的。所以判断当前勾选的节点的父节点是否相同2.如果没有已选节点则可以随意勾选节点<el-tree check-strictly show-checkbox ref="orgTreeRef" node-key="dataId" @check-change="orgNodeChange" :data="orgTree" accordion><

2021-03-02 19:05:38 1354 2

原创 el-table手动操作行间上下排序

表格排序，有的是索引排序，有的是要通过字段排序，以便后端返回时能根据上次调整的排序内容进行返回。<el-row> <el-col :span="24"> <el-form-item label="命令列表："> <el-button type="primary" :disabled="oper === 'detail'" @click="openCmdLis

2020-11-19 11:38:48 1725

原创 vue+axios使用crypto-js对参数加密

在前后端分离的项目中有的需要提高安全性，会要求对请求参数进行加密。目前已使用的是对称加密，非对称加密需要网上找非对称加密方式把对称加密的修改应该就差不多。实现思路：在项目中安装引入crypto-js 依赖，然后写个加密方法，如果有区分get跟post两种请求方式那就写两个加密方法。最后在axios请求拦截方法中调用即可。1.安装引入crypto-js。 npm install crypto-js -D2.在项目中新建一个加密文件,比如：cryptoFun.js3,在文件中引入加密插件import

2020-08-14 15:24:53 2950 4

原创 vue+elementui实现el-table动态添加行数据

思路：1.不管新增还是编辑都要有添加可编辑的输入行，所以在打开新增或者编辑的弹框或者页面中就要先push一个对象到table数据对象中。2.要区分我添加的行跟已完成的行。我这边定义的对象中通过设置start为0或者1的值来区分。当行中的start值为0说明是新增可编辑行，否则视为已完成的数据行3. 通过点击添加按钮把当前行的数据中的start值设置成1并且通过splice添加到数组后面中，再把table数组最后一个对象设置成空，start值改回为0；let tempRow = JSON.parse(

2020-08-03 13:24:26 23725 2

原创正则表达式-后续持续更新

匹配表达式供参考学习使用。大家有不同的或者觉得有问题的欢迎修改更正(有从网络收集，没全验证)供参考、供参考、供参考//匹配特殊字符 var re = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g; //匹配中文范围 var re2 = /[\u4E00-\u9F...

2020-04-20 10:59:50 308

原创 vue使用less完成循环排版css鼠标移入图标缩放显示文字效果

做前端css小小的花里胡哨还是要会一点，一些主要注意的说明直接在代码中注释说明<template><div class="page"> <div id="card"> <el-row class="row-style"> <span >资源统计</span> ...

2020-04-16 20:26:55 1149

原创 js axios文件流下载

downTemplate: function(id) { // partyAccountRole.vue页面 this.$message.info("正在下载,请稍等"); let params = { id: id }; // let param ={"templeType":this.updateParams.temp...

2020-04-01 11:27:26 1345

原创 el-tree 动态设置展开的层数

最近有要求觉得默认全展开或者默认都不展开树感觉不是很好，所以要求有的树展示默认展示两层或者三层，可以动态配置思路步骤：1.主要还是要动态设置这个属性赋值:default-expanded-keys=“dataIdArr”2.要想得到对应层的node-key 就要迭代遍历整个树。3，每迭代一次就说明需要展示的层数就多一层，那就说明只要判断当前的层数是否等于自己设置的层数时就差不多了。主要...

2020-03-27 15:53:06 4450

原创关于记住密码功能IE不生效问题

cookie的设置：添加，获取，删除//设置cookie setCookie(name, value, day) { var date = new Date(); date.setDate(date.getDate() + day); //value=md5(value); document.cookie = name ...

2020-01-09 15:14:28 1253

原创 vue+elementui 实现动态必填表单项操作

实现表单项动态必填功能，目前看到方法有两种1.在必填的el-form-item 写两个一样的，一个有rules一个没，然后用v-if去动态判断2.现在要说的是方法2，大部分网上看的都是用方法一的方式，而且基本都copy的文章1）首先在data()数据定义中先定义个布尔值isIpv4:true, //是否是必填项2)在html页面部分写动态的rules<el-form-item...

2019-12-23 10:53:00 8007 9

原创 vue+elementui+vuex+sessionStorage实现历史标签菜单

一般是有左侧菜单后，然后要在页面上部分添加历史标签菜单需求。借鉴其他项目，以及网上功能加以组合调整实现按照标签实现方式步骤来（大致思路）：1，写一个tagNav标签组件2，在路由文件上每个路由组件都添加meta属性 meta:{title:'组件中文名'}3，在store的mutation.js文件中写标签的添加/删除方法以及在方法中更新sessionStorage数据4，在主页面上添...

2019-12-02 11:35:37 2426

原创 js vue+elementui 全屏跟退出全屏功能搬砖

html部分代码<span class="user" @click="toggleFullScreen"> <el-tooltip class="item" effect="dark" :content="isFullScreen?'退出全屏':'全屏'" placement="bottom"> ...

2019-11-22 17:02:45 3529

原创 vue+elementui 字体改用思源黑体

微软雅黑存在版权问题，所以改用思源黑体，实现步骤：1，项目全局搜索微软雅黑相关的中英关键字，删除字体，包括在node_modules下的。2.下载思源黑体字体库 https://download.csdn.net/download/u012138137/11587507 里面已经包含了通过font-face转换得到css字体样式3.在index.html引入字体注意问题：1.该字体是放...

2019-08-21 15:17:22 16206

原创关于vue+elementui设置div背景图片填充不生效问题

正常css填充div图片背景.itemDiv { background-size: 100% 100%; background-repeat: no-repeat; background-image: url(../../images/Tickets_background.png);}但是在vue项目中不生效，需要改成如下。.tip-div { positio...

2019-07-15 15:46:08 5908

原创 vue+el国际化-东抄西鉴组合拳

vue-i18n 国际化参考 https://blog.csdn.net/zuorishu/article/details/81708585说得比较详细。另外做点补充，比如这里cn下的可以以项目模块加公共模块来细分。import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包const cn = { m...

2019-07-05 09:45:17 287

原创以canvas方式绘制粒子背景效果，感觉还可以

这个是看到项目中别人写好的，感觉这种写法效果还可以，就存留记录下就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。附上demo下载地址。https://download.csdn.net/download/u012138137/11249872...

2019-06-20 10:32:23 727

原创 chart 完成拓扑图单节点拖拽不影响其他节点位置

就是做这种的功能，箭头原本是可以动态重复移动的，但不知道哪里问题导致没箭头了，然后补了个edgeSymbol: ['','arrow'], 字段，才增加了箭头。拖拽某个节点，只有关联到的线条会跟着变动其他的节点位置不变。参考https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9https://echarts.baidu.com/exam...

2019-04-22 17:19:34 3617 14

原创 vue同页面多路由懒加载-及可能存在问题的解决方式

先上图，再解释图一是多路由页面，图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应，并且图二的路由层在跟图一对应的页面中要加上components层，多一个s结尾，里面的的方法名就是图一路由的name值，里面还可以照样用懒加载的方式。页面上其他的路由在路由文件中也跟图二是一样的写法。附送可能存在的问...

2019-04-04 10:05:55 2120

原创 background-position切图

老生常谈，网上也很多，但是还是记下。.overview-user-icon { background-image: url('../../../../static/imgs/overview-201811161524.svg'); width: 24px; height: 24px; display: inline-block; background-s...

2019-03-30 16:55:06 681

原创 vue+elementUI下拉框联动显示

<el-row> <el-col :span="12"> <el-form-item label="主账号:" prop="partyAccountId" :rules="[ { required: true, message: '主账号不能为空'}]"> ...

2019-03-19 17:14:57 5995 1

原创 vue 路由跳转新的窗口页面

<template> <div id="accordion"> <ul class="side_menu"> <li v-for="(item, index) in menus" class="item"> <router-l

2019-03-14 16:23:36 1941

原创 vue+elementui分页输入框回车与页面中@keyup.enter事件冲突解决

解决这个问题的思路只要判断事件源是哪个就好。el分页的回车触发事件是在按下时，抬起并不会再触发。而keyup.enter事件是在抬起时触发。so，找不到分页的回车事件那就拿keyup.enter事件搞事情。只要判断这个抬起事件的$event中的锚点样式判断不等于分页特有的样式就可以了 @keyup.enter="allKeyup($event)" //页面上的 //js中 all...

2019-03-14 11:15:47 2247

原创 vue子路由回退后刷新页面方式

最近碰到一个小问题，页面中含有<transition name="router-slid" mode="out-in"> <router-view></router-view> </transition>作为子页面加载显示的地方。但是一般正常子路由通过 this.$router.go(-1) 返回到上一层原先的页面中。通过路...

2019-03-13 09:47:27 6217

原创 echarts省份标注加散点效果

这个是安徽的效果图，鼠标移到红色标注或者对应的市区位置都会显示对应的数值。先直接上代码：import anhuiMapJson from './anhui.json'getCoords: function(city) { var res = []; if (city != null) { for (var c in this.cityMap.featu...

2019-02-22 11:44:28 3266 2

原创 echarts 地图下钻方式

要求点中国地图某个省然后地图切换成对应单独省份的市级地图，然后再点击市级地图任何位置又返回到中国地图。有一种比较好理解的下钻方式，就是一开始就默认已经加载好两个div以及对应的echarts相关数据了，只要做两个地图的click事件，把中国地图跟市级地图做显示隐藏相互切换就好。这种一般只做单个省份的会快些。最好用<div id="eversecAreaChart" style="widt...

2019-02-13 15:25:24 2553

原创 vue+elementui--$message提示框被dialog遮罩层挡住问题解决

最近碰到一个先执行this.$message提示内容，然后接着弹出dialog带遮罩层弹框。那么问题来了，message提示框会默认被dialog遮罩层挡住，现在就是要解决这个问题。由于都是弹框，问题肯定是出在z-index比重问题。由于用$message方式是写在js中而不是写在html中所以不是很好直接去改样式。不过好在message组件中提供了customClass 属性，我们可以利用这...

2019-02-13 14:55:08 29445 8

原创 vue使用粒子效果的两种方式

普通纯html使用粒子效果只要导入相关的particles.js以及app.js的配置文件就好。现在开始说两种vue使用粒子的方式，一个是纯js配置引入，另外一个是用vue-particles插件使用。一、纯js的引入使用方式：一般particles.js以及相关样式的配置文件都是放在项目目录src/assets/js中。我们在需要使用到的页面中使用import方式导入particles.j...

2019-01-28 09:58:37 3699 2

原创 vue+elementui文件上传以及校验提示

好记性不如烂笔头，还是老实记录下。我这边上传文件是统一通过表单提交上去，不是单独上传文件。所以用var formdata = new FormData(); 对象来上传表单以及文件。其中的一个需要上传的文件，（目前只能上传一个）。<el-form-item label="导入资产表：" :label-width="formLabelWidth1" prop="uploadMateria...

2018-12-27 15:13:01 24533 1

原创 vue中使用websocket

最近项目需求需要实现账号唯N性。同一账号允许多窗口、多台电脑登录上限。由项目需求所得，想用websocket实现看下。以前也没正式玩过。项目结构-login登录成功后会跳转到以main.vue为基础页面的界面上，所以我只要在main.vue页面的mounted中去创建以及在beforeDestroy中去销毁websocket基本就可以了。因为在vue中有多个方法地方需要用到同一个websoc...

2018-12-26 16:21:51 21562 6

原创使用vuedraggable实现拖拽

测试地址： https://jsfiddle.net/2wye5t3c/52/文档地址：https://www.npmjs.com/package/vuedraggable以数据驱动视图方式：根据girl数组中定义的value值来对应显示的div以及内容，根据isCheck值来定义初始化以及复选框操作来执行显示/隐藏。@import url("//unpkg.com/element-ui@2...

2018-12-25 09:21:11 4614

原创借鉴并使用vue+el-menu完成多层菜单

先上一个样例图片，图标是前端循环加上的，也可以自己从后端返回的数据层对应加上。这个是有借鉴网上使用迭代方式来完成的，数据是自己的模拟数据。这个是demo的下载地址：(包含node_module)下载解压后即可运行看效果。https://download.csdn.net/download/u012138137/10723404...

2018-10-16 11:45:13 6118

原创边框四周加角样式

要完成上面一个边框四周加上角样式。.CSS部分border_leftTop { position: absolute; border-top-width: 0.105rem; border-top-color: #00dbed; border-top-style: solid; border-left-width: 0.105rem; b...

2018-09-12 17:53:07 493