- 博客(56)
- 收藏
- 关注
原创 uniapp实现页面固定区域转为base64图片预览并手动保存本地
声明:H5目前没有实现直接长按保存到手机图库(浏览器可以直接保存为图片),所以将过程中得到的base64转为真实图片地址用a标签click的方式实现预览,并手动长按图片来保存。uniapp实现页面固定区域转为base64图片预览并手动保存本地。需安装插件 html2canvas base64ToPath。
2024-03-14 11:37:56 927
原创 vue上传文件夹+上传文件vue-simple-uploader
vue上传文件夹+上传文件vue-simple-uploader。在main.js引入。
2024-03-13 10:26:12 823
原创 upload实现大文件切片上传功能
也可以在vue中使用,需要安装插件npm i spark-md5 --save。upload实现大文件切片上传功能(这是个前端小demo)1、建立upload.html。
2022-11-30 17:31:03 431 1
原创 el-upload上传和回显tif图片
主要 :on-change=“changeUpload”el-upload上传和回显tif图片。tif通过链接回显的时候这样处理。
2022-10-10 14:49:21 394
原创 用vue+el-upload+new FormData()实现多图片上传
用vue+el-upload+new FormData()实现多图片上传。
2022-09-02 17:39:07 1718
原创 图表中常用滑动条
图表中常用滑动条dataZoom: [ { show: true, height: 20, xAxisIndex: [0], bottom: 30, start: 0, end: 5, handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c
2021-12-23 15:53:16 245
原创 js将数组中相同项放在一个数组
js将数组中相同项放在一个数组原本数组长这样:图一想将数组中相同项放在一个数组得到:图二转换中也可以得到:图三方法:sortArr(arr, str) { var _arr = [], _t = [], // 临时的变量 _tmp; // 按照特定的参数将数组排序将具有相同值得排在一起 arr = arr.sort(function (a, b) { var s = a[str],
2021-12-23 15:46:52 7163 1
原创 vue+elementui实现列表播放音频,弹框播放视频,轮播图片,外界地址,富文本内容
vue+elementui实现列表播放音频,弹框播放视频,轮播图片,外界地址,富文本内容
2021-12-17 18:16:14 12351 5
原创 解决el-tree回显时因为父节点id存在导致所有子节点被选中,(目的:呈现出部分子节点选中,父节点半选状态)
解决el-tree回显时因为父节点id存在导致所有子节点被选中,(目的:呈现出部分子节点选中,父节点半选状态) <el-tree :data="permissions" :props="props" :default-checked-keys="empower.defaultKeys" node-key="id" show-checkbox highlight-current defaul
2021-12-03 16:39:51 1183
原创 将base64图片转换为file文件通过接口传递后端
将base64图片转换为file文件通过接口传递后端1、方法dataURLtoFile(dataurl, filename) { //将base64转换为文件 var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
2021-09-26 09:41:20 641
原创 vue2.0+electron生成.exe文件
vue2.0+electron生成.exe文件1.安装插件cnpm install electron --save-devcnpm install electron-packager --save-dev2.在package.json中增加指令如图: "name": "ticketing_client", "version": "1.0.0", "description": "A Vue.js project", "author": "‘mengyuntao123’ <‘17
2021-09-15 10:29:18 465
原创 vue中利用富文本编辑器实现将输入文本字符串类型转为txt文件下载输出以及以txt文件格式传递至后端,进行数据交互
vue中利用富文本编辑器实现将输入文本字符串类型转为txt文件下载输出以及以txt文件格式传递至后端,进行数据交互1、安装插件npm install vue-quill-editor --save //富文本编辑器npm install file-saver --save//字符串转txt文件2、main.js引入// 引入富文本编辑器import VueQuillEditor from 'vue-quill-editor'// require styles 引入样式import 'qui
2021-08-17 11:22:10 2340
原创 vue中导入excel文件
vue中导入excel文件1、安装插件npm install -S file-saver xlsx npm install -D script-loader2、在utils中创建excel文件夹放两个js文件第一个Blob.js/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * By Devin Samarin, htt
2021-08-16 17:52:40 1217
原创 css+html实现喇叭或者呼吸灯闪烁效果
css+html实现喇叭或者呼吸灯闪烁效果<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>呼吸灯</title> <style type="text/css"> /* css代码 */ .breath_l
2021-08-16 17:15:28 1079
原创 vue+print.js实现pdf打印预览效果,可实现图表打印效果
vue+print.js实现pdf打印预览效果,可实现图表打印效果1、在utils中新建print.js文件// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print'
2021-08-16 17:12:43 1337
原创 vue+html2canvas+jspdf实现部分内容以pdf形式输出下载
vue+html2canvas+jspdf实现部分内容以pdf形式输出下载1、安装插件npm install --save html2canvasnpm install jspdf --save2、在utils文件夹新建js文件存放以下内容,命名为htmlToPdf.js:/* eslint-disable *///不使用JQuery版的import html2canvas from 'html2canvas';import JsPDF from 'jspdf';/** * @para
2021-08-16 16:10:12 303
原创 小数点后保留两位小数,正则处理输入内容为字母数字,正则处理输入内容为五位数字
小数点后保留两位小数,正则处理输入内容为字母数字,正则处理输入内容为五位数字1、小数点后保留两位小数可用于input框输入function twoclearnumber(value) { if (value) { var f = parseFloat(value); var f = Math.round(value*100)/100; var s = f.toString(); var rs = s.indexOf('.'); if (rs &l
2021-07-14 09:31:25 786
原创 引用基于echarts的中国地图版热力图,地图不出来的解决办法
引用基于echarts的热力图,全国性展示的那种,地图不出来的解决办法首先先看问题图片解决办法1、首先保证安装echarts。2、最重要的一步,在main.js中引入echarts的同时要引入//下边这两行尤为重要,数据才能正常渲染import china from 'echarts/map/json/china.json'echarts.registerMap('china', china)这下再去查看热力图就正常了以为是代码某个地方限制了,巴巴的看了俩小时代码,真的有被累到,原
2021-07-08 11:30:17 2059 3
原创 给内容设置滚动条
给内容设置滚动条例如<div class="wenz></div> .wenz{ width: 56.25rem; height: 35rem; } .wenz::-webkit-scrollbar{ width: 8px; height: 100%; background-color:rgb(29, 16, 16); } .wenz::-webkit-scrollbar-thumb {
2021-07-07 11:01:48 133
原创 elementUI里的table表格,点击行右键出现选择菜单
elementUI里的table表格,点击行右键出现选择菜单(利用连级面板)效果如图<template> <div> <el-table :data="tableData" style="width: 700px" @row-click="clickTableRow" v-loading="loading" border
2021-07-07 09:09:53 2529 1
原创 vue+elementui+minio实现前端直接上传文件到minio服务端存储
vue+elementui+minio实现前端直接上传文件到minio服务端存储呈现如下图:实现方法<template> <div class="minioBox"> <el-button style="marginRight:10px;" @click="getFileName" size="mini" type="success">选择文件</el-button> <input type="file" multiple="
2021-07-06 16:16:23 8090 27
原创 vue适配,在屏上放大缩小内容按比例调整
vue适配,在屏上放大缩小内容按比例调整如图整屏排布,这里以1920屏幕为例屏可视区缩小实现过程1、项目安装插件npm i lib-flexible -Snpm i px2rem-loader --save-dev2、在index.html中更改meta例如:去掉之前的meta<meta http-equiv=X-UA-Compatible content="IE=edge">3、在main.js中引入import 'lib-flexible’4、 在build里的
2021-06-30 15:40:22 2633
原创 将数组转换为供elementui的树形结构识别的数据,并可点击获取选中id
将数组转换为供elementui的树形结构识别的数据,并可点击获取选中id模板中添加树形标签 <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" ref="treeRef" > </el-tree>方法获取数据data: var arr=[ {id:1,fid:nu
2021-06-18 15:59:42 340
原创 根据系统标准时间获取年月日补零用-拼接
根据系统标准时间获取年月日补零用-拼接 /** * 时间戳转化为年 月 日 时 分 秒 * time: 需要被格式化的时间,可以被new Date()解析即可 * format:格式化之后返回的格式,年月日时分秒分别为Y, M, D, h, m, s,这个参数不填的话则显示多久前 */ formatTime(time, format) { function formatNumber(n) { n = n.toString()
2021-06-17 10:40:52 517
原创 根据两个时间时间戳获取间隔时间小时
根据两个时间时间戳获取间隔时间小时 gettimefl(faultDate, completeTime) { var stime = Date.parse(new Date(faultDate)); var etime = Date.parse(new Date(completeTime)); // 两个时间戳相差的毫秒数 var usedTime = etime - stime; // 计算相差的天数 /
2021-06-02 11:51:12 1076
原创 js获取当前天前几天或者后几天日期
js获取当前天前几天或者后几天日期 // 获取当天前几天 getweilaiday(n){ var n = n; var d = new Date(); var year = d.getFullYear(); var mon = d.getMonth() + 1; var day = d.getDate(); if(day <= n) { if(mon > 1) {
2021-05-06 11:06:57 159
原创 小程序页面传参,参数较多含链接容易解析错误
小程序页面传参参数较多时:传递页面:encodeURIComponent(JSON.stringify(event.currentTarget.dataset.detail))接收页面:JSON.parse(decodeURIComponent(options.arrey))
2021-04-10 14:39:06 154
原创 一个盒子垂直占据剩余空间
想呈现一个盒子垂直占据剩余空间,例如盒子3首先设置盒子1:最小高度保证整屏幕,多余会出现滑动条,整体采用flex布局,改变主轴方向为纵轴只需正常设置盒子2宽高,使盒子3 flex:1,占据剩余内容即可...
2021-03-23 11:14:34 464
原创 element ui 表格动态渲染,列表错乱,横向列表对不齐
使用elementui+vue导致列表出现行错乱问题首先先看问题这里出现折断现象解决办法是:在代码中el-tabel处加入ref之后在动态获取列表数据时添加
2021-03-18 09:38:08 400 1
原创 测试对象中的每个属性的属性值是否都不为空
测试对象中的每个属性的属性值是否都不为空var opt= truevar form={id:1,name:'xx',sex:''} for(let key in form){ if(!Boolean(form[key])){ opt= false //先定义一个opt用它的true,false来判断对象中是否有空数据 return }else{ opt= true } }
2021-03-16 17:02:55 267 2
原创 根据年月日判断是周几
根据年月日判断是周几getWeekqq(dateString) { var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; var myDate = new Date(Date.parse(dateString)); return weekDay[myDate.getDay()]},比如参数是“2021-1-3”输出就为当天星期几...
2021-03-10 10:23:53 462 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人