- 博客(72)
- 收藏
- 关注
原创 vue3+axios请求导出excel文件
后端返回的数据是一个二进制数据流,可以console.log(response)打印一下响应数据,查看数据是不是Blob类型,如果不是的话可能会出现乱码、undefined等情况。在Vue 3中使用axios请求导出Excel文件,可以发送一个GET或POST请求,并设置响应类型为。构造函数创建一个二进制文件,最后使用。生成一个可以下载的链接。
2024-08-05 15:37:56
434
原创 vue3+elementUI表格嵌入select组件,select组件选项之间互斥
1.第一步:通过计算属性获得对应数据列的参数list,这些list即已经选中的option选项。2.第二步:在标签中根据计算属性得到的list添加disabled。
2024-07-30 10:45:09
132
原创 手机端访问本地vue项目
devServer添加配置: host: “0.0.0.0”, disableHostCheck: true。注意不是在浏览器直接输入IP显示的那个外网IP地址。
2024-04-26 16:49:42
942
原创 vue3+elementPlus el-calendar如何标出多个时间
【代码】vue3+elementPlus el-calendar如何标出多个时间。
2024-03-25 15:34:42
695
原创 vue3+elementPlus el-input禁止输入中文
这种写法会自动去掉输入的中文,如果是其他规则,可以将正则替换成自己需要的就可以。这里有比较常用的正则,可以作为参考。
2024-03-22 11:21:08
1111
原创 vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面,以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
三、如果是弹窗嵌套弹窗,以上方法可能不会去掉遮罩层,这时就需要添加官网给出的另一个属性:append-to-body,具体解释可以查看官网。是自定义类名,和下面代码中的类名相同即可。
2024-03-18 17:28:02
2067
1
原创 vue3+Echarts实现中国地图
3、如果引入的是china.json,那么需要配置echarts.registerMap('china', china),如果引入的是china.js文件就不需要了。4、如果出险加载后的数据没有颜色(如下图所示)可能是china.json文件里的name名字与数据上的name名字不对应,检查一下,name名字是否一致。全选复制,在项目文件src文件下创建一个json文件,并在里面创建一个vue文件命名为china.vue。2、引入顺序是china.json,然后是echarts。1、地图要设置宽和高。
2024-03-13 11:34:59
2102
2
原创 VUE3上传功能本地上传正常,打包上传后报错TypeError: ***.upload.addEventListener is not a function和文件上传请求地址
/这样就拿到了参数中的数据。//获取#/之前的字符串。一、erer这个错误很可能是因为在打包后,文件的路径或者名称发生了变化,导致代码中的某些方法无法正确找到。二、使用element-plus文件上传时,后端使用的时代理路径导致上传的url需要前端自己处理。1、文件node_modules/mockjs/dist/mock.js。
2024-03-04 17:01:35
1046
转载 Vue3中div自由拖拽宽度和高度
Vue3中我们会遇到自由拖拽宽度和高度的页面需求,查看很多方法都无法满足当前需求。下面是我们Vue3版本的代码,非常简单主要构想说粗发拖拽方法,把所需要的div的高宽进行拖拽位置进行监听来加减自身div的px值。直接复制粘贴就可以实现效果。根据自己需求更改即可投入使用,非常方便快捷。
2024-02-22 17:34:16
853
原创 vue3顶部内容固定定位,下面内容可以向上滚动
功能要求:一个div里有两个模块儿,顶部按钮模块儿和下面的内容区域模块儿,顶部按钮模块儿固定在顶部不随滚动条滚动,下面内容区域可以滚动。1、顶部按钮固定定位,会脱离文档流,下面内容区域需要加一个margin-top,margin-top的值是上面顶部按钮模块儿的高度。第一步:在utils文件里创建directive文件夹,在directive文件夹下创建一个resizeObserver.js文件。第二步:在directive文件夹再创建一个index.js文件,目的是为了集中注册自定义指令。
2024-01-03 14:24:48
918
原创 el-select如何去掉placeholder属性
注意:这种方式有时候会不生效可能会受其他文件样式影响如样式覆盖,组件属性继承等,所以可以通过修改样式来实现。找到项目里设置全局样式的文件,使用伪类选择器将placeholder属性文字颜色透明度设置成0。功能要求是:当el-select的disabled属性为true的时候不展示“请选择”字样。元素的 placeholder 属性,可以在代码中将其设置为空字符串。2、如果想要全局修改的话,可以使用css修改。
2023-12-20 11:02:10
883
原创 vue3父组件提交校验多个子组件
1、子组件中的form要添加ref属性,并使用defineExpose暴露出去,这样父组件才能获取到子组件中的ref,才能进行校验。2、当对表格输入内容做校验时prop和v-model绑定的是同一个才能校验通过。3、当发现校验一直不通过时可以查看控制台打印的的结果,看哪个校验没通过。实现功能:在父组件提交事件中校验多个子组件中的form。这个是表格可以增删改的情况,对表格添加输入校验。这个是普通的form表单情况。
2023-11-20 16:04:31
488
原创 vue3+elementPlus el-select组件同时支持label和value模糊查询
element ui的select组件设置filterable后, 默认支持的是通过label来进行过滤搜索,注意:遍历的时候的key值不要用index,因为数组是事实变换的会无法找到对应的项,最好是用value值。功能要求:下拉框数据展示label+value,选中后的数据只展示label。visible-change(下拉框出现/隐藏时触发)的事件来实现功能.想要下拉框数据里同时显示label和value可以用插槽的方式。官方文档上提供了filter-method来自定义搜索方法。
2023-10-17 17:38:26
1543
1
原创 JWT授权为啥要在 Authorization标头里加个Bearer 呢
Digest MD5 哈希的 http-basic 认证 (已弃用)Bearer 常见于 OAuth 和 JWT 授权;Basic 用于 http-basic 认证;AWS4-HMAC-SHA256 AWS 授权。这是因为 W3C 的。
2023-10-08 17:15:21
2140
原创 vue3+Element Plus,实现输入身份证号计算出出生日期、年龄和性别
【代码】vue3+Element Plus,实现输入身份证号计算出出生日期、年龄和性别。
2023-10-08 15:08:48
481
原创 vue3+elementPlus el-input的type=“number“时去除右边的上下箭头
【代码】vue3+elementPlus el-input的type="number"时去除右边的上下箭头。
2023-10-07 17:16:39
1209
1
原创 vue3+elementPlus ElMessageBox消息框取消按钮位置调整
项目里修改element里的样式有些需要添加deep,小编也是试了很多都行不通,只有重新写一个且不加任何属性信息,将上面的样式放在里面才会生效,不清楚为什么,有知道原因的欢迎留言分享。该方法是通过给取消按钮添加class然后修改样式,也可以给确定按钮添加class修改样式。要求所有的ElMessageBox消息弹出框的取消按钮放在右边,如图。确定按钮的class属性名是confirmButtonClass。
2023-10-07 16:57:18
1539
原创 vue3+elementPlus el-select 增加全选和取消全选
要求el-select支持多选,并增加全选和取消全选功能,缺点是提交的数据中会有全选这个字段。multiple是实现下拉框多选的属性。
2023-10-07 16:35:57
1169
原创 vue3路由传参获取不到params,获取到为空
注意:从Vue Router的2022-8-22 更新后,我们使用param传参在新页面无法获取数据。
2023-08-17 16:23:48
4363
原创 vue3+elementPlus table里添加输入框并提交校验
【代码】vue3+elementPlus table里添加输入框并提交校验。
2023-08-17 09:55:47
2977
原创 Vue3+Vite+Pinia
Vite是一种新型前端构建工具,能够显著提升前端开发体验Vite 意在提供开箱即用的配置,同时它的和带来了高度的可扩展性,并有完整的类型支持。搭建Vite项目相关命令:Vite解决@问题修改项目中的vite.config.js文件。
2023-07-22 15:10:25
230
原创 TypeScript初体验(三)
DefinitelyTyped是一个GitHub仓库,用来提高质量TypeScript类型声明,可以通过npm/yarn来下载TS类型声明包,这些包的名称格式为:@type/*,例如:@type/react等。4、Record:构造一个对象类型,属性键为Keys表示对象有哪些属性,属性类型为Type表示对象属性的类型,1、Partial:将Type的所有属性设置为可选,不会改变传入类型的本身,而是创建一个新的类型。表示只要是string类型的属性名称,都可以出现在对象中。
2023-07-03 14:49:57
667
原创 TypeScript初体验(二)
2、protected:表示受保护的,仅对其声明所在类和子类中(非实例对象)可见,子类的内部可以通过this来访问父类中受保护的成员,但是,对实例不可见。3、枚举成员的值都是字符串的枚举称为字符串枚举,需要注意的是字符串枚举没有自增长的行为,因此,字符串枚举的每个成员必须有初始值。枚举:定义一组命名常量,枚举的功能类似于字面量类型+联合类型组合的功能,也可以表示一组明确的可选值。1、参数个数,参数多的兼容参数少的(或者说:参数少的可以赋值给参数多的)
2023-06-19 18:54:41
955
原创 TypeScript初体验(一)
原理:ts-node命令在内部偷偷的将TS->JS,然后,再运行JS,此命令不会生成JS文件,也不会修改对应的JS文件里的内容。3、查看元素的类型:在浏览器控制台,通过console.dir($0)打印DOM元素,在属性列表的最后面可以看到该元素的类型。类型别名,不仅可以为对象指定类型,实际上可以为任意类型指定别名。元组类型是另一种类型的数组,他确切的知道包含多少个元素,以及特定索引对应的类型。为变量添加约束,约定了什么类型,就只能给变量赋值该类型的值,否则就会报错。类型别名可以是任意合法的变量名称。
2023-05-13 15:19:15
536
1
原创 修改node版本,项目起不来
在自己电脑上找到之前的node版本安装包,重新安装,把项目里的node_modules文件夹先删掉,重新在控制台运行。实在不行的话可以试试项目重新从git上获取。卸载当前版本node sass。如果你已经下载了node-那么可能是node的版本和。重新启动项目应该就可以了。的版本不匹配导致的。
2023-03-09 17:32:55
813
原创 数组对象的深拷贝
2、当复杂一点数组,比如数组里面是对象的时候就不能使用结构语法了,可以使用JSON.parse(JSON.stringify(a))来实现。深拷贝不但对指针进行拷贝,并对指针指向的内容进行拷贝,经过深拷贝后的指针是指向两个不同地址的指针。浅拷贝主要是对指针的拷贝,拷贝后两个指针指向同一个内存空间,1、一维数组使用解构语法可以实现深拷贝。当a改变时,b不会变。
2022-10-08 11:22:12
3122
原创 React通过jsonp获取高德在线天气数据
使用jsonp请求,首先安装一下 jsonpyarn add jsonp在项目里的api文件夹下的index.js文件里写一下代码import { message } from "antd"; //这个是引用的antd前端组件库import jsonp from "jsonp";//请求高德天气export const reqWeather = (city)=>{ return new Promise((resolve,reject)=>{ c
2022-05-17 15:07:21
707
转载 JavaScript中用到的方法总汇
参考地址JavaScript中常用的方法汇总,全部整理好了,一定要收藏! - zhang305 - 博客园https://www.cnblogs.com/PotatosMe/p/13751420.htmlhttps://www.cnblogs.com/PotatosMe/p/13751420.html
2022-04-11 15:14:35
78
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人