![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 50
羡与
这个作者很懒,什么都没留下…
展开
-
vue 动态插槽与插槽循环的用法
动态插槽与插槽循环的用法原创 2023-05-22 11:14:08 · 2673 阅读 · 0 评论 -
el-tree 懒加载+局部刷新
el-tree 懒加载+局部刷新原创 2023-02-28 17:23:52 · 3771 阅读 · 0 评论 -
Swagger2 前端对接接口代码生成
后端提供了swagger文档的情况下,前端可以通过一个命令行自动生成接口代码,不必一个个写。适用于接口很多的情况。原创 2022-10-10 14:04:03 · 2068 阅读 · 0 评论 -
antd tree 懒加载+局部刷新
针对懒加载的树组件,节点数据发生变化后,只刷新局部数据,拿到最新的节点原创 2022-09-29 16:39:27 · 5487 阅读 · 2 评论 -
解决ant tree再次点击取消选中
ant design提供的树组件支持点击高亮树节点,再次点击取消高亮。然而大多数业务场景下,我们希望多次点击同一个节点不会影响它的选中效果。原创 2022-09-29 15:04:56 · 3083 阅读 · 1 评论 -
vue项目中实现锚点定位
使用场景:当页面被分割成许多小模块,且页面很长时,锚点功能可以帮助我们快速跳转到想要的模块;而当滑动滚动条时,根据当前视图中的显示的模块自动选中对应的锚点。原创 2022-09-29 11:48:04 · 11525 阅读 · 4 评论 -
解决回车键提交表单时页面刷新
开发登录页面时,我们通常需要实现回车即登录的功能。但是一旦点击回车键虽然表单提交了,但是页面快速刷新导致登录接口调用失败了。1. 实现回车提交表单只需要在form内的表单项上存在一个type=“submit”的input对象或button对象即可触发表单的submit方法<form @submit="handleSubmit"> <input type="submit" style="display: none"> ...</form>2..原创 2021-11-18 15:58:12 · 203 阅读 · 0 评论 -
vue 同一位置的元素相互影响
情景:两个按钮位于页面同一个位置,通过v-if判断按钮的显隐,当隐藏的按钮被禁用时,另一个显示的按钮也被禁用了原因:“Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。”---这是vue官网给出的解释。意思就是同一位置的的两个动态渲染的按钮,每次切换显隐的时候只是修改了按钮的文字,而按钮的内部属性并没有改变,这就导致了上面的问题。所以我们需要让两个按钮每次切换显隐的时候重新渲染,避免复用。因此只需添加一个具有唯一值的key属性即可解决方法:给按钮加上唯一的key属...原创 2021-07-05 16:27:02 · 258 阅读 · 0 评论 -
点击表单内的按钮触发页面刷新
场景:vue项目中,点击表单内的某个按钮触发了页面刷新,表单内输入的数据都被清空了,并且页面路径前多了一个‘?’,例如:http://localhost:8082/?#/employee-login分析:在form表单内点击按钮触发了他的默认事件,从而导致页面刷新。解决:使用.prevent 事件修饰符可以解决这个问题,即阻止标签默认行为。用法:<button @click.prevent="handleFilter">搜索</button>..原创 2021-06-28 16:33:36 · 245 阅读 · 0 评论 -
vue项目实现移动端自适应
情景:前端开发经常需要根据一套原型来匹配不同的移动端,原型上标注的尺寸是px,如果需要匹配不同的像素,我们需要自己转换尺寸。通过引用插件可以实现一套像素适应不同的移动端,而开发人员只需要根据原型提供的标注来设置尺寸即可1. 安装依赖npm i -S amfe-flexible postcss-px2rem// lib-flexible已废弃2. index.html添加viewport设置<meta name="viewport" content="width=device..原创 2021-01-11 10:34:08 · 3854 阅读 · 4 评论 -
前端实现token刷新
应用场景:在一个管理系统中,当用户登录进来后,我们期望用户在操作时,不会因为token过期而被迫登出。但token是有时效的,这时候我们就需要一个刷新token的操作来保障用户的登录状态。1. 原理3. 完整代码request.tsimport axios, { AxiosInstance } from 'axios'import router from '@/router'import store from '@/store'import { message } f...原创 2020-06-24 10:41:09 · 6525 阅读 · 0 评论 -
Ant Design Vue 限制数字输入框只能输入大于等于0的整数
四个关键属性:'min' , 'precision','fomatter','parser''min':最小值 'precision':数值精度(当输入02时,失焦后自动去掉0) 'fomatter':指定输入框展示值的格式,传入方法 'parser':指定从 formatter 里转换回数字的方式,和 formatter 搭配使用<a-input-number :value="text" :min="0" :precision="0" :f...原创 2020-06-21 11:18:36 · 18044 阅读 · 0 评论 -
js 实现点击复制
项目中有点击某个按钮即复制某文本的需求,这里总结两种方式。方法一原理:创建一个隐藏的input,并赋值需要执行复制的文本,选中input中的内容,执行dom自带的复制方法。function copyPwd(copyText) { let input = document.createElement('input')// 创建一个input input.value = copyText // 赋值需要复制的内容 document.body.append...原创 2020-05-29 18:06:48 · 1036 阅读 · 0 评论 -
前端实现文件下载功能的三种方式
一些管理系统常常会有导出文件的功能,这里介绍三种文件下载的尝试1. 通过文件地址下载文件此方式最为简易,只需要知道文件在服务器上的地址,就可以通过a标签实现下载<a href="https://.../158ac1e6917445a4aa384a2a7209445a.xlsx" download="test">下载文件</a><a href="h...原创 2020-04-23 11:35:22 · 11677 阅读 · 7 评论 -
Ant Design Vue之自定义上传(Upload)
场景:项目中需要头像上传功能,后端提供的上传接口需要校验token。ant-design-vue框架的upload组件提供了customRequest接口,可以让我们覆盖默认的上传行为,自定义上传。1.目标实现效果如下点击相机图标或者图片,打开资源管理器——>选择图片——>头像预览自动更换为最新选择的图片。执行上传之前还需一些图片格式、大小的校验。在此过程中需调用两个接...原创 2020-03-25 13:13:11 · 19635 阅读 · 11 评论 -
vue 在自定义组件中实现v-model
本文主要涉及vue2.2版本新增的自定义组件的v-model下面以自定义的select组件为例1.子组件模板代码:<template> <div id="app" @click="hiddenSelection"> <div class="form_select"> <input v-model="s...原创 2020-01-14 18:04:04 · 806 阅读 · 0 评论 -
js 实现一个简单的无限滚动
前言:vue项目中需要实现一个列表的无限滚动,引用的ui框架没有这个组件,就自己实现了个比较简单的无限滚动。无限滚动的核心在于对滚动事件的监听,当我们监听到滚动条距离滚动区域底部一定的距离时,即加载下一页的数据,合并到当页的数据中,这样就可以实现一个简单的无限滚动了。步骤:1.监听滚动条 > 2. 在监听事件里计算滚动条距离滚动区域底部的距离,当距离不足10像素时,则加载下一页数据...原创 2020-01-08 11:24:36 · 1526 阅读 · 0 评论 -
vue中自定义select
在不使用ui框架时,原生的select元素可修改的样式非常有限,大多是不满足我们的需求的。因此花了点时间写了个可以自定义样式的select组件,以备以后使用。1.html<div id="app" @click="hiddenSelection"> <div class="form_select"> <...原创 2019-08-02 12:02:42 · 1532 阅读 · 3 评论 -
win10 使用nginx搭建本地测试环境(踩坑)
目录1.下载2.配置3.启动服务4.查看5.停止服务,重启服务6.参考链接1.下载地址:http://nginx.org/en/download.html下载到本地后解压安装包(我放在c盘方便寻找),无需安装,双击根目录下的应用程序即可启动nginx服务(暂时不用启动,先进行配置,稍后将通过命令启动)。2.配置打开/conf/nginx.con...原创 2019-07-31 16:58:44 · 2985 阅读 · 0 评论