另类实用
过去式的美好
编程既是技术也是艺术
展开
-
vue2实现浏览器大小变动页面缩放功能
在页面html部分获取元素对象(这个一般设置在页面div的第二层)。4.页面具体内容的宽高最好设置。这样按比例的属性会导致在不同分辨率下的排版出现问题(比如1920跟1366)。需要实现根据浏览器大小变化从而页面内容同样缩放思想实现:1.使用css中的。监听方法,监听尺寸变化从而调用缩放相关方法。这样的具体属性,如果设置。获取操作应该也是一样的。原创 2023-05-09 09:45:41 · 5351 阅读 · 1 评论 -
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 · 900 阅读 · 0 评论 -
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 · 397 阅读 · 0 评论 -
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 · 3427 阅读 · 2 评论 -
el-tree支持类似懒加载效果及其多选回填功能
需求来源:组织机构树的数据太多全一次性加载树数据会导致页面卡死或崩溃(比如组织机构树有十万条而且有十级层级)原先是想用官方懒加载功能,但是用时发现取不到树的data属性值,也就是树数据源。导致没办法回填勾选树节点。也取不到树数据做些其他操作。后续觉得可以自己根据已有根节点加载出响应的下级子节点。这样就相当于懒加载了。实现思路:1,页面初始化时调接口后端返回根节点数据。2,点击节点时后端根据节点Id 返回当前节点及其下层子节点数据(children)属性数据。3. 迭代当前树数据,判断当前点击的节点id原创 2021-04-15 18:44:25 · 1664 阅读 · 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 · 1339 阅读 · 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 · 1718 阅读 · 0 评论 -
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 · 2932 阅读 · 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 · 23708 阅读 · 2 评论 -
正则表达式-后续持续更新
匹配表达式供参考学习使用。大家有不同的或者觉得有问题的欢迎修改更正(有从网络收集,没全验证)供参考、供参考、供参考//匹配特殊字符 var re = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g; //匹配中文范围 var re2 = /[\u4E00-\u9F...原创 2020-04-20 10:59:50 · 305 阅读 · 0 评论 -
vue使用less完成循环排版css鼠标移入图标缩放显示文字效果
做前端css小小的花里胡哨还是要会一点,一些主要注意的说明直接在代码中注释说明<template><div class="page"> <div id="card"> <el-row class="row-style"> <span >资源统计</span> ...原创 2020-04-16 20:26:55 · 1144 阅读 · 0 评论 -
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 · 1342 阅读 · 0 评论 -
el-tree 动态设置展开的层数
最近有要求觉得默认全展开或者默认都不展开树感觉不是很好,所以要求有的树展示默认展示两层或者三层,可以动态配置思路步骤:1.主要还是要动态设置这个属性赋值:default-expanded-keys=“dataIdArr”2.要想得到对应层的node-key 就要迭代遍历整个树。3,每迭代一次就说明需要展示的层数就多一层,那就说明只要判断当前的层数是否等于自己设置的层数时就差不多了。主要...原创 2020-03-27 15:53:06 · 4417 阅读 · 0 评论 -
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 · 3525 阅读 · 0 评论 -
以canvas方式绘制粒子背景效果,感觉还可以
这个是看到项目中别人写好的,感觉这种写法效果还可以,就存留记录下就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。附上demo下载地址。https://download.csdn.net/download/u012138137/11249872...原创 2019-06-20 10:32:23 · 724 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 16193 阅读 · 0 评论 -
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 · 3693 阅读 · 2 评论 -
css中div高度自适应且固定剩余高度由另外div内容填充
最近做个页面设计,头部是搜索框以及过滤按钮那些,而剩余高度内容则是列表内容用来显示过滤后的内容。在移动设备显示头部内容会随屏幕大小而改变,所以不能把高度设定死,但剩余部高度又要显示列表内容。构思是头部有一部分的高度随着内容的变化而变化,但这头部是固定的fiexd。剩余部分是列表高度。每次试验发现都虽说下面列表有接在头部位置下面但是当页面往上拉时列表内容会跑到头部内容的下一层去。 一次意外嵌套的尝试原创 2017-11-29 17:23:21 · 4985 阅读 · 0 评论 -
chart 完成拓扑图单节点拖拽不影响其他节点位置
就是做这种的功能,箭头原本是可以动态重复移动的,但不知道哪里问题导致没箭头了,然后补了个edgeSymbol: ['','arrow'], 字段,才增加了箭头。拖拽某个节点,只有关联到的线条会跟着变动其他的节点位置不变。参考https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9https://echarts.baidu.com/exam...原创 2019-04-22 17:19:34 · 3605 阅读 · 14 评论 -
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 · 678 阅读 · 0 评论 -
Chart 跟 ionic中ion-slide-box结合使用
最近在ng1项目中有图表统计查询功能的需求,而且是在移动端使用。 所以要考虑到排版问题。如果多张统计图表能够滑动来显示不就更省占位,而且也更舒服,比如查询某部门下有两个子部门,那就有两张图表了。 我们需要先引入Chart相关的js文件,这个根据自己项目框架来。 首先我们要先要了解Chart的数据格式跟属性使用。$scope.series = ['总天数', '人均天数'];hrS...原创 2018-05-08 14:54:04 · 430 阅读 · 0 评论 -
angularjs select 自定义指令
由于很多下拉功能接口都一样,只有参数不同获取到不同的结果而已。为了避免在控制器中写一大堆重复的请求,所以把下拉功能做成指令。其中也碰到很多问题,好在有大神帮助下完成数据绑定的坑。/** * select选择框 * 根据字典选择 * paramsCatalog : 传入的参数 * pholder : 选择说明 * ngModel : 跟外部ng-model绑定 * onSelec...原创 2018-04-04 14:27:06 · 769 阅读 · 0 评论 -
ng1星级评分指令(偷学技能)
/** * 星级评分 * ion-star是ionic星星图标可以自行更换 * readonly为false指可进行评价操作,true指只能看 * <star-rating ng-model="bo.evaluation" max-value="maxVal" on-change="startsChange" readonly='false'></star-rati...原创 2018-03-14 14:46:20 · 437 阅读 · 0 评论 -
关于企业微信自定义消息推送过程
如果做自己企业的应用跟企业微信结合,那么自定义消息推送功能应该是最可能用到的功能了。 作为一个前端开发人员来理解下企业微信的开发步骤与思路,总结如下,可能也有理解偏差还望指出。完成消息推送这些功能的前提是已有自己的项目跟企业微信对接完成。作为企业微信的第三方应用。www.xxxxx.com 是为公司apache的外网映射域名。作为保护不写出来。1.https://open.weixi原创 2018-02-05 15:19:54 · 12896 阅读 · 0 评论 -
横线上的三角形
这个是效果图。<div class="tag"> <em></em> <span></span></div>.tag{ /** 实线*/ width: 100%; height: 1px; border: 1px solid #D3D3D3; position: relative; background-color: #FFFFFF;}.原创 2017-10-24 11:05:14 · 593 阅读 · 0 评论 -
论新手在开发项目中需要注意的一些事
就以我自己开发经历来说吧,虽说是特别基本的问题,原本就不该出现的问题还是出现,特别是对于全程自学的人来说。1.前端开发。在开发一个表单页面的数据展示时,后端会返回一大堆的数据给你。然而这所有数据并不是全都要用上,比如,一个列表中有id,员工id,名字,电话,性别,等等。。。我们在获取到这些数据时,有的页面需求可能连员工id都不要显示。但我却把所有的字段都列出来,包括id。可想而知在会上验收时的情景。原创 2017-10-12 17:34:22 · 535 阅读 · 1 评论 -
css+js瀑布流内容高度自适应
直接上代码,来不及解释了。↓↓↓/** * 设置瀑布流的高度为窗体高度 */$("#content").height($(window).height());<div id="content"> <div id="imgM" class="trip-bg" ng-click="openModal(businessTypeList[2])">原创 2017-10-18 10:56:49 · 2327 阅读 · 0 评论 -
json存取值方式
json存值: 1、定义一个空的json对象,通过原型链方式赋值存值 var s1={}; s1.name=zhangsan; 这样会默认创建一个名为name的对象。每继续往下多点一层都要确保之前的每层对象链都有内容不能为undefined。 2、类似数组方式存值 var s2={}; s2[name]=zhangsan; 这样也会默认创建一个name的对象。原创 2017-09-14 10:23:43 · 2689 阅读 · 0 评论 -
tree架构迭代-angularjs
在html中出现很多如组织架构,岗位架构,或者多层菜单式的具有上下级关系的树形菜单。 在用angularjs中碰到一个问题,用1.4.3版本会出现堆栈溢出问题,而1.6.2~1.7.0不会有问题。有其他更好的的迭代方式还不知道怎么使用。 以下代码是在基于angularjs1.7.0实现的,获取到的数据格式是数组。在控制器中实现,也可以放到指令中。 /** * json...原创 2018-05-15 16:27:03 · 604 阅读 · 0 评论 -
让ul li 或者table 进行循环往上滚屏
最近在项目中需要使用消息公告滚屏效果,当鼠标移到滚屏内容时,停止滚屏,当鼠标移开时继续滚屏。我只做记录下:&lt;div style="display:inline"&gt;&lt;span v-show="!showCollapse" class="icon-padding"&gt; &lt;I原创 2018-06-19 10:46:20 · 5807 阅读 · 2 评论 -
vue同页面多路由懒加载-及可能存在问题的解决方式
先上图,再解释图一是多路由页面,图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应,并且图二的路由层在跟图一对应的页面中要加上components层,多一个s结尾,里面的的方法名就是图一路由的name值,里面还可以照样用懒加载的方式。页面上其他的路由在路由文件中也跟图二是一样的写法。附送可能存在的问...原创 2019-04-04 10:05:55 · 2119 阅读 · 0 评论 -
echarts 地图下钻方式
要求点中国地图某个省然后地图切换成对应单独省份的市级地图,然后再点击市级地图任何位置又返回到中国地图。有一种比较好理解的下钻方式,就是一开始就默认已经加载好两个div以及对应的echarts相关数据了,只要做两个地图的click事件,把中国地图跟市级地图做显示隐藏相互切换就好。这种一般只做单个省份的会快些。最好用<div id="eversecAreaChart" style="widt...原创 2019-02-13 15:25:24 · 2553 阅读 · 0 评论 -
vue+elementui--$message提示框被dialog遮罩层挡住问题解决
最近碰到一个先执行this.$message提示内容,然后接着弹出dialog带遮罩层弹框。那么问题来了,message提示框会默认被dialog遮罩层挡住,现在就是要解决这个问题。由于都是弹框,问题肯定是出在z-index比重问题。由于用$message方式是写在js中而不是写在html中所以不是很好直接去改样式。不过好在message组件中提供了customClass 属性,我们可以利用这...原创 2019-02-13 14:55:08 · 29397 阅读 · 8 评论 -
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 · 3261 阅读 · 2 评论 -
借鉴并使用vue+el-menu完成多层菜单
先上一个样例图片,图标是前端循环加上的,也可以自己从后端返回的数据层对应加上。这个是有借鉴网上使用迭代方式来完成的,数据是自己的模拟数据。这个是demo的下载地址:(包含node_module)下载解压后即可运行看效果。https://download.csdn.net/download/u012138137/10723404...原创 2018-10-16 11:45:13 · 6117 阅读 · 0 评论 -
边框四周加角样式
要完成上面一个边框四周加上角样式。.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 · 492 阅读 · 0 评论 -
elementui 使用el-table完成transfer基本功能
不知道大家有没碰到用elementui中transfer组件功能,里面的列表其实是el-checkbox-group。这就有个问题,如果列表中有多列数据需要区分显示就没办法了,毕竟是el-checkbox。但是这种需求的功能一般项目都不多。 下面这个是我改造的效果 初始数据也可以在右边已选框中。如果有多列可以很好区分开。...原创 2018-08-14 23:09:27 · 15900 阅读 · 9 评论 -
循环下标作为字段名自身内容部分--获取对应的值
一般写对象层级都是用 “.”点的方式===>object.key = value,但还有种用 “[ ]”中括号的方式===> object[key]=value 。this.labelNum1 ,this.labelNum2… 我要在循环内使用循环数组下标作为字段名最后一个内容值。for(let i=0;i<resp.data.data.access_clien...原创 2018-08-14 21:41:55 · 503 阅读 · 2 评论 -
Eclipse快捷键其他地方有的也能用,让我们脱离鼠标
Ctrl+1快速修复(最经典的快捷键,就不用多说了)Ctrl+D:删除当前行Ctrl+Alt+↓复制当前行到下一行(复制增加)Ctrl+Alt+↑复制当前行到上一行(复制增加)Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了)Alt+↑ 当前行和上面一行交互位置(同上)Alt+← 前一个编辑的页面Alt+→ 下一个编辑的页面(当然是针对上面那条来原创 2015-06-25 14:33:15 · 698 阅读 · 0 评论