vue常用业务需求
常用业务需求
donghua201
这个作者很懒,什么都没留下…
展开
-
vue项目通过点击文字上传html文件,查看html文件
解决思路:新建一个上传组件,将它挪到页面之外。当点击文字时,手动触发上传组件,打开上传文件框。原创 2024-05-13 16:11:24 · 177 阅读 · 0 评论 -
antd 单选框a-radio,多选框a-checkbox样式调整
使用组件实现按钮样式。原创 2024-04-30 16:39:26 · 309 阅读 · 0 评论 -
大屏可视化的入场动画
入场动画的学习笔记,只记录了动画效果,没有数据表。原创 2024-04-24 14:44:35 · 173 阅读 · 0 评论 -
vue项目中使用高德地图/腾讯地图
1、点击编辑图标能打开对弹窗选值地址。2、店铺经纬度为空时,默认定位到浏览器当前定位。有值时,定位到提供的经纬度。3、2种方法选择地址:输入关键词可以搜索地址,移动定位图标也可以选择地址。4、地图的key由客户提供,后端返回,不能写死。原创 2024-04-17 17:39:57 · 302 阅读 · 0 评论 -
Ant Design表单项常用的检验方法
2、Vben Admin框架的使用方法。1、ant design的使用方法。原创 2023-12-28 15:47:09 · 533 阅读 · 0 评论 -
JS 多次请求接口,按顺序依次执行
在开发中需要同时请求多个接口,但是需要请求按顺序执行。比如先拿到接口a的返回值shopId,作为接口b的请求参数再调接口拿到仓库列表。将接口a封装在Promise中,在调用Promise前加上await,await会等待Promise中执行完resolve时,才会再进行下一步操作。原创 2023-12-07 17:09:41 · 1652 阅读 · 0 评论 -
前端下载文件的方法(同步,异步)
根据业务需求和后端返回的数据选择对应的方法。想要先预览,不立即下载选择异步方法;没有特殊要求一般都用a链接直接下载文件。原创 2023-12-06 14:04:41 · 790 阅读 · 0 评论 -
JS 获取指定日期所在周的第一天和最后一天
通过计算当前日期与星期一之间的天数差,得到一个 diff 变量。根据这个差值,将 firstDay 和 lastDay 进行调整,使得 firstDay 是本周的第一天(星期一),lastDay 是本周的最后一天(星期日)。创建一个Date对象,获取当天是星期几,返回值为0(表示星期日)到6(表示星期六)之间的一个整数。接受一个参数inputDate,用于指定日期。如果没有传参数,则默认使用当前日期。最后,将 firstDay 和 lastDay 格式化为指定的字符串格式。原创 2023-11-30 17:52:09 · 881 阅读 · 0 评论 -
JS 获取指定日期所在月的第一天和最后一天
没有传入参数,默认为当天日期。首先根据传入的日期字符串(或者当前日期)创建一个 Date 对象。然后通过 Date 对象的方法获取年份和月份,并计算出该月的最后一天的 Date 对象。第一天都是1号,不用额外计算。时间使用ES2017的padStart方法对两位数补零。获取到的年月日数据后,使用模板字符串``拼接出 "YYYY-MM-DD" 的日期格式。原创 2023-11-30 16:41:09 · 2176 阅读 · 0 评论 -
JS四舍五入保留两位小数
日常业务中有一种比较常见的需求,就是需要你把数据四舍五入保留2位小数,以下是几种常见的方法。原创 2023-11-22 10:58:41 · 1333 阅读 · 0 评论 -
JS常用的浅拷贝和深拷贝方法
复制一个数组,而不改变原数组,但是只能复制一维数组。原创 2023-11-21 10:40:35 · 42 阅读 · 0 评论 -
接口数据常用处理技巧(持续更新...)
1、使用判断2、使用把布尔值隐式转换成number类型。原创 2023-11-16 10:45:23 · 91 阅读 · 0 评论 -
JS获取当前时间(年月日时分秒 2023-11-02 06:05:05)
方法可以使用ISO标准将 Date 对象转换为字符串,格式为:YYYY-MM-DDTHH:mm:ss.sssZ。至此,得到当前北京时间的时间戳,接下来把时间戳(例如1699609423364)转换成"YYYY-MM-DD HH:mm:ss"的格式。toISOString():把Date对象转换为ISO格式的字符串,例如"2023-11-02T06:05:05.000Z"。replace(/T/, ' '):把"T"替换为" ",即把ISO时间格式转换为可读性更高的格式。使用前要加上8小时的时间差。原创 2023-11-10 14:38:26 · 13321 阅读 · 1 评论 -
vue项目中如何引入图片
require 是赋值过程,其实 require 的结果就是对象、数字、字符串、函数等,再把 require 的结果赋值给某个变量。import 是解构过程,但是目前所有的引擎都还没有实现 import,我们在 node 中使用 babel 支持。,也仅仅是将 ES6 转码为 ES5 再执行,在变量中使用require引入地址。直接将图片引入为模块使用。原创 2023-10-30 10:15:59 · 1724 阅读 · 0 评论 -
vue导出excel文件乱码
很多博主说的文件格式与响应类型对不上,要加responseType: 'blob'或者设置编码 UTF-8,我都尝试过了,依旧没有解决问题。在axios的请求拦截器中直接把响应数据打印出来看看,发现,responseType是空的,data不是blob对象而是一个字符串,这就有问题了。然后又回去看如何调导出接口,发现了一个疑点。因为这个项目用的是TDesign封装的框架,只封装了axios,但是没有封装接口,前接手的同事顺着框架的风格走,查看后端接口响应数据,能顺利拿到数据流,所有接口没问题。原创 2023-10-19 15:58:36 · 1194 阅读 · 0 评论 -
js实现数字格式化千分位方法(999,999.55)
根据执行代码的环境的语言设置进行格式化。原创 2023-10-18 16:59:06 · 460 阅读 · 0 评论 -
css实现弧边选项卡
这个案例只实现了半边效果,要实现完整的选项卡把其他圆角补充完即可。原创 2023-10-17 18:11:41 · 626 阅读 · 0 评论 -
ECharts常用配置
非自定义formatter函数下,变量a、b、c在不同图表类型下代表数据含义为:折线(区域)图、柱状(条形)图: a(系列名称),b(类目值),c(数值), d(无)散点图(气泡)图: a(系列名称),b(数据名称),c(数值数组), d(无)饼图、雷达图: a(系列名称),b(数据项名称),c(数值), d(百分比)series: [name: '交易方式',},label: {// 这里是文本块的样式设置:// 1、非自定义formatter函数。原创 2023-10-16 17:46:54 · 1596 阅读 · 0 评论 -
多条件选择时会用到的CSS伪类选择器
以选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。:where选择器可以用于简化CSS选择器的编写,并在某些情况下提高CSS选择器的可读性。原创 2023-10-16 17:03:56 · 214 阅读 · 0 评论 -
js使用国密加密账号密码
国密算法是指中国自主研发的密码算法标准,也被称为“中国密码算法”。它们是由国家密码管理局发布和推广的一系列密码算法,包括对称加密算法(如SM1、SM4)、非对称加密算法(如SM2)、散列函数(如SM3)、签名算法等。SM2是国产的椭圆曲线公钥密码算法,用于数字签名、密钥交换等。SM3是国产的密码杂凑算法,用于数据完整性校验和消息认证。SM4是基于分组密码结构的对称加密算法,用于保护机密信息的传输和存储。原创 2023-10-16 15:56:16 · 1373 阅读 · 0 评论 -
vue项目使用自定义字体,不同浏览器环境使用不同字体
3、在入口文件main.js中引入4、在 Vue 项目中使用该自定义字体使用后端提供的线上字体地址本地字体文件一般都是几十M上百M,会让项目打包文件变得很大,建议让后端把字体文件放在服务器,使用线上字体。原创 2023-09-28 16:56:26 · 3511 阅读 · 4 评论 -
el-table的使用技巧(ElementUI)
如果el-table的data是一个数组[1,2,3],并且要让每个单元格显示该数组中的一个值,可以使用标签的slot-scope属性来实现。使用组件来定义表格列,并将label属性设置为Value以表示该列的含义。然后,使用标签来定义一个插槽,该插槽的slot-scope属性被设置为scope。这个scope对象包含了表格行数据的相关信息,其中的row属性指向当前行的数据对象。原创 2023-09-28 15:17:14 · 3594 阅读 · 0 评论 -
el-autocomplete的使用技巧(ElementUI)
如果不想让el-autocomplete组件触发fetch-suggestions事件,可以通过设置属性来实现。trigger-on-focus属性是el-autocomplete组件的一个参数,它控制着当input获得焦点时是否自动触发数据查询。将trigger-on-focus属性设置为false后,el-autocomplete就不会在输入框获得焦点时自动触发fetch-suggestions事件了。原创 2023-09-28 10:39:29 · 1753 阅读 · 0 评论 -
vue项目自定义左边菜单栏图标icon
通过iconfont来转化成代码,添加类使用。原创 2023-09-28 09:57:55 · 781 阅读 · 0 评论 -
取消浏览器页面中输入框的值自动填充功能
【代码】取消浏览器页面中输入框的值自动填充功能。原创 2023-09-28 10:09:28 · 156 阅读 · 0 评论 -
vue3将接口注册成全局方法
vue3中通过getCurrentInstance()获取当前组件实例,相当于vue2的this对象。然后解构出proxy代理对象,通过访问代理对象来间接访问当前组件的实例对象。proxy能够调用在main.js文件注册的全局方法和全局属性。globalProperties是挂载在vue实例上面的,所以可以直接在template里面访问。原创 2023-09-28 10:08:18 · 295 阅读 · 0 评论 -
文本溢出的解决方法(单行和多行)
作用是设置文本不换行,是overflow:hidden和text-overflow:ellipsis 生效的基础。原创 2023-09-28 09:15:12 · 127 阅读 · 0 评论 -
vue项目实现导航栏吸顶功能
建立判断条件,如果页面滚动的值超过导航栏的高度navHeight时,将导航栏的position属性值改为fixed,top值可以设置为0px。当页面回到顶端时,需要再次显示为原来默认的状态,所以把导航栏的position值改为默认的static。调用窗口滚动对象window.onscroll事件。当滚动页面的滚动条时会触发scroll里的事件方法。原创 2023-09-27 15:31:40 · 628 阅读 · 0 评论 -
vue中动态绑定class与style
传入一个对象,通过判断变量的布尔值绑定类名。也可以绑定一个返回对象的计算属性。原创 2023-09-27 15:21:25 · 189 阅读 · 0 评论 -
防抖和节流的实现与区别(vue2、vue3写法)
防抖主要是为了解决事件频繁触发的问题,且仅采取频繁触发的最后一次操作。节流也是为了解决事件频繁触发的问题,且仅采取频繁触发的第一次操作。原创 2023-09-27 15:12:34 · 81 阅读 · 0 评论 -
如何在url上拼接对象参数?用&和?=拼接
下载接口需要把参数拼接到接口地址上发给后端。把 { orderId:156, typeId:984 } 处理成 http://test.com/download首先,函数从环境变量 VUE_APP_BASE_API 中获取基本的 API 地址,并将其赋值给 baseUrl 变量。接下来,通过拼接传入的 url 参数和问号字符,构建了 expurl 变量。然后,使用循环遍历传入的 query 对象的属性。在每次循环中,将属性名和属性值以 key=value 的形式拼接到 queryStr 字符串中。原创 2023-09-27 14:41:25 · 1563 阅读 · 0 评论 -
判断是否为空数组
业务需求:提交之前先检查表格list是否为空的,如果是空的,提示用户补充内容。原创 2023-09-27 14:30:39 · 28 阅读 · 0 评论 -
展开数组对象里面的每一个元素
业务需要把children里面的对象取出来放到外面。原创 2023-09-27 14:08:54 · 94 阅读 · 0 评论 -
类数组转化为数组
3、通过 apply 调用数组的。1、通过 call 调用数组的。2、通过 call 调用数组的。原创 2023-09-27 11:50:04 · 24 阅读 · 0 评论 -
翻转字符串
split 字符串拆分成数组。join 合并数组元素。reverse 数组元素反转。原创 2023-09-27 11:48:01 · 21 阅读 · 0 评论 -
数组元素求和
由于数组会默认带一个 toString 的方法,所以可以把数组直接转换成逗号分隔的字符串。然后再用 split 方法把字符串重新转换为数组。用split 和 toString 两个方法来共同实现数组扁平化。普通数组求和,直接使用reduce函数。,然后根据‘,’分割成一个。多维数组求和,先转成一个。原创 2023-09-27 11:40:32 · 532 阅读 · 0 评论 -
JavaScript数字方法汇总
适合调用接口获取列表数据时,统一处理金额、数量等字段的格式。可输入正负数和小数,并限制多少位小数。原创 2023-09-27 11:27:58 · 84 阅读 · 0 评论 -
el-table表头下滑时吸顶
addEventListener第三个参数,布尔值或者详细对象,如果布尔值为true,表示在捕获阶段触发事件。原创 2023-09-27 10:10:26 · 290 阅读 · 0 评论 -
vue跳转外链的方法
【代码】vue跳转外链的方法。原创 2023-09-27 10:04:32 · 1313 阅读 · 0 评论 -
vue项目使用超链接下载excel文件
【代码】vue项目使用超链接下载excel文件。原创 2023-09-27 09:58:20 · 330 阅读 · 0 评论