- 博客(58)
- 收藏
- 关注
RSS订阅原创 vue组件 导出excel,并且可以合并单元格，设置宽度，字体颜色，换行等
需求：在开发后台管理系统中，经常会有导出表格的需求，本案例实现了在导出时，可以合并单元格，设置单元格字体颜色和宽度，插件：xlsx（0.18.4），xlsx-style（0.8.13），file-saver（2.0.5）
2023-07-17 16:26:33
1149
原创 移动端手势操作库pinchzoom，图片捏合放大缩小
高度固定，宽度自适应，也可根据pad 的宽高来计算，实现图片等比例缩放。需求：移动端项目，实现图片根据手指的捏合来放大缩小图片。
2023-07-17 15:44:49
548
原创 vue 移动端可拖拽式icon图标
需求描述：在移动端页面悬浮一个可随便拖拽的图标，类似于苹果手机的辅助触控小圆点，并且可随意拖动。预览：组件代码如下：<template> <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}" ref="div" @click ="onBtnClick.
2021-11-29 14:47:03
1018
原创 vue 连接高拍仪实现pc 端拍照上传功能
需求描述：实现电脑拍照内置摄像头拍照和连接高拍仪外置摄像头拍照。实现原理：利用H5 调用浏览器的摄像头来实现视频功能，然后利用canvas 截图，把当前的屏幕截取，生成一张图片。注意事项：电脑有内置的摄像头，也有外接的高拍仪，所以需要获取到全部的，然后可以选择切换摄像头。打开弹窗时会默认获取所有的摄像头，并且默认选择第一个，然后打开摄像头。点击确定时会生成一张图片。然后拿到图片就可以调取接口了。效果如下：以下为拍照子组件代码：里面有一点点数据是业务数据，可自行去掉。<
2021-11-29 14:27:00
2611
3
原创 微信小程序公共js里面 修改page 页面data的数据 getCurrentPages
最近维护小程序遇到的问题，有n 个页面需要加一个验证的方法，从而改变页面里面的data 的多条数据，然后在进行后续的业务逻辑。这种问题肯定就是在公共的js 里面写一个方法，然后在每个页面调用一下。但是问题是如何在公共的js 里面修改page 里面xxx.js data 的数据。同样引申 修改历史页面的数据 的问题。经过查阅发现，微信小程序提供了一个方法：getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。.
2021-09-28 14:24:34
1425
原创 svg 图标只有点击 图标的边才会触发点击事件
近来开发时发现，svg 图标添加点击事件只有在点击 图标的边时才有效。经过查阅，解决办法有两个 ，在此记录一下1. 设置csssvg{pointer-events: none;}2. 在svg 图标 外层套一层 ，给外层添加点击事件...
2021-08-13 10:09:08
1501
原创 vue + el-table +Print.js 实现前端打印分页多页表格
发大水阿斯顿发说法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入样式 -->
2021-07-08 11:03:35
5411
2
原创 微信小程序自定义相机拍照，计算大小，以及上传
需求：近来微信小程序有个需求，自定义相机拍照，并且要在相机中画一个框，提示用户把拍摄内容放入框中，类似于上传身份证时那个头像，国徽对其的框。（因为我们上传的是一份A4纸的病例），所以需要这样。然后后台解析上传的病例图片，返回给我病例数据，我把数据填充到表单中。调研1: 首先想到的是调用微信的 wx.chooseImage ,由用户选择是 解析本地的图片，还是拍照，但是发现一个问题，如下：1）无法自定义相机，导致用户没办法参考拍摄成什么样照片为合格，目前没找到办法。调研2: 后来发现微信小..
2021-04-20 10:57:17
3992
2
原创 前端vue +element Upload组件 调用阿里云oss 上传图片视频
前言：之前上传图片一般都是把file 文件直接传给后台，后台处理，然后返回URL ，阿里云oss 可以直接对接 前端来传输图片，视频 文件。以下为主要代码。1) elementUpload 改写如下。注意一定要用http-request 来覆盖他默认的上传方法。<el-form-item label="头像（必填）" prop="avatarUrl"> <el-upload .
2021-04-15 17:01:07
1370
2
原创 vue 配置proxy 解决跨域
前言：现在开发大多是前后端分离，在调接口调时候，必然会出现跨域的问题，可以后台配置解决，也可以前端配置。vue 最常用的就是配置proxy 来解决。具体如下：1）首先在最外层新建vue.config.js 。在里面配置。一下，所有访问以/admin,/api 开头的接口，都会被代理，访问到下面target 的网络地址。pathRewrite 为替换的地址，意思为把 /admin 或者 /api 在请求接口是替换为什么，我的就是替换为空。module.exports = { de...
2021-03-29 14:34:06
3022
4
原创 微信小程序request 请求封装
关于微信小程序request 请求接口的封装，在此记录一下。封装如下：request.js 文件/** * 获取header */function getCommonHeader() { let header = { 'Content-type': 'application/x-www-form-urlencoded' }; // 如果token有值则带上 let token = wx.getStorageSync("token"); if (token..
2021-03-19 15:56:20
332
原创 微信小程序引用vant weapp 的 van-dialog
近来做微信小程序，用的是vant weapp 的ui ,用到van-dialog 组件时，发现除了全局引用之后，还得先自己引用一下 dialog 组件，才可以使用。具体使用方法如下：我的页面结构如下使用方法：1.我现在要在examine 页面里面使用，首先要在examine.js页面引入（引入时一定要看好层级和路径，重点 引入的文件为npm 构建之后的文件，路径为自己的路径，并不是文档中的路径和dist 里面的文件路径）import Dialog from '../../mi...
2021-03-16 16:02:40
2787
原创 关于sessionStorage 的详细理解以及在移动端出现的bug
bug出现场景： 项目中利用sessionStorage 在本地存储一些数据，然后跳转页面时利用 location.href='aa.html' 来跳转页面，跳到 aa 页面时，再获取sessionStorage 里面的数据。 以上操作在浏览器端都没有问题，但是在用hbuilder 打包成 移动端app 之后，跳转页面之后就会丢失sessionStorage 里面的数据，获取到的为null。bug出现的原因为： 在移动端使用sessionStorage 时，...
2021-01-13 10:18:28
1722
原创 vue中使用axios 无痛刷新token,替换旧token
需求：最近项目有个需求，后台返回token之后，过一段时间就会过期，为了让用户无感知操作，前端需要利用旧token 去请求新token，请求成功之后，用新token 接着进行接口调取。关于刷新token的问题，网上查了很多，有很多解决方案，要和后台的同学商量好，总之目的就是替换token，并且让用户无感操作。我的思路为利用axios 的拦截器，判断如果返回是401 ，那么就利用旧token去请求新token，完成之后再继续请求之前未成功的接口和 缓冲起来的接口（见下文）。问题一：t...
2020-12-17 17:31:22
3544
8
原创 自定义webpack3插件plugins
之前的老项目有个需求，在用webPack 打包完之后需要复制一份 dist 文件到别到目录；经过查看webpack 文档，发现可以利用 webpack 的生命周期钩子来实现。其中有个钩子为done ,意思为编译完成后执行。此时已经生成了dist 文件，只要再用node 把文件复制一遍即可。官方文档：这是webpack 5 的写法，这是webpack3的写法：在调用done的时候不同版本的写法有差异，搞了很长时间class donePlugin { apply(compiler)
2020-11-25 17:37:35
1220
原创 移动端适配postcss-px-to-viewport ，兼容vant
之前做移动端是用rem布局来做自适应，前博客有提到。就是把px 根据根元素转化为rem。现在发现了一个新的技术方案。把px 转化为转换成viewport单位，是根据视图的宽高来计算。vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth用法如下：一：安装npm install postcss-px-to-viewport --save-dev二：在vue的根目录下新建postcss.config.js，引入如下代码：module.export
2020-07-28 14:12:33
3120
10
原创 微信公众号开发前端逻辑
近来做微信公众号开发，记录一下前端的开发过程。其实微信公众号就是提供一个入口，来把自己开发的项目可以链接到微信公众号，来达到用微信访问的目的。自己的项目就是一个移动端的网页。可以用任何技术实现，和微信小程序不同。1）首先自己的项目入口路径需要链接到微信公众号的菜单栏，当点击菜单栏的时候，上面会携带一个code值，（XXXX?code=XXX），这个code是微信自动生成，每次点击都会有一个不同的code。2）利用上面的code值请求接口，会获取到openId。此openId 是唯一的，一个微信号
2020-07-22 14:05:26
1137
原创 关于苹果 safari 浏览器日期 的兼容问题
记录苹果 safari 浏览器的兼容性问题。近来做微信公众号遇到的问题。根据时间判断是否能点击，如果小于当前时间，说明是以过去的时间，则不能点击。后来在苹果上出现问题，经查才知道，有兼容性，在此记录一下。一：关于日期问题。ios 创建时间不支持中划线，只支持 /在创建 Date 对象时没有使用new Date('2020-01-01')这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是new Date('2020/01/01')。...
2020-07-08 13:18:33
868
原创 基于 NetModular 框架开发前端记录
详情请了解 => 官方文档：https://docs.17mkh.com/guide/由于公司项目用这个框架作为初始开发版本，后台 .net,前端vue 。此框架后台配置之后，会自动生成前后端基本代码，在开发过程中只需要修改就可以。但是遇到与原框架不吻合的需求，会变得很麻烦。由于开发中遇到一些问题，所以在此记录一下。一：关于 nm-list 组件； 此组件封装了element 的table 大部分功能。 1）表格数据自定义请求和过滤数据 组件的表格数据必须通过a...
2020-07-08 11:33:54
1724
原创 关于日期的算法整理，获取本周，上周，下周 的开始，结束时间，以及周一到周日的日期
近来做了一个医院预约的微信公众号和后台维护系统，需要用到一些关于日期计算的方法。在此整理一下。一：日期工具类（后面扩展的方法会用到这个主方法）function GetWeekDate(time) { let now = time ? new Date(time) : new Date() //当前日期 this.nowDayOfWeek = now.getDay() //今天本周的第几天 this.nowYear = now.getYear() //当前年 this.nowMont
2020-07-07 09:51:02
1598
1
原创 git 提交报错 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
报错信息：解决： 按照报错日志，找到 c/users/lenovo/.ssh/known_hosts ,以记事本的方式打开，按照日志，删除后面那一句，如下之后重新推送，就可以了。原因是因为才重装系统后，再次进行远程连接上，在输入yes后，本机会将远程机器的信息，写到/Users/lenovo/.ssh/known_hosts/known_hosts文件中，所以如果远程重装系统了...
2020-05-06 13:47:00
618
2
原创 echarts 设置平行于y轴的markLine
问题：最近开发遇到一个echarts，图表的问题，x轴为时间，y轴为数字，需求是需要设置n条markLine ，相关代码写上之后发现不起作用。代码如下(相关变量自行设置) markLine: { symbol: 'none', label: { position: 'middle', ...
2020-04-08 10:52:46
3133
1
原创 vue 动态ref 设置
在vue 开发中，经常会用到ref 属性，一般为写死的ref="xxx",但是有时会用到动态的ref,下面记录一下<div v-for="(item,index) in list"> <fm-generate-form :data="item" :ref="'generate'+index" > &l...
2020-03-04 17:50:53
5743
原创 npm相关报错整理
1）node-sass 安装不上：1.注意node版本和node-sass 版本是否匹配，请看官方网站，如不匹配，修改package.json 里面的版本号，再重新安装。2.Cannot download "https://github.com/sass/node-sass/releases/download/binding.nod的问题新版本解决：一句命令解决 npm i node-...
2020-02-28 11:34:14
154
原创 vue 自定义属性 data-v，closest 获取事件源外层元素
在遇到使用e.target 的时候，通常会传一个参数，比较简单，在此记录一下使用：data-XXX 来绑定 <div class="custom-tree-node" slot-scope="{ node, data }" :data-id="data.id"</div>获取 ：利用closeet 获...
2019-10-22 10:07:46
1729
原创 修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据，有关键字的显示，没有的不显示需求：在element UI tree 原有功能不变的情况下新加1）搜索 tree 时，如果非叶子节点里面含有关键字，那么就显示此节点下的所有节点，此节点下的所有节点不参与过滤；2）所有节点里面含有的关键字都高亮效果如下：实现：1）修改插件自带的 filterNod...
2019-10-09 08:46:07
5376
5
原创 vue h5 实现拖拽
目前项目遇到拖拽的功能，记录一下，大概逻辑如下：1）左侧为分类列表，右侧为数据，根据左侧的列表分类展示右侧的数据；2）右侧的数据还可以拖动到左侧类型里面，类似于文件夹拖动时的剪切，复制实现：div为目标元素，当鼠标拖动下面的li 移上去并放开时会触发，并且鼠标样式会发生变化,注意上面的两个方法为必须li 为移动的元素，deaggable ="true",表示此...
2019-10-08 17:30:58
926
1
原创 vue for 循环element ui 多选按钮组 el-checkbox-group ，单选按钮el-radio-group，输入框el-input，绑定值重复问题
前言：最近在做项目，有个做题的需求，分别有单选题，多选题，问答题，三种题型。因为题的数量不确定，所以肯定是for 循环每一道题，完了之后发现有问题；问题：for循环之后，就会发现，这三种组件（el-checkbox-group，el-radio-group，el-input）以下简称组件。都是只绑定一个变量，来获取当前的值，所以for循环之后绑定的值是一样的，导致出现bug；例如下面的v...
2019-07-18 12:00:54
8641
3
原创 使用vue addRoutes 实现权限分配，并且解决不能删除问题，刷新失效问题
前言：做了好多权限分配的项目，使用了好多种方式控制，个人感觉使用 addRoutes 来做还是比较好的，使用过程中有几个坑，在此记录一下。先在路由index.js文件里面初始化路由：最后在导出let vueRouter = new Router( { routes: [] });//在此写动态加载路由的方法，也就是下面的方法export d...
2019-07-18 11:26:37
1243
3
原创 vue 穿梭框 组件
前言：由于项目需要，element ui 里面的穿梭框不满足需求，所以自己封装了一个穿梭框，此穿梭框为三个，可以两两穿梭。如下图：代码如下：如有bug ,欢迎指出； 其实数据的传输，最好用vuex 来做；下面用的props ,监听来做的。其中需要判断的几个点：大家参考下1）：操作按钮什么情况下可以点，什么情况下致灰；利用:disabled 来判断的2）：穿梭框里面的选项，什...
2019-06-28 10:22:38
7448
2
原创 mongodb 数据库 创建及查询总结
mongodb 的使用，近来在学习后台，以下为自己总结作为笔记保存1） 先在D盘中新建一个文件夹，用来存放mongodb 的数据（我建在了D盘，名字为mongodb）2）开启mongodb服务（开启之后不能关闭，不然以后使用就连不上了）命令，后面跟的为新建的文件夹的路径3) 如果在本地安装了mongdb的客户端，在新开一个cmd 窗口，输入如下命令可以连接上本地的mongod数据库...
2019-05-22 17:27:58
1122
原创 vue-cli3 处理静态文件 下载引用
问题：利用vue-cli3 写的项目，有一个下载excel 模板的功能，模板存放在前端本地，然后下载。解决：1）把excel 模板放到本地项目的 public 下（注意，一定要放在public 下，这样webpack 在打包的时候才不会解析他，会原封不动的引用他）；2）在data里面定义data () { return { publicPath: process.en...
2019-05-07 15:28:44
4272
2
原创 git 切换分支， 合并
git 用法总结：一：如后台仓库新建了一个分支，前端需要在新分支上面开发，那么前端需要在本地新建一个分支（以test为例），并且切换到这个分支上，之后提交就会在这个分支上提交 1：git branch （查看本地分支，*在哪，本地分支就是谁）2.git branch -a (查看远程分支) （远程有两个分支master和test ,当前是master）3...
2019-03-26 09:22:44
416
原创 js 把一个深层数组拉平
工作中经常遇到的问题，把一个深层的数组拉平，在此记录一下拉平一个深层数组，类似于 [1,[2],[3],[4[5]]] 变为[1,2,3,4,5]menuData:[1,[2],[3],[4[5]]]cloneMenuData:[]async getMenusArr(menuData) { for (let i = 0; i < menuData.length; i++) {...
2019-03-21 11:05:21
1131
原创 js递归遍历dom 树
项目中经常会遇到遍历深层数组，不确定有多少级，在这里记录一下arr：需要遍历的数组,类似如下id : 遍历的满足条件async getArray(arr, id) { for (var i = 0, l = arr.length; i < l; i++) { if (id == arr[i].id) { //自己的操作 return fa...
2019-03-15 14:58:55
987
原创 获取鼠标点击的地方，并插入文本。window.getSelection()
前言：因项目需求，有一个富文本框，点击页面的插入姓名，会在富文本框内的鼠标处，插入姓名。解决：利用window.getSelection() 来获取富文本框的焦点，并保存下来，在点击插入姓名时，在再那个焦点处插入。EX：注：因为项目是vue 写的，所以有些变量需要自己在data 里免定义在富文本框内点击的时候保存一下焦点 this.sel ；isWang 是判断插入的时候，富文...
2018-12-13 16:32:14
2188
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人