AzeShinja的博客

@input绑定事件实现禁止空行回车的逻辑以及识别excel单元格换行

刚开始我简单看了几篇文章感觉Hooks这个东西很普通，甚至感觉还不如vue2的mixin好用。还有export import 感觉和普通定义一个utils文件使用没什么区别。但是Hooks这个东西肯定不是白给的，所以我开始在我的项目里面不停的操作、试验demo，所以我发现了一些他使用非常舒服的点。

vuex如何调用其他模块的内容

在使用el-tree的时候想要好看的滚动条效果，但是懒得自己搞，就想着使用el-crollbar去解决，但是出现的效果是只有垂直滚动条没有水平滚动条，并且横向的数据被遮住了。

实现eltree的检索展开节点

虚拟列表简单实现

naive-table 的空数据滚动

worker实现vue倒计时的全部代码

如何在vue使用worker操作？怎么倒计时才准确呢？

这个问题我们用中文翻译一下：执行JavaScript时强制回流也就是哪里的操作 导致页面回流从而卡顿什么是强制回流？?点我了解强制回流我遇到的情况我写了一个试题列表，列表里面有300题，每个题目有4个选项。起初我觉得有点卡，但是觉得数据量才这么点就卡很不合理就先放着没管。直到我数据量到了500以上，那页面我滴天，真的迟钝！！开始排查首先判断是否哪里频繁使用v-if等导致的，我一块块注释重复运行发现并不是他的问题。其次判断是否是数据渲染问题，因为我抽出了好几个组件以及v-for去循环渲

关于造成这个问题的原因为什么Object.keys等遍历对象keys值会造成乱序输出的问题我的需求：每个试题名字后有相关的单元ID，我是根据截取字符串做的排序规则，这会使单元1正常显示在第一个的位置如果说没有相关规则，兄弟可以自己想办法造一个，或者和后端沟通好，显示的顺序是什么，因为毕竟想要有顺序展示的需求就一定是有相关规则的我给出的这个问题的其中之一的解决方案如下：我的处理之前的数据类型看起来这里没有什么问题，但是通过Object.keys输出后 是单元2 在单元1的前面，所以这里我们

我的实现方式是通过html中双层for循环做的首先我们把数组数据处理一下，因为我们是每5个元素分成一个div看下数据格式： data() { return { examList: [ { title: '正题', listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], }, { title: '正题1', listData

首先使用provide是为了方便孙子组件获取爷爷组件的数据就比如下方想使用provide把table的refs分派给每个孙子组件但是provide是先于mounted执行的，导致dom还没有搭建完成就发送给了子组件，所以子组件inject后值为undefined所以我想要不给一个响应式数据，这样在爷爷组件中的mounted对其进行赋值后孙子组件也能同步更新这样子组件就能正常获取它的值了不知道还有没有更好的解决方法，如果有请踢我一下! o(￣▽￣)ブ...

使用el-tree的坑之一，显示异常个人BUG解决记录用尽量用z-tree, 别用el-tree先上视频,好吧视频不让上传下方明显看到点击checkbox的时候左侧与目录树中间的位置变成了黑色，接下来我说一下我发现BUG以及解决问题的过程复现BUG的过程收到测试的问题后我还很疑惑，因为只有PC有这个问题，web是正常显示的，所以我先准备在自己本地上复现，但是是很稀有的概率才会复现因为我使用了scrollintoview是用来点击文件夹进行目录树定位的，所以它是我第一怀疑对象。所以我把

故事起始于一个无聊的下午，在公司随便狂点自己写的功能。后来发现为什么有时候会导致父目录收缩的问题！！ 刚开始怕极了，以为是自己写的什么鬼BUG。最后在来回点来点去发现是需要拖动节点才能触发，然后我就去了饿了么组件官网的DEMO试了一下，果然我去。人家DEMO就有这个功能=。=。所以说目前当作一个功能点吧，就离谱。人家组件库中的配置和介绍对这个功能一口没提=。=。总结就是： 没必要改有解决方案踢我一脚， 可能是我没看见脑内过滤了...

看了一圈没有配置下拉按钮常驻的， 那么我们就更改他的属性我的树子节点是通过点击某一个文件夹后请求接口获取的，所以使用了updateKeyChildren这个函数所以我们封装一下这个函数 updateKeyChildren(id, data) { this.$refs.projectTree.updateKeyChildren(id, data); const node = this.$refs.projectTree.getNode(id); node.c

使用vue的自定义指令就可以解决了// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})在我们写的input中使用v-focus就可以使用了<input size="mini" v-if="data.needEdit" :key="data.id" ty

经常能遇到一个需求，需要做成如下的样子但是总所周知，element的clearable和后缀图标时位置是冲突的， 他会这样:造成这样的原因是因为：所以我们只要把他们的父级内容改为反序的不就行了，所以::v-deep { .el-input__suffix { // 处理前缀图标不垂直居中的问题 height: auto; font-size: 20px; &-inner { flex-direction: row-rev.

首先介绍一下我遇到的场景如上图所示， 我想要添加更多内容跟着tips一起高亮， 可见遮罩层的 position:fixed; z-index: 2001已经遮挡住了此时脑袋里面浮现了两种解决方案：另新建一个div，使div完全复制这块div内容，再优先级高于这个遮罩层就行了。但是这样有一个缺点，由于部分布局不同，这个遮盖的div可能不会完全的准确覆盖此div，达不到最理想的效果。第二种， 在源div上操作，使其可以显示在遮罩层之上这里我说一下第二种：在此div上添加属性：position

添加autoComplete即可 <el-form-item prop="username"> <el-input prefix-icon="el-icon-user" placeholder="请输入手机号/邮箱" type="text" clearable v-model="passForm.username" ></el-in.

本来我想偷个懒，百度复制一下，发现热门那几个文章真的瞎掰那我直接代码了，估计有和我一样懒的想复制就能用的<el-input prefix-icon="el-icon-mobile" placeholder="请输入手机号" @input="limitPhoneNum" type="number" v-model="codeForm.phoneNum" autocomplete="

博主在开发的时候发现在限制类型为number的时候，输入中文会导致光标上移添加如下代码就好了 ::v-deep .el-input__inner { border-radius: 8px; }

使用的是vue框架，写了发送验证码功能，后来发现发送验证码后假如剩余40s， 切出去换页面回来还剩40s，就离谱，后来就打算使用缓存来做这个处理了重点部分的代码我是用注释标注出来 // 发送验证码 async sendCode(newKeyCode = undefined) { if (!this.isSendCodeActive) { return; } this.sendCodeLoaing = true; if (!

在el-popver标签中添加属性ref="newProjectPopover":popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"可以查看poper.js的官方文档在dom渲染之后调用方法： mounted() { this.$refs.newProjectPopover.updatePopper(); // 或者 在你请求接口后，await this.$nextTick();

首先定义一个专门存放数据的js文件global.jsexport default { globalOutsideUrl: {}, setUrl (params) { this.globalOutsideUrl = params; }, getUrl () { return this.globalOutsideUrl; }}然后在main.js中引入然后再页面中set和get就可以啦set：get：over 介紹完畢了...

做项目时候遇到一件怪事：父组件向子组件传个参数arrdata，是个数组因为是Array类型的参数，子组件中进行了接收，并且default通过函数返回一个空数组然后子组件中例行公事验证下是否正常拿到值惊呆了，竟然是空的数组！可是vue调试工具中props正常拿到了啊有点意思，后来根据项目结构想了一下，发现问题出在哪里了项目是这样的：这就是父组件所在的页面，点击蓝色按钮新增，会触发回调方法，显示子组件而父组件向子组件传递过来的值arrdata，是在这里通过监听异步获取的然后渲染在这个列表里：

我报此异常的原因是因为name和组件名称一样了， name 要改一下哦

<div class="button" ontouchstart="" onmouseover="" @click="openLinkedMe"> <a :href="hrefUrl" id="openHeader"> 立即打开</a></div>添加空的ontouchstart onmouseover 即可触发

之前写一个功能组组件里面的点选三个红框框是三个组件，checkbox都用我请求数据后给每个元素增加一个字段：checked, 然后偶然发现点选承揽的时候没法将下面三个小元素选中。开始排查首先打了log看元素是不是选中状态 结果：元素中checked字段确实是true然后想了想，有没有可能字段没有同步更新到子组件中？ 细看了log，发现只有checked的字段没有get和set，我就想可能是赋值的问题下面这个是我之前的赋值代码:改正之后使用了vue的$set后终于解决了，我们看一下打印

看见了吗 兄弟们，这个搜索的button矮了那么1px左右，所以我们在input和button中添加这行样式就可以解决了vertical-align: middle;

const rowList = Array.from(this.$refs.multipleTable.$el.getElementsByClassName('el-table__row'));得到的是一个数组， 第几个就是第几行元素的dom第二行元素：rowList[1]...你就可以随意操作了

首先mounted中注册observer注册快捷键略过了，简单放一下调用的函数 ... case types.ARROWUP: this.editIndex && this.handleArrowUpDown('up'); break; case types.ARROWDOWN: // 如果只有一行数据向下选择是选中这个文件 (this.editIndex < leng

首先清楚windows文件管理的逻辑按 ↓ 键选择文件，如果文件已经离开窗口那么滚动条向下准确滚动按 ↑ 键选择文件则滚动条准确向上滚动当然以上的条件是文件在可视窗口内移动如果用户操作滚动条使文件脱离可视窗口内，则重新定位， 重新定位有两个规则：{a. 如果文件在可视窗口上方，则定位过去后文件在可视窗口的一个元素b. 如果文件在可视窗口的下方， 则定位过去后文件在可视窗口为最后一个元素}HTML: 首选注册ref对于el-table <el-table

首先常规的父子组件执行顺序下面是一个包含路由的组件执行实例router-view中的结构为：如果topnav和router换顺序则：

<el-table ref="multipleTable" :data="tableData" @select-all="handleSelectionChanges" :header-cell-style="{ background: '#FAFAFA', color: '#333333' }" @sort-change="sortChange" > // 设置prop值 &l

首先看一下横向滚动条我说一下完成这个效果我所用到的思路使用某一位置 居左的距离 / 总div距离 * 滚动条宽度 = 滚动条居左的距离（错误）上面说法错误是因为当时误判断了滚动条滚动的距离不是元素的offsetLeft通过元素的offsetLeft直接赋值给滚动条的ScrollLeft， 发现已经实现了定位效果，但是并不是居中，为了居中我们就需要一点点骚操作先看HTML的绑定详情：<div class="tasks" ref="tasks" style="overflow: hidd

直接上代码 <el-table ref="multipleTable" :data="tableData"this.$refs.multipleTable.bodyWrapper.scrollTop = positionHeight;这里需要使用bodyWrapper，博主之前试了$el等都没用，然后疯狂百度到的，分享一下...

开门见山：提醒样式无效可能是放在了scoped的style标签中放在普通的style标签里面就可以了博主使用el-table想要实现某一行更改样式的效果查阅饿了么文档后发现有一个控制此属性的一个回调所以直接添加 <el-table ref="multipleTable" :data="tableData" ****:row-class-name="tableRowClassName"**** tool

首先再HTML中使用组件 <el-scrollbar ref="azeScroll" style="height: 100%" class="main-scrollbar" wrap-class="default-scrollbar__wrap" > <keep-alive> <router-view v-if

使用伪类的实现方法HTML的结构 <el-form ref="form-head" label-width="auto" inline class="form-header-box"> <transition-group name="el-zoom-in-center" tag="div"> <!-- <el-form-item key="name" label="姓名"> &l.