- 博客(27)
- 收藏
- 关注
RSS订阅原创 FormItem Slot Label不生效
如果你使用的技术栈是vue3，组件库是elementPlus，发现原本的el-form-item中，自定义label不生效了，打开文档一看，这个插槽还在，功能是可用的。那么就要考虑另一个方向，在vue3中，原本的插槽方式发生了变化，由slot=‘label’变为v-slot:label。
2024-08-12 16:58:47
647
1
原创 header-cell-style设置的表头不生效
我抓耳挠腮的看了半天，最后手写了个样式进去，但还是气不过，把他改过来，最后在多次查资料（搜索）终于找到了原因，或许是表格父级元素使用了flex布局的原因，只要加个!important就可以了，像这样。header-cell-style是官网写的修改el-table表头样式的回调，且说header-row-style不生效也就罢了，header-cell-style也不生效是不是有点过分。可恶啊，不说了，我去找element源码了，看看怎么回事。
2024-01-04 16:53:10
2726
1
原创 修改el-drawer抽屉展开的宽度
这两种都是可以的，直接写数字，默认单位是px，即调整为1200px，写百分比，就是宽度调整至屏幕的百分比，不用写单位。其实很多属性官网写的很清楚，默认的el-drawer展开宽度是30%，但是需要更宽，可以看看下面的option。在这里，size，可以修改宽度，但他的默认值是字符串类型，但值的类型确实number，我看到很多博客中这样写。其实这样多定义了一个drawerWidth字段表示宽度并不必要，只要将值写进html的size里就行了。
2023-12-26 14:34:10
4505
6
原创 window.open打开新标签跳转传参，params与query
但跳转页面但希望新建标签页打开的时候，window.open()是我们最常用的方法，但是如果我不只是跳转，我想携带参数诸如，id，type，该怎么操作呢。
2023-12-14 17:23:33
3109
原创 vue中下拉菜单，点击其他区域收起
这个常见的问题，我发现现在网上的很多方法，不是极其繁琐就是有问题。乍一看逻辑没什么问题，但是我使用的时候发现，
2023-08-21 15:19:09
1532
原创 el-upload截取视频首帧作为上传封面图
这部分就是关键代码，可以直接复制整段代码作为方法引入，需要注意的是，要在文件上传成功后调用，最好在。中，否则是拿不到file的。
2023-08-21 09:39:18
1168
3
原创 上传含文件流的表单，我才认识FormData
在上面这段代码中，我们拿到了文件字段param，然后通过new一个Blob的方式将他转换成文档流 的形式，后面的customerForm是我定义的表单名称，images是这个表单中存放图片的数组，把上传的文件转换成文档流以后push进这个images数组。上传组件使用了element-ui的el-upload组件，这个组件提供了内置的手动上传和自动上传方法，由于这个项目是没有文件库的，所以我们只能采取手动上传的方式，通过http-request这个出口，把上传的方式丢在这里，拿到用户上传的文件。
2023-08-18 18:02:37
890
原创 created方法中调用接口的执行顺序控制
然后我又想到setTimeout，定时器是直接解决函数执行顺序的方法了，但是同样也有弊端，因为没有办法确定第一个调用接口的响应时长，设置过长，用户体验感势必不会太好，设置过短，如果更换服务器或者网络过慢，后续接口就不会调用，引起更大的问题。众所周知，vue是单页面应用，我们在加载一个页面的时候，有些接口需要在页面创建时就调用，从接口中获取数据，然后渲染在页面上，简单来说就是在钩子函数created阶段调用接口。那么重点来了，调用接口我们是要操作数据啊，那么，调用其他方法自然也是操作数据的一部分，
2023-08-15 09:41:29
872
2
原创 多个el-dialog弹框切换会出现闪烁
这时候我们在点击下一步执行方法，关闭上一个弹窗打开下一个弹窗的时候，页面有一个明显的闪烁，对于用户体验来说不够丝滑，其实也不难看出是因为关闭上一步弹窗的时候同时关闭了遮罩层，开启的时候重新打开遮罩层导致的，使他们中间有一个亮度的闪烁，解决方法也很简单。在使用element-ui的弹窗组件el-dialog时候，可能会有这样子的需求，点击新增按钮或者修改按钮，打开一个弹窗，然后点击下一步，关闭当前弹窗，打开另一个弹窗，最后在第二步或者第三步弹窗提交数据，像这样。
2023-08-14 14:48:06
1274
原创 文字居中超出换行，但换行后第一行短，第二行长
我想的第一个办法就是插入换行符，这样文字还没有占满宽度的时候强制换行，那么被挤下去的第二行必然字符更多，可以达到这个效果。中间这个大标题，在pc端屏幕宽的时候在一行展示，是一行文字，到了移动端这里换行了，但是却要下面一行文字比上面一行长。2.遍历字符串，在合适的长度后插入<br />，这是我设想的实现模型，但没有成功。1.获取屏幕宽度及字符串。
2023-07-26 16:50:52
539
1
原创 refresh token作用与使用方式vue2.0
通常情况来说，token失效会设计两种情况：1.token在浏览器储存时间过长，过期失效；2.同一个账号只能在一个浏览器登录存储token，在其他浏览器登陆上一个浏览器的账号会被抢占下线。由于不停的更新token，对于浏览器来讲，负载是非常大的，对于用户来说，体验感也不好，试想使用手机时，每隔10分钟锁一次屏，所以我们用到另个一保存token状态的refresh token，来保持token的有效性。
2023-07-21 14:01:24
1376
原创 使用Vue3.0 刷新页面警告 [Vue Router warn]: No match found for location with path ‘‘/xxx‘‘
vue-Route4.0版本已经不需要我们去动态添加404路由了，直接在router/index.ts文件中添加一个404路由即可，使用通配符匹配。值得注意的是，添加的路由不要加上name：’404‘，这样刷新后会跳转至404页面，不会留在刷新前的页面。
2023-04-07 11:27:21
2320
10
原创 vue3使用ref获取dom结果为‘null’
这就是生命周期的问题了，setup本质上相当于vue2中的created，在创建阶段，dom元素还未完全创建完成，此时获取dom自然为null了。如果你使用了setup语法糖，那么你在使用时可能会出现ref.value取不到子组件里的值，或者报错ref.value对象为空的情况，那是因为在语法糖中获取到的是一个proxy值。setup的return中应该抛出ref封装的字段，否则ref的值只是定义了并不能响应式使用，事实上，所有ref或者reactive定义的值都应在return中抛出。
2023-03-22 15:37:22
8823
原创 vue3使用vue-cli引入windicss报错Can‘t resolve ‘windi.css‘
由于windi.css模块是虚拟模块，他并不真的存在于你的项目文件中，所以在检索时并没有找到它，eslint就会报错了。安装windicss的，但是它总是报错，找不到‘windi.css' 模块，这个引入的，甚至不是我自己写进main.js的，而是下载时自动引入的，但依然反复报这个错。我很头大，更头大的是并没有搜索到解决办法，我尝试更换版本也没有解决，又换了webpack去安装windicss，并没有成效，最后在一个外网论坛上看到了解决办法。这是一个头疼的问题，我是使用。解决办法如上图所示，在你的。
2023-02-24 10:21:09
2040
3
原创 npm只能在管理员身份下运行（超全版）
如果还有像我一样的倒霉蛋依然没有解决，权限加了也只能在管理员身份下运行npm，甚至只能在管理员cmd下搜索到node和npm版本号，那多半是node下载出现问题。找到nodejs文件后，右键选择属性，然后选择安全，在这里我们可以看到，权限只勾选了三个，打开编辑，勾选完全控制后确定，这样就完成了。如果依然没有生效，你可以尝试在这里选择Users，同样添加完全控制权限，查看是否生效。如果你去搜索，将会看到很多解决办法，就是改变nodejs文件的权限。笔者还说，如果不能成功，就替换成EveryOne，如下图，
2023-02-09 09:40:18
5495
1
原创 vue3.0 监听器
2023年是vue2.0最后一年维护了，更新vue3.0迫在眉睫。当该对象更新后，会执行对应的回调函数。要返回一个响应式对象。
2023-01-30 11:03:54
237
原创 vue-router的属性
当路由改变时，全局前置守卫执行，接受三个参数，to，from，next，分别代表即将要进入的目标路由，当前要离开的路由，和回调函数next()。路由对象是不可更改的，每次路由导航成功后都会产生一个新的对象。router.match（location）的返回值也是一个路由信息对象，导航守卫的参数to，from也是路由信息对象。指的是router实例，$route则是当前激活的路由信息对象，是只读属性，不可更改，但是可以watch（监听）。：当前路由的路由信息对象，包含了当前匹配路由的信息。
2022-12-13 15:01:26
1650
原创 vuex的使用
vuex是一个专门为vue.js设计的集中式状态管理架构。以下分为五个部分：state => 基本数据getters => 从基本数据派生的数据mutations => 提交更改数据的方法，同步！actions => 像一个装饰器，包裹mutations，使之可以异步。modules => 模块化Vuex。
2022-12-12 11:08:51
242
原创 VUE组件间通信
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。父组件通过props的方式向子组件传递，子组件 to 父组件通过在子组件中 $emit, 父组件中 v-on 的方式实现。如果想要跨级，获取爷爷级的组件，可以使用$dispatch，获取孙子级组件，可以使用$broadcast，因为我只简单使用过，并没有更深入的了解其全部api，故在《vuex的使用》中再详写。
2022-12-10 15:08:12
153
原创 input输入框的原生事件
输入框内容发生变化时触发。(值得注意的是，change事件仅在文本域有效，包括textarea，select)输入框的value值发生变化时就会触发，与change不同，input不用等到失去光标时便会触发。当使用拼音输入法开始输入汉字，文本段落的组成完成或取消时触发。失去焦点，鼠标光标焦点从输入框内移除，不能再输入内容后触发。当使用拼音输入法开始输入汉字，字符被输入到文字时。当使用拼音输入法开始输入汉字时触发。聚焦，鼠标光标聚焦在输入框内时触发。点击事件，鼠标点击输入框时触发。
2022-12-09 11:22:27
3918
1
原创 鼠标跟随小猫（原鼠标未隐藏）
<img src="cat.jpg" alt=""> <script> let img = document.querySelector('img'); document.addEventListener('mousemove', function(e) { let x = e.pageX; let y = e.pageY; img.style.left = x - 1..
2021-06-06 15:41:07
388
转载 一个动态表格
<table> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> <.
2021-06-06 15:39:50
81
原创 发送短信后倒计时
这是学习js中，遇到熟悉的内容做的一个小练习，仅做了button部分，输入框还没有改进。<input type="number"><button>发送</button> <script> let btn = document.querySelector('button'); let time = 59; btn.addEventListener('click', function() {
2021-05-05 17:03:32
158
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人