业务
HainesFreeman
function
展开
-
vue2组件内部获取路由前后变化
在账户列表页面,需要检测路由变化进行拉取用户数据,不在mounted里面写,就是要检测路由变化并且要获取前后路由的路径,进行一些逻辑的判断。原创 2024-06-27 11:18:40 · 359 阅读 · 0 评论 -
vue输入框只限制输入小写字母以及数字正则
vue输入框只限制输入小写字母以及数字正则原创 2024-04-26 10:28:06 · 373 阅读 · 2 评论 -
element-table 隐藏某几行
element-table 隐藏某几行原创 2022-11-15 11:41:04 · 3697 阅读 · 0 评论 -
::v-deep和/deep/区别
::v-deep和/deep/区别原创 2022-10-31 15:50:36 · 812 阅读 · 0 评论 -
ERP、CRM、CMS
ERP、CRM、CMS原创 2022-10-31 13:47:29 · 262 阅读 · 0 评论 -
vue-print-nb实现页面打印,如何隐藏打印打印区域中的某个div?
vue-print-nb实现页面打印,设置好打印区域后,如何隐藏打印区域中的某个div?原创 2022-10-20 08:51:37 · 2426 阅读 · 0 评论 -
JS数字转中文大写
JS数字转中文大写原创 2022-10-17 10:59:24 · 178 阅读 · 0 评论 -
vue实现每隔3s请求一次接口,返回成功则停止请求
vue实现每隔3s请求一次接口,返回成功则停止请求原创 2022-09-20 22:55:47 · 2645 阅读 · 0 评论 -
移动端抽屉实现css篇
移动端抽屉实现css篇原创 2022-09-19 15:30:07 · 520 阅读 · 0 评论 -
el-table-column数据列错位
el-table-column数据列错位,element表格错位原创 2022-09-16 17:44:05 · 1087 阅读 · 0 评论 -
at packages/date-picker/src/picker.vue 出现父子组件传值违反单向数据流,原因使用element ui 2.15.9中datepicker日期组件 报错以解决如下
element ui 2.15.9中datepicker日期组件报警告原创 2022-09-14 20:45:09 · 588 阅读 · 0 评论 -
vue项目进行前端埋点,记录页面菜单停留时间
vue项目进行前端埋点原创 2022-08-26 11:36:00 · 2162 阅读 · 1 评论 -
vue操作日志-json可视化样式
效果:代码:<template> <PageWrapper> <PageContentWrapper> <el-form :inline="true" ref="form" :model="filterParams" class="demo-form-inline"> <el-form-item label="选择操作模块"> <el-select原创 2022-02-24 13:28:50 · 1582 阅读 · 0 评论 -
vue输入框限制数字
<el-form-item> <el-input v-model.number="child.sort" class="w100" maxlength="10" @input.native="checkoutNumRange($event,0)" oninput="value=value.replace(/[^\d]/g,'')"></el-input></el-form-.原创 2021-11-05 11:46:50 · 625 阅读 · 0 评论 -
window.open在safari浏览器跳转被拦截问题
解决方法: async getToken(row) { // 兼容safari浏览器跳转拦截 let tempwindow = window.open() try { const params = { uid: row.id, } const res = await this.$api.getAdminLoginToken(params) if (res.code === 0) ..原创 2021-05-28 14:10:23 · 810 阅读 · 0 评论 -
循环表单校验,只要有一个不符合条件,则中断循环
1.场景:一个循环的表单,需要校验以下内容:-至少添加一项广告源-至少填写排序字段-至少填写排序-只要有一项不符合,则中断循环,不往下执行下去,所以不用forEach(),采用some()方法,some方法只要return true,则终止循环如下图:2.解决方案: // 表单校验 validate () { return new Promise((resolve, reject) => { const messag...原创 2021-05-18 14:04:12 · 1207 阅读 · 0 评论 -
浅谈测试左移和测试右移
大家熟悉的测试工作可能是,接到项目后参与需求评审,然后根据需求文档写写用例和准备脚本,等开发提测之后正式开始测试、提bug、回归,测试通过后就结束了,项目交给运维上线,之后投入下一个项目继续重复这样的流程。这样的流程看似没什么问题,但缺点是,测试同学非常被动:当需求质量、开发质量差的时候,你只能被动接受,结果就是你会进行漫长痛苦的测试过程以及因为质量差导致上线延期;同时很有可能一个线上问题裸奔了几个月,最后是业务方先发现才排查到是bug导致,由于影响时间过长给公司造成的损失巨大,还被质疑为什么这么明显简单的原创 2020-12-11 09:32:25 · 1061 阅读 · 0 评论 -
element多个弹窗层级问题
问题:我想让抽屉在最上面,但是被遮罩挡住了解决:<!-- 新建编辑流量分层页面抽屉 --> <el-drawer title="策略管理" :append-to-body="true" :visible.sync="flowDrawerFlag" :before-close="closeDrawer" direction="rtl" custom-class="ad-drawer"原创 2020-11-26 20:46:20 · 4908 阅读 · 1 评论 -
vue 中使用防抖和节流
防抖和节流是我们在开发过程中常用优化性能的方式那么在 vue 中怎么使用呢:在公共方法中(如 public.js 中),加入函数防抖和节流方法// 防抖export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arguments; i.原创 2020-09-23 21:51:20 · 686 阅读 · 0 评论 -
element上传图片校验尺寸
<template> <div class="idea-container"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"> <el-form-item label="创意名称" prop="name" class="form-container"> <el-input v-model="ruleForm.原创 2020-09-17 13:41:42 · 954 阅读 · 0 评论 -
基于element封装一个公共的限制图片宽高的方法
utils文件里面增加:/** * 用于图片上传时校验图片的宽高 * @param file file对象 * @param width 规定的图片宽度 * @param height 规定的图片高度 */export function imgSize(context,file, width, height) { let ruleWidth = width let ruleHeight = height const isSize = new Promise((resolve.原创 2020-09-04 10:25:14 · 141 阅读 · 0 评论 -
Vue实现简单实用的 6 位验证码虚线输入框
效果图如上。GitHub地址(包括打包成浏览器组件),感谢支持!!!在开发中,我们可能会经常遇到 验证码组件,上图就是我们设计师给的 UIRemark:具体效果要看需求、样式还是要自己修改一下(可以自己传入 props 定义验证码的长度。)-------------------------------------------之前有小伙伴说没有效果,是因为我是贴了项目上的部分代码,颜色都是白色,现在已经设置了 #323232 , 可以直接看见效果啦。(!!!注意父级样式影响哦)----..原创 2020-06-06 15:09:05 · 885 阅读 · 0 评论 -
swipper只能显示一项,不能滑动
问题:从后端已经拿到数据并且赋值了,并且dom也渲染了,但是页面只显示一项,不能滑动。但是不从后端拿数据,前端写死dom片段却是正常的。解决:初始化swiper的时机不对,应该在ajax请求成功以后,在成功的回调函数里面,进行初始化加载swiper就可以正常展示了。...原创 2020-05-11 13:33:57 · 696 阅读 · 0 评论 -
vue移动端复制黏贴功能
1.需求:点击按钮,复制电话号码,用户在别处可以黏贴之前复制的电话号码。2.分析:最初,使用的input设置opacity:0来实现复制黏贴的功能,可是发现在pc上面可以使用,但是在移动端就不能使用了。后来又采取了别的方案。3.移动端亲测可行的方案:html:<template> <div id="clientInfor" v-cloak&g...原创 2020-03-12 11:21:59 · 1759 阅读 · 0 评论 -
base64编码和解码,原生js
原生atob和btoa方法:实际上,从IE10+浏览器开始,所有浏览器就原生提供了Base64编码解码方法,不仅可以用于浏览器环境,Service Worker环境也可以使用。方法名就是atob和btoa,具体语法如下:1)Base64解码语法为(浏览器中):var decodedData = window.atob(encodedData);或者(浏览器或js Wo...原创 2020-01-22 10:42:40 · 826 阅读 · 0 评论 -
.vue文件使用script引入外部js文件
created() { let arr = ['//y.gtimg.cn/music/h5/player/player.js?max_age=2592000', '//static9.pplive.cn/cloud_platform/ppKit/release/js/player/v5/v_20180426102601/player.min.js', '//g.a...原创 2020-01-08 15:27:13 · 7993 阅读 · 2 评论 -
JSON.stringify()
问题:传给后端的参数某个属性的值是一个json字符串的形式,在前端处理数据的过程中,此属性值是一个json对象,传给后端报500错误。解决:JSON.stringify();写法记忆:前面全是大写JSON,后端全是小写stringify();代码: var self = this; var obj = {}; this.formTextLi...原创 2020-01-08 15:25:29 · 219 阅读 · 0 评论 -
axios之post请求
一共三种参数提交方式:1.payload2.queryString3.formdata原创 2020-01-07 17:44:42 · 121 阅读 · 0 评论 -
子组件向父组件通过$emit传值
1.子组件:<template> <div class="app"> <input @click="sendMsgToParent" type="button" value="给父组件传递值"> </div></template><script>export default {...原创 2019-11-21 17:18:30 · 279 阅读 · 0 评论 -
input的type设置为number的时候,maxlength无效
input的type设置为number的时候,maxlength无效<input type="text" maxlength="6" /> 效果ok <input type="number" maxlength="6" /> 当input type = number 时maxlength失效,长度可以无限输入。解决方案:oninput事件 当长度超...原创 2019-11-14 10:45:08 · 440 阅读 · 0 评论 -
img标签插入图片返回403,图片显示不出来
最后在html中加了<meta name="referrer" content="no-referrer" />解决了原创 2019-11-08 16:52:46 · 537 阅读 · 0 评论 -
JS判断字符串长度(英文占1个字符,中文汉字占2个字符)
//计算字符串长度(英文占1个字符,中文汉字占2个字符)方法一:String.prototype.gblen = function() { var len = 0; for (var i=0; i<this.length; i++) { if (this.charCodeAt(i)>127 || this.charCod...原创 2019-04-17 17:40:40 · 525 阅读 · 0 评论 -
关于loading 处理的逻辑
问题:以前逻辑不清解决:1-封装好loading的dom解构2-在组件里引入,并且隐藏 v-show=false3-点击请求接口的事件函数里面,请求数据前展示,请求到数据后再隐藏参考代码: editPackTag(context, param) { var self = this; console.log(this); context.loadingShow ...原创 2018-10-12 14:37:50 · 493 阅读 · 0 评论 -
邀请加入组织:表单提交操作
html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>邀请加入</title> <meta name="description" content="一书一课"> <meta name="app...原创 2019-07-30 15:09:10 · 181 阅读 · 0 评论 -
js 控制音频音量的大小
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-12-28 10:06:44 · 15486 阅读 · 0 评论 -
有json数据在web界面如何用JS的for循环取出并生成表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><table border=&原创 2018-11-08 13:37:23 · 2101 阅读 · 0 评论 -
js正则设置只能输入0-40的数字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type=&qu原创 2018-10-20 16:48:32 · 3045 阅读 · 0 评论 -
axios的二次封装
import axios from 'axios' // 注意先安装哦import config from './config.js' // 倒入默认配置import qs from 'qs' // 序列化请求数据,视服务端的要求export default function $axios (options) {return new Promise((resolve, r...原创 2018-10-07 16:00:51 · 824 阅读 · 0 评论 -
Nginx与前端开发
Nginx与Node.js“Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡。”作为前端开发,即使没用过Nginx,但一定听说过上面这句话。这句经典的话,基本构成了所有人对Nginx的第一印象。Nginx发布于2004年,经过初期几年的沉淀之后,迅速蹿升为“网红”,成为了当年互联网技术圈最火的...转载 2018-09-28 17:28:20 · 6924 阅读 · 0 评论 -
react项目如何设置404页面
问题:对于项目里面的404页面,之前一直没有理清楚到底是什么样的一个逻辑,现在总结一下解答:1- 首先404是一个页面,先准备好一个静态页面2-利用路由来设置404页面,在路由配置里,假如没有匹配到自己设置的路由,则跳转到404页面参考代码:准备的页面import React from 'react';import PageTitle from 'compo...原创 2018-10-13 16:58:47 · 5347 阅读 · 0 评论