- 博客(88)
- 收藏
- 关注
RSS订阅原创 Vue中$once搭配生命周期使用，例如hook:beforeDestroy
$once是一个函数，可以为Vue组件实例绑定一个自定义事件，但该事件只能被触发一次，触发之后随即被移除。$once有两个参数，第一个参数为字符串类型，用来指定绑定的事件名称，第二个参数设置事件的回调函数。$once可以多次为同一个事件绑定多个回调，触发时，回调函数按照绑定顺序依次执行。还可以作为修饰符使用。
2022-10-24 23:26:18
2196
原创 vue中用ref实现父子组件、孙组件、兄弟组件、非亲子孙组件互相调用的方法
无论是什么层级的组件之间互相调用，掌握好ref后都是万变不离其宗。来练练手吧。
2022-09-03 09:43:48
4254
4
原创 ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现
选择初始时间后，第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。选好起始时间和结束时间后，下拉框与所有禁止选用的日期限制全部放开，以供下一轮的正常选择。例如：点击7月15日后，在8月14日往后的日期全部禁止选中。7月15日前一个月的6月15日之前的日期也全部禁止选中。未选择时间时，最初选择时间不能超过今天。...
2022-08-31 11:12:31
8459
12
原创 SourceTree安装跳过注册登录BITBUCKET步骤方法（更详细有用）
公司电脑最近因为某些原因重装了，那么常用的软件也需要重装，其中之一就是SourceTree。 安装过程中有一步是需要登录BITBUCKET，要知道很多公司的办公环境是不允许访问外网的，那么我们应该如何跳过这一步骤呢？ 百度搜到的结果几乎都只有第一步创建accounts.json文件，然而操作完后并不好使，重启软件依旧卡在登录界面。而我这边执行完第二步后终于能跳过登录BITBUCKET的界面并可以正常使用了，接下来就从头分享这一系列的操作经验
2022-08-24 16:00:14
7057
6
原创 SourceTree在不使用SSH密钥的情况下连接远程仓库的方法（可进行远端拉取和推送）
windows系统下的SourceTree在不使用SSH密钥的情况下连接远程仓库的方法。网上都是MAC的，我觉得必须自己站出来写一篇了
2022-08-24 15:24:36
1561
原创 分批导入功能——按顺序循环执行异步请求（使用递归）
工作中遇到的一个需求完成过程：某页面导入数据超过50条会卡顿，然后产品经理让我限制成只允许导入50条以内的数据，否则报错。改完发版到正式环境后，用户觉得要把文档拆分成好几个太麻烦了，比如要导入300多条数据，就要把原excel文件拆成7个再一份一份导入，用户体验很差。于是这次迭代让我解除只允许导入50条的限制，想办法给导入加个进度条，让用户在等待的冗长时间里能感受到导入正在进行。但是问题来了，导入是调的后端接口，只有在开始执行时进入pending状态，然后一直pending到请求成功或失败后才会返回结
2022-07-08 16:46:05
817
原创 通过vuex管理操作用户权限
vuex，虽说是一个可能即将要被淘汰的状态管理模式，但既然项目中遇到了，还是提出来记录一下开发思路，毕竟万变不离其宗~首先用户信息是从后端接口获取到的，我们将要调用的获取用户信息接口封装成方法放在api文件夹下的index.js或另开一个user.js文件，例如：然后我们来到vuex的store文件夹里，vuex的配置就不细说了，看官方文档或百度配置成自己习惯的方式即可，demo放出来仅供参考一下——在store文件夹下创建modules文件夹，分模块存放，新建我们的user.js文件用于存放用户权限信息
2022-06-24 10:46:42
907
原创 el-tree设置选中高亮/焦点高亮、选中的节点加深背景，更改字体颜色等
el-tree默认的focus样式颜色太浅，有时候电脑亮度低或者换个有色差的屏幕，根本看不出来哪一个节点被选中了。而且只有焦点在el-tree时才有颜色变化，鼠标在别的地方点一下就没了，这样会让用户忘记自己之前选的是哪个节点，很不方便。第一步：给el-tree组件标签加上属性highlight-current开启高亮加了这个属性，选中的节点的样式才会有highlight-current类，这样接下来才能改变选中的节点的样式。第二步：在css中修改高亮样式一个小tip：这里建议是给该页面文件最.
2022-04-26 10:29:16
21367
8
原创 js验证可选时间范围的两种方法：用时间戳与Moment.js分别举例实现日期不能跨30天与日期不能跨12个月
前提：时间选择器绑定的值类型取Date，当选择时间发生改变时，执行paramsChange方法，在该方法开头验证所选时间是否正确，若正确则进行接口请求，反之弹出错误提示信息。时间显示维度为日时，正常查询显示如下：若所选时间范围超过30天，则弹出错误提示信息：方法一：用时间戳验证时间范围 paramsChange(row) { this.params = { ...this.params, ...row, // 因为时间维度选的是
2022-04-25 18:15:22
2177
原创 el-calendar日历组件的一些项目中实际应用（给每一天增加可输入的input框、计算每天数据总和、填写月合计后计算平均数同步到每一天中、做日期限制禁用规则等）
这篇文章用来分享自己项目中做el-calendar日历组件封装时的一些实用功能和踩的一些坑吧，毕竟ElementUI官方文档上对这个组件的描述实在太少了。1、给每一天增加可输入的input框其实这个功能在官方文档上基本已经实现了（在“自定义内容”那一块），直接在slot插槽里再加个input即可。 <el-calendar v-model="calendarDate"> <template slot="dateCell" slot-scope="{ da
2022-04-21 17:23:54
3151
原创 更简单的方法实现el-calendar日历组件中点击上个月、今天、下个月按钮时的点击事件
网上查el-calendar相关的按钮点击事件文章，清一色都是在mounted挂载阶段通过document.querySelector绑定类名添加点击事件。我想说为啥要弄得这么麻烦？el-calendar组件标签中v-model绑定了一个Date/string/number的时间值，无论点击上述哪个按钮，该值都是会改变的。而我们想要实现的是当该时间值改变时（例如变成上个月或下个月或其他时间变回今天）执行某个事件，那直接用watch来监听该值来实现逻辑不就更方便且简单了么放一下我这边的代码：el-.
2022-04-21 16:44:33
11251
4
原创 vue项目中一个开发思路记录：可复用的select选项框中的options数据，根据用户选择后可添加子级拓展
在工作中遇到的一些项目上有意思、实用性强、复用性广的开发思路
2022-04-19 17:26:34
1569
原创 浅谈vue中的$含义及其用法（$xxx引用的位置）
看了各个帖子的描述，还是未能参透$在vue中所想发挥的本意，将一些一知半解的理解摘抄下来，顺带附上自己常见的用法，以加深理解和记忆。摘抄这些只是Vue的命名规则，为了区分普通变量属性，避免我们自己声明或者添加自定义属性导致覆盖$event 是 vue 提供的传递实践的参数。$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。另一个好问题
2022-04-09 11:07:11
21071
10
转载 【vue.config.js】vue给引用文件加快捷路径（vue-cli中chainWebpack的使用）
文章转自：思否链接项目中用到的地方：vue.config.js里的chainWebpack：前言在项目开发中我们难免碰到需要对webpack配置更改的情况，今天就主要来讲一下在vue.config.js中对一些配置的更改，简单介绍一下loader的使用；用configureWebpack简单的配置；用chainWebpack做高级配置；包括对loader的添加，修改；以及插件的配置1、首先简单介绍一下webpack中loader的简单使用：loader：是webpack用来预处理模块.
2022-04-08 17:58:40
729
原创 js一个常用的正则表达式0-100之间的数（最多允许包含两位小数）
0到100之间最多允许包含2位小数多用于百分数场景：^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/.test(value)测试结果：0，1，99，100 true0.11，10.00，99.99 true-1，0.111，100.00 false好家伙，现在CSDN字数少还被提示影响文章质量和创作推广了？那再放一段最近做的一个导入功能中判断百分
2022-03-18 17:41:13
7445
2
原创 vue+ElementUI实现下拉分级菜单：el-select嵌套el-tree树形控件实现下拉树效果（附带模糊查询搜索功能）
ElementUI下拉框+树形控件+搜索+标签功能
2022-03-09 16:11:18
12919
26
原创 VUE使用this.$forceUpdate()解决v-for渲染的数据初始值为空时属性值赋值后页面数据未改变的问题
业务场景：渲染一个这样框框的数据，html代码如下：其中meters数组是有初始数据的，而statusData初始是个空对象：在该情况下，页面DOM肯定是在我请求到statusData数据之前就已渲染完成了，而在我拿到statusData后，页面上的数据也未产生变化。statusData内容：楼主首先想到的是用$set代替直接赋值，然而马上发现了问题：我statusData原本就是个空数组，没有初始属性，要怎么用$set呢？那就得在使用$set前给对象一个默认值，在data里给statu
2022-01-20 18:29:00
2232
原创 用promise.all搭配map方法解决异步问题
今天在项目中遇到一个异步问题，出现原因如下：我在getEnergeHouseDanhao这个函数中加入了一个请求，该函数是获取某机器单耗，但要请求四次分别去获取年单耗、月单耗、日单耗、小时单耗然而执行后因为请求是异步的，此时打印datas拿不到在请求中push进去的数组，在设置定时器才能拿到数组。然而我们无法确定接口的相应时间，用定时器解决显然是存在很大风险的。那么该如何解决类似的问题呢？可以使用promise.all解决异步。首先简单且通俗易懂地介绍一下promise.all是什么，具体
2021-12-30 15:54:04
3417
原创 一些简单的随笔（持续更新）
2021.12.24字符串转数字：若字符串内容都是数字，可以使用强制转换方法Number()；若字符串内有除数字外的字符，用该方法会返回NaN。若字符串内容有数字+字母，可以使用parseInt或parseFloat，例如：var s = '234string'; parseInt(s); //234 parseFloat(s); //234.0...
2021-12-24 19:12:42
273
原创 对于Echarts实例化与销毁的一些运用
本篇文章比较浅显，主要写给想要快速直接上手数据可视化带Echarts图表项目的新人们。1、实例化图表：setOption(Object option)Object类型的参数 option，表示图表数据结构 ，形如：var option = { title: { text: "我的第一个ECharts图表示例" }, tooltip: {
2021-12-24 15:22:42
5111
原创 Echarts自适应：当窗口大小发生变化时，重新渲染图表
①. 首先介绍一下window.onresize，这个方法可以监听窗口变化。将window.onresize写在mounted中，在窗口变化时就会执行它的内容。如： mounted() { window.onresize = () => { console.log("窗口发生变化时会打印该条"); }; },②. 接下来，只要在window.onresize中写入重新绘制echarts的逻辑就OK了echarts自带resize这个API，即.
2021-12-23 18:41:40
11835
3
转载 所有循环方法中，for()、for in、for of、forEach()、map()，哪个的速度最快
来源：juejin.im/post/5ea63f3ef265da47b177b4b6几种遍历方法中for执行最快，它没有任何额外的函数调用栈和上下文。但在实际开发中我们要结合语义话、可读性和程序性能，去选择究竟使用哪种方案。下面来看for , foreach , map , for…in , for…of五种方法现场battle。1、for我是最早出现的一方遍历语句，在座的各位需称我一声爷爷。我能满足开发人员的绝大多数的需求。// 遍历数组let arr = [1,2,3];for(let i
2021-12-13 18:32:01
2164
原创 深摸面试题（一）：深入理解浅拷贝与深拷贝、时间对象（Date）的拷贝方法
这篇是深摸面试题的第一期，该系列主要是博主在干完手头上的工作or页面写完而数据接口还没给or项目稳定没需求时摸鱼看面试题，把一些较为简单的面试题深入渗透并且综合整理而开的专栏。因为主要是给自己未来复习用的，就不会花太多功夫排版了哈~1、首先说说浅拷贝与深拷贝的区别作者：Mike丶https://www.cnblogs.com/mikeCao/p/8710837.html深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。假设B复制了A，修改A的时候，看B是否发生变化：
2021-12-13 17:41:43
982
2
转载 vue组件独享守卫钩子函数参数详解（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）
test组件代码<template> <div class="test_box"> <p @click="go">测试组件内部守卫的作用，点击跳到HelloWorld</p> </div></template><script>export default { data() { return { } }, methods: { go() { this.
2021-11-30 17:57:32
762
原创 vue页面前进或后退时刷新数据（重置恢复为初始值）
普通的vue项目使用this.$router.go(-1)就能同时实现后退+刷新了。但是在vue-element-admin或其他复杂的项目中（尤其是后台管理系统），有独特的路由跳转配置，比如在vue-element-admin中使用this.$router.go(-1)，原页面的数据并不会刷新，因为配置了快捷导航(标签栏导航)该方案运用了 keep-alive 和 router-view 的结合，所以跳转路由后原页面的数据仍然存活。解决方案：①、首先，找到页面恢复初始化数据的方法，我采用的是以
2021-11-30 17:45:04
7060
6
原创 vue返回上一页(后退)的几种方法与区别
案例：从a页面=>b页面=>c页面，当前在c页面，执行某方法后可以如同按了浏览器后退键一样返回b页面方法：若使用vue-router，this.$router.go(-1)可以回到上一页this.$router.back()window.history.go(-1)区别①与②的区别是：go(-1): 原页面表单中的内容会丢失： 1. this.$router.go(-1)：后退+刷新； 2. this.$router.go(0)：刷新； 3. this.$route
2021-11-30 16:35:28
81617
原创 解决使用window.open()或window.location.href跳转后返回/后退原页面不能再度跳转的问题
使用window.open()搭配参数_self(新页面替换当前页面)，或使用window.location.href跳转到新页面后，再点击后退到原页面，再重新进行跳转事件时，页面不仅没有进行跳转，且没有任何反应（控制台无错误信息）。说得笼统一点，这是因为第一次跳转时window.open()或window.location.href已经记录过一个要跳转的值了，跳转或后退到原页面时，该值没有被清空，再次执行事件时自然会没有反应。思路：定义一个全局变量记录window.open()打开的窗体如过该.
2021-11-24 13:50:12
13033
原创 ElementUI日期转为“yyyy-MM-dd“格式
一般情况下，我们需要给后台的时间格式是：“yyyy-MM-dd”但是使用Element ui日期选择器DatePicker获取的值是这样的：Thu Nov 04 2021 00:00:00 GMT+0800 (中国标准时间)在官方文档中，有提到可以使用value-format日期格式我们采用"yyyy-MM-dd"，此时，我们只需在时间选择器上加value-format="yyyy-MM-dd"的属性就可以了若使用的是选择日期范围型的DatePicker，返回的时间值为一个数组
2021-11-23 19:33:21
7805
7
原创 在el-table中根据判断不同值显示对应文本
后端传来的数据是数据0，1，2。0代表js报错，1代表白屏，2代表其他错误，要求动态显示在表格中 <el-table-column align="center" prop="errorText" label="异常类型" width="150"> <template slot-scope="{row: {errorText}}"> <span v-if="+errorText === 0">js报错</span> <span .
2021-11-22 11:12:28
3125
2
原创 vue实现图片预加载的几种方式
目的： 图片预加载能够使得用户在浏览后续页面的时候，不会出现图片加载一半导致浏览不流畅的情况。场景：在开发的过程，我们经常会遇到这样的要求，当鼠标hover上去的时候，更改菜单的背景。如果没有进行图片预加载的话，会出现闪烁。那么拥有1px的眼睛的设计师们不会放过你的。为什么会出现这张情况？因为hover的时候，图片才会去加载。那么我们现在来解决这个问题。首先我们要知道一点：如果图片在使用之前就已经请求过了，那么再次使用的时候，就不会再去请求（ps：图片路径一样）。下面讲实现方式：一、方法一项目打
2021-11-12 17:46:54
11599
原创 vue中让canvas适应外层盒子的宽高
注：是适应不是自适应，指移动端不同尺寸的手机下，为了让canvas宽高能根据外层盒子的大小进行匹配，而非自适应（让canvas随外层盒子大小变化实时自变化）。场景：案例采用的是阿里的AntV F2图表库html：<!-- 环形饼图开始 --><div class="bingtu" id="huanjing"> <div class="chart"> <canvas id="container" :height="chartHeight" :
2021-11-10 21:22:42
3125
原创 前端anywhere——前端应用启动服务
有时候我们在js里需要使用模块化，将项目打包后，用浏览器直接打开dist文件夹下的index.html会报错。这个时候我们就可以安装一个 nodejs 的第三方模块：anywhere，以服务器方式打开项目。全局安装需要提前安装 nodejsnpm install anywhere -g命令介绍仅有一个命令命令 anywhere 会将当前目录作为服务器根目录，调用默认浏览器在默认端口 8000 打开主页。$ anywhere如果你需要指定端口：anywhere -p 1234
2021-11-10 20:07:43
1752
原创 获取html中元素的宽高
例：要获取宽高的元素为<div id='chart'></div>获取方式：var chartDiv = document.getElementById('chart');var chartW = chartDiv.offsetWidth; //宽度var chartH = chartDiv.offsetHeight; //高度console.log('该元素的宽为：' + chartW);console.log('该元素的高为：' + chartH);...
2021-11-10 16:18:09
2072
原创 vue实现仿DJI大疆官网顶部导航栏组件
页面进入时，导航栏背景色为透明：鼠标移入时，导航栏背景变白，鼠标停留的标签字体颜色变换，出现底边框，若有二级下拉菜单，则平滑向下弹出菜单：gitee仓库地址：https://gitee.com/Yuzaki-Nasa/dji-nav实现导航栏二级从上往下弹出效果：https://blog.csdn.net/vvv3171071/article/details/121002283导航栏的tab还有点击跳转、点击滚动页面等功能，可自行使用。DJINav.vue：<template>
2021-11-02 18:20:22
1552
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人