- 博客(33)
- 资源 (3)
- 收藏
- 关注
原创 前端使用cache storage实现远程图片缓存
网页中的图片首次加载时会将图片blob文件存储到cache,网页刷新图片优先从cache缓存中读取,不会再次从服务器请求。
2024-01-31 10:29:06 513
原创 根据文件地址下载文件
// row.url 为文件地址handleDownload(row) { const link = document.createElement("a"); link.download = row.fileName; link.style.display = "none"; link.href = row.url; document.body.appendChild(link); link.click(); URL.revokeObjectURL(link.href);
2022-05-13 16:28:29 462
原创 element-ui el-dialog侧边弹窗可横向拖拽改变宽度
el-dialog侧边弹窗可横向拖拽改变宽度,并且存储到localStorage,刷新页面后依然是拖拽后的宽度Vue.directive('dialogDrag', { inserted: function (el) { const dragDom = el.querySelector(".el-dialog"); dragDom.style.cursor = "e-resize"; const dialogHeader = el.querySelector('.el-dialog__hea
2022-05-13 16:22:26 2339
原创 el-tree 树形节点设置水平排列
此弹窗用于给角色授权菜单、按钮权限,在树形节点中希望按钮节点能水平排列展示template: menuType ===2 用于判断是否是按钮节点,设置类名btn-node<el-tree ref="tree" class="filter-tree" node-key="id" show-checkbox highlight-current default-expand-all :data="list"> <span v-if="data.menuTyp
2022-05-09 10:36:39 953 1
原创 关于promise.all()如何使用
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。关键代码:将所有异步操作存储到数组pros中,Promise.all(pros)执行所有异步操作let pros = []data.forEach(element => { pros.push( this.getJsonFile(element.json,element.fileName) )}
2022-04-06 11:01:03 2137 1
原创 element el-tree折叠收缩
原理:通过el-tree 的 elTree.store.nodesMap获取所有树节点,设置所有节点的 expanded 属性,使用该方法时特别注意el-tree必须设置node-key="id",作为每个树节点唯一标志,否则使用elTree.store.nodesMap 获取所有节点返回是空效果图template代码<h3> <span>el-tree折叠收缩 </span> <el-tooltip class="item" effect="dar
2022-03-30 14:31:02 2906
原创 有意思的css3属性:mix-blend-mode: difference
文字颜色随背景色改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>.
2022-03-24 10:11:37 107
原创 vue-element 实现动态换肤存储
需要实现的效果:选择颜色块或者颜色选择器切换网站主题色,选择主题后保存到本地,下次打开页面是缓存的主题色原理:根据ElementUI官网的自定义主题,新建一个样式文件:element-variables(或者参考官网生成),在文件中写入:/* 改变主题色变量 */$--color-primary: #409eff;$--color-success: #67c23a;/*....还可以定义更多变量*//* 改变 icon 字体路径变量,必需 */$--font-path: '~elem
2022-03-09 15:12:51 1853 1
原创 js使用canvas生成4位随机验证码
效果图如下如果觉得太花了,上面的线条 和 点 可以去掉 - -!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
2021-12-07 16:48:04 517
原创 Ambari web windows环境搭建
安装nodejs,我的是v12.16.1安装brunchnpm install -g brunch切换到Ambari-web源码目录下,安装淘宝镜像(这个yyds,很多报安装失败的时候就先安装这个,再装项目依赖)npm install --registry=https://registry.npm.taobao.org切换到Ambari-web源码目录下,安装依赖npm install构建执行brunch build在观察模式下启动brunchb..
2021-12-07 16:30:34 577
原创 css实现图形边框
html部分<template> <div class="app-wrapper"> <div class="home"> <div class="border-box">图形边框</div> </div> </div></template>css部分<style lang="scss" scoped>.app-wrapper{ padding: .
2021-11-29 10:17:36 472
原创 vue echarts绘制省份地图并添加自定义标注
效果图在main.js中引入地图import echarts from 'echarts'Vue.prototype.$echarts = echarts;省份是动态引入的,在.vue文件中html部分<div id="province_map_box"> <div id=province_map"></div></div>css部分<style lang="scss" scoped> #province_map_
2021-11-29 09:59:09 6413
原创 vue 前端配置按钮权限
拿到产品需要配置的按钮权限清单,如下在中台 菜单资源 配置中添加按钮,根据页面位置添加,'权限资源’名称不可重复注意一定要是类型按钮,然后再角色中资源关联去给按钮权限赋值登录后获取后台返回的按钮权限数据,转换得到按钮key数组:btnPermissions(根据后台返回结构自行决定是否需要转换),将btnPermissions存储到session storagelet btnPermissions = ['domain:query','domain:add','domain:e..
2021-11-09 14:58:23 2133
原创 axios各种请求写法
//参数json格式return axios.post('/hrds-base/dataAuth/add',params);//formdatareturn axios.post('/hrds-base/dataAuth/add',{params});return axios.post('/resume/activeListReport',qs.stringify(params));return axios.get('/hrds-base/user/pageList?'+qs.stringify(
2021-11-08 11:27:32 228
原创 vue 不同类型的Blob文件流下载到本地
/**将文件下载到本地@param {[type]} data [二进制文件流]@param {[type]} fileName [创建的下载文件名]*/export function dowloadFunc(data, fileName, fileType) { try { let type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'; switc
2021-10-20 10:52:50 428
原创 position:fixed苹果和安卓的区别
生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。在安卓中,fixed的定位在页面滚动时,会相对于浏览器窗口进行绝对定位;在苹果系统中,fixed的定位是绝对定位,等同于absolute。解决办法:将原本不需要定位的内容实现绝对定位;转载于:https://my.oschina.net/mingriyi/blog/2989513...
2021-10-13 10:45:06 509
原创 el-tree 获取所有选中节点包含父子节点并回显
<el-tree ref="menu" :data="treeData" show-checkbox node-key="id" :props="defaultProps"></el-tree><script>//获取所有选中的子节点let checkedKeys = this.$refs['menu'].getCheckedKeys()//获取所有选中的父节点(半选中)let hafCheckedKeys = this.$refs['m
2021-05-26 16:00:55 4518 6
原创 vuejs+mui实现移动端上拉加载更多
对mui框架里面的上拉加载更多方法进行改造,能实现结合vuejs使用效果图:html结构<div id="dataList" class="testdata"> <!--这个div不可缺,滚动容器--> <div> <ul id="showdata" class="tablelist"> <li v-for="(item,index) in dataList" :key="'a'+index">{{item.name}}&
2021-03-11 11:55:05 323
原创 移动端1px细边框实现方案一
先来看两张图,一定要仔细看粗边框效果图细边框效果图这是在浏览器端调试的截图。。凡胎肉眼可见。。没多大区别。。。但在移动端UI看的出来 o(╥﹏╥)o直接说怎么实现的吧,主要利用伪元素和**transform: scaleY(.5);**属性对1px大小的伪元素进行缩小.tablelist li{ position: relative; padding: 0 10px; display: flex; text-align: center; align-items: center; co
2021-03-10 16:37:24 164
原创 将表单数据转为json对象
function form2Json(form) { var jsForm = form.get(0); var formData = new FormData(jsForm); var json = {}; for (var [a, b] of formData.entries()) { //这里是如果有多选框多个值使用逗号拼接 if(json[a]){ json[a] += ',' + b; }else{
2021-02-19 13:52:06 306 1
原创 wangEditor编辑器自定义上传图片入门
wangEditor编辑器自定义上传图片入门初次入坑,首先被界面所吸引,其次轻量级使用,真香从官网进去下载js源码,CDN 链接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js事情是这样的:我们项目需要在jsp一个弹窗页面引入,同事之前尝试用UEeditor,没搞好,让我帮忙,一看,那界面…最主要的是只能全局引入才能生效,果断劝退我。。。开撸html代码:<div id="div1">
2021-02-06 16:36:01 956 1
原创 easyui datagridview自定义展开收缩,不带+-号
首先上效果图,点击“运单数量”列的数字实现展开收缩实现步骤(1)引入 datagrid-detailview.js,下载地址(2)初始化表格$("#finishedDispatchTable").datagrid({ data: finishedList, width : '100%', height : 'auto', pagination : false, showFoote
2020-10-08 15:33:13 1193
原创 百度地图规划驾车线路DrivingRoute,自定义标注线路样式,禁止起始点途经点拖拽
此线路规划带途经点,起点、途经点、终点不可拖拽,但线路其他地方可以拖拽,根据百度规划的线路信息返回后台存储/***start:起点是point 对象如:var start = new BMap.Point(纬度,经度);*/function map_search(start,end,route,wayPoints){ //map.clearOverlays(); //清除地图上所有覆盖物 var transit = new BMap.DrivingRoute(map, {
2020-09-10 16:07:35 8078 3
原创 easyui 复杂表头合并列
先上效果图:$('#rteLogGrid').datagrid({ url:'<%=basePath %>/orgRteLog/list', method:'POST', fitColumns:true, striped:true, columns: [ [ { title: '自提点编号', field: 'orgId', width: 90, align
2020-07-27 16:03:11 408
原创 js解密(crypto-js)时的坑
场景:生成带参数的外部链接时,需要将参数做成加密串,前端展示链接需要将加密串解析出来,获取参数,解密方法Decrypt会遇到一个坑,加密串作为一个链接url时如果有加号+会被替换成空格,导致解析失败链接:解决方法1(有坑不推荐):使用replace()用加号+替换空格还原加密串let qstr = this.$route.query.code.replace(/\s+/g,'+');let id = Decrypt(qstr);此方法的坑:如果加密串有两个或以上连续的空格,只能替换回来一个加号,
2020-07-24 17:19:30 931 2
原创 js+css实现表格表头固定
js+css实现表格表头固定html结构(重点结构)css(重点)js效果图html结构(重点结构) <div class="tbwrap"> <table id="mttable" class="mui-table-view mttable"> <thead> ... </thead> <tbody> ... &
2020-07-03 16:06:29 574
原创 复制已有表单FormData数据,添加到新表单提交
var newform = $("<form></form>");//原表单var form = document.getElementById(formId);var formData = new FormData(form);//遍历表单数据for (var [a, b] of formData.entries()) { //我的是不需要传文件提交,如需要就注释下面三行代码 if(a=='file'){ continue; ..
2020-05-29 17:22:15 1205
原创 Easyui 表格中复选框设置单选
Easyui 表格中复选框设置单选单设置singleSelect:true 是不行的,一定还要在data-options中设置data-options=“singleSelect:true,checkOnSelect:true,selectOnCheck:true”如果不想点击表格行的时候选中复选框,就设置checkOnSelect:false顺便附上官方说明:checkOnSelect boolean 如果设置为 true,当用户点击某一行时,则会选中/取消选中复选框。如果设置为 false
2020-05-21 16:45:38 1864
js纯前端生成sheet插件xlsx.core.min
2020-10-08
datagrid-detailview.js下载
2020-10-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人