- 博客(34)
- 收藏
- 关注
RSS订阅原创 编辑表单切换为查看表单时设置只读状态
后台管理系统经常遇到弹出一个弹框同时实现新增、编辑、查看的功能，当切换为查看时，我们需要把整个表单设置为只读/禁选/禁止输入状态，避免用户对表单重新操作。实现的方法很多，记录一下今天发现的一个非常简单的方法步骤如下：computed中新增变量computed: { editDisabled() { if (this.dialogTitle === "查看配送渠道") { // 查看配送渠道设为只读状态 return true; }.
2022-02-11 17:03:58
2966
原创 使用NVM管理node版本
一、如果已经安装了nodejs先卸载卸载node本身、删除nodejs目录提示：可以在系统控制面板–>所有控制面板项–>程序和功能 卸载Node.js手动删除C:\Program Files\nodejs\node_modules(如果你的文件是在这里的话)手动删除C:\users\你的用户名\node_modules(如果你的文件是在这里的话)二、nvm下载安装配置github下载地址注意安装路径放在D盘的根目录下傻瓜式安装，选择的版本无需配置就可以使用.
2021-12-17 11:42:44
228
原创 js 小数的加减乘除（保持精度）
/** js默认算法0.1+0.2=0.30000000000000004，使用下边算法结果等于0.3* 加法运算，避免数据相加小数点后产生多位数和计算精度损失。 * * @param num1加数1 | num2加数2 */export const numAdd = function(num1, num2) { var baseNum, baseNum1, baseNum2; try { baseNum1 = num1.toString().split(".")[1].le
2021-09-08 18:10:12
945
原创 点击elementui中el-radio内部的标签不触发外部的事件
<el-radio :label="1" @click.native="payAllotChange($event,1)">测试单选 <span class="desc"> <strong class="a-link" @click="showProtocal">点击子标签</strong> ； </span> </el-radio>实现过程给子标签的点击事件增加.prev...
2021-08-03 16:07:31
1268
原创 margin塌陷、margin合并的解决方案
前端的日常大多还是跟样式打交道，快速渲染页面和解决样式bug是一个合格的前端最基础的能力，这次记录一下两个样式小问题:margin塌陷和margin合并。margin塌陷问题起源：在有父子关系的子元素里，期望让子元素距离父元素的顶部50px,如果直接只给子元素margin-top：50px会怎样呢？代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .
2021-07-13 10:40:31
282
原创 深入了解js中的深拷贝与浅拷贝
一、js中的数据类型在了解深拷贝与浅拷贝之前，我们先来了解一下js的数据类型，在js中，数据类型可以分为如下两类：基本数据类型（Number、boolean、String、NULL、undefined、Symbol(ES6))引用数据类型[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bMV9gWKZ-1625135199875)(/dataType.png)]如上图所示,1. 基本数据类型的数据名字和值都会保存在栈内存中2. 引用数据类型，名字保存在栈内
2021-07-01 18:31:32
428
原创 Vue自定义指令实现按钮权限控制
实现按钮权限控制可以把方法挂载到VUE原型上之后通过v-if来判断,也可以自定义指令来实现控制.接下来主要说一下如何用自定义指令来实现按钮控制.一. 新建userPermission.js文件import Vue from 'vue';Vue.prototype.$userPermission = function(str) { if (localStorage.getItem("setPermissions").indexOf(str) > 0) {//获取用户的所有操作权限 .
2021-06-30 20:53:11
1992
原创 在vue中使用amfe-flexible和postcss-pxtorem实现适配
rem布局是适配不同屏幕的一个好方法，一些插件在这方面已经做得非常完善。记录一下用amfe-flexible和postcss-pxtorem实现适配的过程。一、 插件了解amfe-flexible可以进行HTML根节点的初始化、屏幕自适应。postcss-pxtorem实现将px转成rem。二、技术实现安装amfe-flexible&postcss-pxtoremnpm install postcss-pxtorem -Snpm install amfe-flexibl.
2021-06-25 11:48:12
764
原创 Vue实现横向无缝滚动
需求描述需要实现一个信息条横向无缝滚动，鼠标移上停止滚动移开继续滚动的效果如下图，技术实现本着高效开发的目的，第一步自然是去找有没有合适现成的轮子就直接用了。果然vue-seamless-scroll就能完美实现以上要求。于是封装了一个基于vue-seamless-scroll的信息横向无缝滚动组件安装vue-seamless-scrollnpm install vue-seamless-scroll -S 新建marqueex.vue 组件并引入vue-seamless-scro
2021-06-24 12:00:23
6653
3
原创 SceenToGif 屏幕动态截图成gif文件
最近在写一篇技术博客的时候想要看到实现的动态效果，于是发现了一个超棒的动态截图软件SceenToGif。这是一个开源免费的软件,可复制链接打开或者直接点击蓝字SceenToGifhttps://github.com/NickeManarin/ScreenToGif/releases/tag/2.14.1下载后解压缩点击打开标红框的地方使用界面 截图效果4505453206)]嘻嘻好玩...
2021-06-24 11:33:11
246
原创 VSCode中markdown开启智能提示
需求描述好记性不如烂笔头，最近深刻地意思到了做过的项目记录和总结的重要性。 对于做笔记而言，markdown毫无疑问是个不错的选择，而为了高效输出，设置智能提示可以事半功倍。实现过程文件->首选项->设置（快捷键ctrl+,）打开setting输入MarkDown settings,如下图红框处，点击在settings.json中编辑把quickSuggetions改为true"[markdown]": { "editor.wordWrap": "on",
2021-06-23 23:53:09
6955
原创 在vue中引用全局的SCSS样式
问题描述发现公司所做的VUE项目虽然引入了SCSS,并且做了公共样式的封装，但是在引用的时候却在每个组件写样式的地方都在引入了一遍，很明显，这样的代码是冗余不必要的。于是我重新做了在全局引入scss的公共样式。技术实现在src的assests 下新建一个global.scss文件，把全局样式或者要复用的样式放到这里修改build中文件如下贴上上面的代码scss: generateLoaders('sass').concat( { loader: 'sass-res
2021-06-23 17:46:38
871
原创 在vue中原生封装一个步骤条组件
在项目中我们经常会遇到需要实现进度条、步骤条的效果，因此我在vue中封装了一个效果如上图的步骤条组件。一、在src/components下新建一个process组件1.html部分<div class="showProcess"> <ul> <li class="list" v-for="(item, index) in processList" :key="index"> <div class="ProcessBox"..
2021-06-22 17:07:16
2234
1
原创 由onmouseover、onmouseenter浅谈事件冒泡机制
如上图所示，最近的项目在导航栏处要实现上面的效果，鼠标移开大红框时子导航栏要消失，最开始鼠标移开事件我用的是onmouseover来绑定hideTrade方法，但出现了一个问题，鼠标移出小红框时也会触发hideTrade，改为onmouseleave之后就没有这个问题了，查了一下原来这两个方法最大的不同在于onmouseleave方法会触发事件冒泡。 <transition name="fade"><div class="sonBar" v-show="isTrade" @mou..
2021-06-21 15:01:43
270
1
原创 普通标签禁止点击事件
普通标签禁止点击事件给元素增加类名 :class="{ noclick: isDisableSendCode }".noclick{ pointer-events: none; //普通标签禁用点击事件}
2021-06-21 10:13:51
485
原创 在Vue中基于elementUI二次封装messagebox
在Vue 中基于elementUI二次封装messagebox需求描述为了解决频繁点击某按钮不断触发事件调接口弹出提示语的问题，项目中希望可以在第一次点击调用接口成功之后弹出弹框类提示语并在3秒后自动消失，提示语未消失的情况下不能再次点击，为此，我基于elementui的messagebox进行了二次封装。（样式简略意思一下）一、封装confirm.js/** confirm.js */import Vue from 'vue';import { MessageBox } from 'e
2021-06-18 21:33:17
1512
原创 解决VUE打印时多一页空白页的问题
解决Vue调用window.print打印多处一页空白页的问题代码实现@media print { @page { margin-top: 0mm;//解决打印多出一页空白页的问题 }}
2021-06-17 11:09:37
1545
1
原创 vue一屏网页
VUE实现屏幕自适应 页面一屏展示需求描述头部引入公共的导航组件，下面的内容自适应占满屏幕剩下的所有部分，该页所有内容一屏展示，不能有滚动条的出现。举例如下图：![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616123248715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl
2021-06-16 12:33:40
667
原创 Vue+Webpack项目多环境打包
Vue+Webpack项目实现多环境打包问题描述项目需要部署到线上开发环境，线上测试环境以及线上生产环境，不同环境访问的地址不同，但是原来的项目采用的是在不同的环境下注释代码展示不同的地址的方式，很明显这样是非常麻烦且有一定的风险的。为此，特意做了此次记录用命令行来实现Vue+Webpack项目多环境打包一、 安装依赖cross-envnpm i --save-dev cross-env二、修改package.json文件"scripts": { "dev": "webpack-d
2021-06-15 11:40:52
749
1
原创 Vue实现数据超过三条展开收起功能
Vue 实现数据超过三条展开收起功能项目描述如图所示，当数据超过3条时，要出现展示或收起的文字，点击展示或收起要实现对应的功能。少于三条时正常展示。 { // 判断传进来的数字是否为非空数字 if (!isNaN(parseFloat(num))) { var newNum = Number(Number(num).toFixed(2)).toLocaleString('zh', { minimumFractionDigits: 2 })
2021-06-02 16:20:12
465
原创 利用input上传文件按钮优化
利用input上传文件按钮优化<el-button type="primary" class="btn" v-else> 上传附件<input class="input" type="file" accept="*.*" ref="file" title="" @change="uploadFile"/></el-button>.btn{ position: relative; .inpu
2021-05-31 17:55:03
390
原创 el-raido禁用后如何点击弹出弹框
el-raido禁用后如何点击弹出弹框如果我们在项目中既要给el-raido绑定disabled（此时el-radio封装的@change事件就会失效）,同时还要能点击弹出弹框，那我们就可以使用原生的点击事件 @click.native绑定方法,注意一定要加上 .native才会生效<el-radio-group v-model="ruleForm.num"> <el-radio :label="0" :disabled="grade==1" @click.native="n
2021-05-31 17:38:10
420
原创 elementui实现日期和时间的选择
elementui实现日期和时间的选择需求：在项目中期望实现一个日期和时间的选择器(两个框)，时间点默认设置为23：59;如下图实现过程一、引入elementui的el-date-picker和el-time-picker<el-form-item label="截止时间:" prop="tenderTime"> <el-
2021-05-31 16:53:06
6314
原创 解决父元素的透明度影响子元素的问题
saas(sccs)、less、stylus三者的区别最近在项目中遇到了一个关于透明度的问题，给父级设置透明度，使用（opacity),子级的正常样式会受到影响。问题的解决通过审查元素可以发现，子级继承了父级的opacity样式，从而影响了该有的样式；给子级设置opacity为1，依然没有效果；通过搜索引擎我们可以知道，opacity的样式会被子级继承，但rgba不会，通过网上的工具就可以快速把十六进制的颜色样式转成rgb的样式,a的值和opacity的值保持一致由此，问题得到了解决
2021-04-27 17:52:20
1114
2
原创 saas(sccs)、less、stylus三者的区别
saas(sccs)、less、stylus三者的区别在用css写样式的时候，我们可以发现css是存在着挺多的问题的，列举一二如下：1、css语法不够强大，比如css的选择器无法进行嵌套，导致css中存在较多重复的选择器语句；2、css无法定义变量以及没有合理的样式复用机制，导致整体css样式难以维护；于是，css预处理器应运而生，目前较为常用的sass(scss)、stylus、less都是其中的佼佼者，我在项目中曾用过其中的scss和stylus,今天来总结一下它们的区别。一、变量Sass
2021-04-23 15:42:10
1910
原创 js数组去重的常见方法总结
js数组去重的常见方法总结由于在项目中前后端的分离，大多数时候前端只需要负责页面渲染和逻辑交互的工作，一般的数据处理都由后端完成，所以数组去重在实际工作中可能用得并不是特别多，但玩转数组这么有趣的事情，还是值得玩一下的。一、创建新数组,把原数组中不重复的值存到新数组中1、利用indexof判值function unique(arr){ var newArr=[]//创建一个新数组来接收不重复的值 if(!Array.isArray(arr)){//判断是否为数组 co
2021-04-22 17:48:40
166
1
原创 修改elementui导航栏样式
修改elementui 导航栏样式问题描述最近在项目中引入了elementui的NavMenu,但是侧边栏的图标不能直接套用，且elementui能够提供的icon非常有限且不符合要求，UI已经把常规、选中、鼠标悬浮三种状态的小图标切好，那么如何来实现自定义的icon呢？问题解决1、F12打开控制台找到鼠标移上以及选中状态下对应控制样式的类名，如下图2、自定义icon类名<router-link to="/projectManage"> <el-menu-item
2021-04-21 16:21:44
4375
原创 解决vue项目在IE浏览器中的缓存问题
最近在做IE浏览器的兼容，虽然很麻烦，但可以丰富一下自己的经历还是很棒的最新的一个问题是：在IE浏览器中，在做了某个操作（增删改查之类）之后项目理应重新调用接口请求得到新的数据，而实际上却根本没有重新调起请求，搜索了一下发现只要在接口上加上时间戳或随机数就行了解决办法：在每个接口上依次去加显然浪费时间给自己增加了太多的工作量，在main.js里添加请求拦截并给请求拼接上随机数即可实现。// 添加请求拦截器axios.interceptors.request.use(config => {
2020-09-23 20:21:09
947
原创 vue限制输入数字或保留后两位的小数
vue限制输入数字或保留后两位的小数<input type="number" @keydown="handleInput" placeholder="请输入投标金额" v-model="tenderMoney">handleInput(e) { // 通过正则过滤小数点后两位 e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null},...
2020-09-22 11:43:14
3076
3
原创 f.apply(f, arguments)
f.apply(f, arguments)的解释在执行过程中，arguments的参数会被转化成一个一个参数传递给函数ff.apply(this,[params1,params2,...])//相当于f(params1,params2,...)//这里的this指向执行f函数的作用域
2020-07-09 15:08:03
424
原创 vue实现前进刷新后退不刷新且后退时回到历史浏览位置
Vue实现前进刷新后退不刷新且后退时回到历史浏览位置需求最近的项目需要实现从列表页跳到详情页后再从详情页回退到列表页时能顾回到历史浏览的位置（也就是滚动条上次滚动的位置）实现1.在router文件里需要缓存、记录位置的组件里添加keepAlive参数 { path: "/owner", name: "owner", component: owner, meta: { requireAuth: true, keepAl
2020-07-02 17:51:39
925
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人