微笑的鱼_-CSDN博客

原创前端使用cache storage实现远程图片缓存

网页中的图片首次加载时会将图片blob文件存储到cache，网页刷新图片优先从cache缓存中读取，不会再次从服务器请求。

2024-01-31 10:29:06 835

原创使用el-calendar实现自定义日程

自定义日历组件样式结合月份选择器实现日程管理组件

2023-12-07 13:34:26 1835

原创 vue 自定义指令实现元素可拖拽宽度调整大小

vue 自定义指令实现元素可拖拽宽度调整大小

2022-11-18 17:32:22 2621 2

原创 el-tree 懒加载的实现以及局部刷新

整个树结构，使用懒加载实现，可整体刷新和局部刷新

2022-11-18 17:23:28 3292 1

原创 uniapp微信小程序使用canvas自定义分享名片

uniapp微信小程序使用canvas实现自定义分享名片

2022-09-14 15:40:05 2020 2

// 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 477

原创 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 2561

原创 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 1098 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 2168 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 2987

原创有意思的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&gt.

2022-03-24 10:11:37 126

原创 vue-element换肤所有主题色和基础色均可自主配置

vue-element换肤所有主题色和基础色均可自主配置

2022-03-23 10:38:28 3894 6

原创 vue-element 实现动态换肤存储

需要实现的效果：选择颜色块或者颜色选择器切换网站主题色，选择主题后保存到本地，下次打开页面是缓存的主题色原理：根据ElementUI官网的自定义主题，新建一个样式文件：element-variables(或者参考官网生成)，在文件中写入:/* 改变主题色变量 */$--color-primary: #409eff;$--color-success: #67c23a;/*....还可以定义更多变量*//* 改变 icon 字体路径变量，必需 */$--font-path: '~elem

2022-03-09 15:12:51 2021 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 535

原创 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 604

原创 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 516

原创 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 6690

原创 vue 前端配置按钮权限

拿到产品需要配置的按钮权限清单，如下在中台菜单资源配置中添加按钮，根据页面位置添加，'权限资源’名称不可重复注意一定要是类型按钮，然后再角色中资源关联去给按钮权限赋值登录后获取后台返回的按钮权限数据，转换得到按钮key数组：btnPermissions（根据后台返回结构自行决定是否需要转换），将btnPermissions存储到session storagelet btnPermissions = ['domain:query','domain:add','domain:e..

2021-11-09 14:58:23 2202

原创 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 244

原创 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 469

原创 position:fixed苹果和安卓的区别

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。在安卓中，fixed的定位在页面滚动时，会相对于浏览器窗口进行绝对定位；在苹果系统中，fixed的定位是绝对定位，等同于absolute。解决办法：将原本不需要定位的内容实现绝对定位；转载于:https://my.oschina.net/mingriyi/blog/2989513...

2021-10-13 10:45:06 550

原创 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 4717 6

原创 vuejs+mui实现移动端上拉加载更多

对mui框架里面的上拉加载更多方法进行改造，能实现结合vuejs使用效果图：html结构<div id="dataList" class="testdata">  <div> <ul id="showdata" class="tablelist"> <li v-for="(item,index) in dataList" :key="'a'+index">{{item.name}}&

2021-03-11 11:55:05 338

原创移动端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 174

原创将表单数据转为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 324 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 997 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 1306

原创百度地图规划驾车线路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 8670 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 455

原创 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 1012 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 583

原创复制已有表单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 1265

原创 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 1983

qq_30907845的博客