JS
过去式的美好
编程既是技术也是艺术
展开
-
vue2实现浏览器大小变动页面缩放功能
在页面html部分获取元素对象(这个一般设置在页面div的第二层)。4.页面具体内容的宽高最好设置。这样按比例的属性会导致在不同分辨率下的排版出现问题(比如1920跟1366)。需要实现根据浏览器大小变化从而页面内容同样缩放思想实现:1.使用css中的。监听方法,监听尺寸变化从而调用缩放相关方法。这样的具体属性,如果设置。获取操作应该也是一样的。原创 2023-05-09 09:45:41 · 5197 阅读 · 1 评论 -
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 · 1689 阅读 · 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 · 2878 阅读 · 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 · 23620 阅读 · 2 评论 -
正则表达式-后续持续更新
匹配表达式供参考学习使用。大家有不同的或者觉得有问题的欢迎修改更正(有从网络收集,没全验证)供参考、供参考、供参考//匹配特殊字符 var re = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g; //匹配中文范围 var re2 = /[\u4E00-\u9F...原创 2020-04-20 10:59:50 · 286 阅读 · 0 评论 -
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 · 7956 阅读 · 9 评论 -
vue+elementui+vuex+sessionStorage实现历史标签菜单
一般是有左侧菜单后,然后要在页面上部分添加历史标签菜单需求。借鉴其他项目,以及网上功能加以组合调整实现按照标签实现方式步骤来(大致思路):1,写一个tagNav标签组件2,在路由文件上每个路由组件都添加meta属性 meta:{title:'组件中文名'}3,在store的mutation.js文件中写标签的添加/删除方法以及在方法中更新sessionStorage数据4,在主页面上添...原创 2019-12-02 11:35:37 · 2388 阅读 · 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 · 3501 阅读 · 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 · 272 阅读 · 0 评论 -
以canvas方式绘制粒子背景效果,感觉还可以
这个是看到项目中别人写好的,感觉这种写法效果还可以,就存留记录下就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。附上demo下载地址。https://download.csdn.net/download/u012138137/11249872...原创 2019-06-20 10:32:23 · 712 阅读 · 0 评论 -
chart 完成拓扑图单节点拖拽不影响其他节点位置
就是做这种的功能,箭头原本是可以动态重复移动的,但不知道哪里问题导致没箭头了,然后补了个edgeSymbol: ['','arrow'], 字段,才增加了箭头。拖拽某个节点,只有关联到的线条会跟着变动其他的节点位置不变。参考https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9https://echarts.baidu.com/exam...原创 2019-04-22 17:19:34 · 3554 阅读 · 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 · 663 阅读 · 0 评论 -
vue同页面多路由懒加载-及可能存在问题的解决方式
先上图,再解释图一是多路由页面,图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应,并且图二的路由层在跟图一对应的页面中要加上components层,多一个s结尾,里面的的方法名就是图一路由的name值,里面还可以照样用懒加载的方式。页面上其他的路由在路由文件中也跟图二是一样的写法。附送可能存在的问...原创 2019-04-04 10:05:55 · 2107 阅读 · 0 评论 -
vue子路由回退后刷新页面方式
最近碰到一个小问题,页面中含有<transition name="router-slid" mode="out-in"> <router-view></router-view> </transition>作为子页面加载显示的地方。但是一般正常子路由通过 this.$router.go(-1) 返回到上一层原先的页面中。通过路...原创 2019-03-13 09:47:27 · 6174 阅读 · 0 评论 -
vue+elementUI下拉框联动显示
<el-row> <el-col :span="12"> <el-form-item label="主账号:" prop="partyAccountId" :rules="[ { required: true, message: '主账号不能为空'}]"> ...原创 2019-03-19 17:14:57 · 5969 阅读 · 1 评论 -
vue+elementui分页输入框回车与页面中@keyup.enter事件冲突解决
解决这个问题的思路只要判断事件源是哪个就好。el分页的回车触发事件是在按下时,抬起并不会再触发。而keyup.enter事件是在抬起时触发。so,找不到分页的回车事件那就拿keyup.enter事件搞事情。只要判断这个抬起事件的$event中的锚点样式判断不等于分页特有的样式就可以了 @keyup.enter="allKeyup($event)" //页面上的 //js中 all...原创 2019-03-14 11:15:47 · 2222 阅读 · 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 · 3669 阅读 · 2 评论 -
AngularJS的自我理解
最近在学AngularJS的框架开发,虽说到现在还只学到一半,但是我还是想把从开始到现在对AngularJS的思路理解写下,以便更好的回顾所学的知识。当然、后续的学习我也会在后面完善这一半的结果。 以下是我自己最近所学的理解,当然理解走向有误也希望有读者能够指出,菜鸡在这里先谢谢了! AngularJS是一个前端JS框架,核心的是:MVVM、模原创 2015-07-03 10:16:51 · 893 阅读 · 0 评论 -
AngularJS的更高一步见解
前面有了章关于AngularJS的个人见解,那时算刚入门搞得比较混乱。这里是相对于之前写的再完善些。 在写AngularJS中,有些人写function函数代码时,是在window域下写的。虽说这样写也没错,但是却不符合AngularJS的思想。因为不是模块化。 AngularJS其中的一个思想就是模块化,所有的方法操作都应该在angularJS.modul()方法的对象内使用,不然会被认为改方原创 2015-07-14 10:40:01 · 522 阅读 · 0 评论 -
angularJS最近总结一些零碎的知识点
controller处理页面ui相关的东西,service处理数据的东西。 如果N个controller有共同的需要处理的东西,可以放在service里面,也就是java中的抽象类。比如LogService处理日志类的东西。 require('app.js')等价于<script src="app.js"></script>不用路径,只要写目录名称即可。当然,如果你存放的路径不同的话,那就需要这原创 2015-07-28 14:02:19 · 647 阅读 · 1 评论 -
angularJS中的路由
这两种都是路由的设置。只不过第一种应该是angularJS中原生的路由模板。而第二幅图,则是ui-router中的路由模板。这两种到底有什么区别呢? 首先,我们可以发现,这两种路由注入的参数不同,其次次配置路由的写法也不同,一个是$routeProvider.when 一个是$stateProvider.state 第二种路由的设置可以看 http://www.oschina.net/tra原创 2015-07-29 14:12:26 · 555 阅读 · 0 评论 -
前端开发的经验
最近在公司做个项目,嗯!是用angularjs跟bootstrap纯前端开发,不过我就做个小模块,但是其它模块大体也都是这样做就是,有些功能有的没的。 好了,写这篇文章的目的有两个,一个是总结下最近所学,另一个是希望在写这文章中能另有收获。 总的来说还是有学到些东西,但是一些指令跟功能效果的东西,可以说基本没学到,自己看的话还是有些难度。在做这项目模块时感觉自己就像是搬运工,把牛人写好的指令,功原创 2015-08-18 16:40:24 · 808 阅读 · 2 评论 -
json to js OR js to json
字符串转对象(strJSON代表json字符串)var obj = eval(strJSON);var obj = strJSON.parseJSON();var obj = JSON.parse(strJSON);json对象转字符串( obj代表json对象)var str = obj.toJSONString();var str = JSON.stringif原创 2016-01-20 17:11:59 · 570 阅读 · 0 评论 -
angularjs 上拉加载,下拉刷新数据功能
虽说angularjs 1.x版本中对于上拉加载,下拉刷新数据功能都有做些封装,但还是有些人不清楚。其实我一开始也是不懂的,so.现在把搞懂的记录下免得少走弯路。 now,begin:先说下拉刷新吧,原理就是每次下拉都重新去服务器请求过一次新的数据。一般这种刷新功能的响应数据(也就是服务器返回的(json)数据)中都会带有"rowsOfPage": 3, "curr原创 2016-04-25 11:52:35 · 21604 阅读 · 6 评论 -
How to use $cordovaSQLite in Ionic Framework
本文来自google中的一篇关于$cordovaSQLite使用的例子,摘自https://codepad.co/snippet/131f3bvar db = null;var example = angular.module('starter', ['ionic', 'ngCordova']).run(function($ionicPlatform, $cordovaSQLite) {原创 2016-06-12 14:08:49 · 1444 阅读 · 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 · 2671 阅读 · 0 评论 -
循环下标作为字段名自身内容部分--获取对应的值
一般写对象层级都是用 “.”点的方式===>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 · 484 阅读 · 2 评论 -
elementui 使用el-table完成transfer基本功能
不知道大家有没碰到用elementui中transfer组件功能,里面的列表其实是el-checkbox-group。这就有个问题,如果列表中有多列数据需要区分显示就没办法了,毕竟是el-checkbox。但是这种需求的功能一般项目都不多。 下面这个是我改造的效果 初始数据也可以在右边已选框中。如果有多列可以很好区分开。...原创 2018-08-14 23:09:27 · 15778 阅读 · 9 评论 -
vue中使用websocket
最近项目需求需要实现账号唯N性。同一账号允许多窗口、多台电脑登录上限。由项目需求所得,想用websocket实现看下。以前也没正式玩过。项目结构-login登录成功后会跳转到以main.vue为基础页面的界面上,所以我只要在main.vue页面的mounted中去创建以及在beforeDestroy中去销毁websocket基本就可以了。因为在vue中有多个方法地方需要用到同一个websoc...原创 2018-12-26 16:21:51 · 21519 阅读 · 6 评论 -
vue+elementui文件上传以及校验提示
好记性不如烂笔头,还是老实记录下。我这边上传文件是统一通过表单提交上去,不是单独上传文件。所以用var formdata = new FormData(); 对象来上传表单以及文件。其中的一个需要上传的文件,(目前只能上传一个)。<el-form-item label="导入资产表:" :label-width="formLabelWidth1" prop="uploadMateria...原创 2018-12-27 15:13:01 · 24497 阅读 · 1 评论 -
使用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 · 4580 阅读 · 0 评论 -
JS中的定时器
在JavaScript中有时要用到定时器!我个人没接触之前,一直认为定时器就应该就是跟倒计时差不多,在规定时间内完成一些事件才是定时器。然后。。。我知道我错了。 定时器,这个词感觉有些“高档”,我百度了看看,其实也就那两个定时器。setTimeout("function()";DelayTime);跟setInterval("function()";DelayTime);就以我看百原创 2015-07-01 14:05:48 · 497 阅读 · 0 评论