- 博客(42)
- 收藏
- 关注
RSS订阅原创 vue2结合element 实现cron表达式的功能
本文介绍了如何封装一个Cron表达式组件。该组件通过多个子组件(秒、分、时、日、月、周、年)组合实现，使用el-tabs切换不同时间单位。关键实现包括：1) 通过v-model实现父子组件数据绑定；2) 使用计算属性value_处理表达式生成和验证逻辑；3) 表格实时展示当前表达式。特别说明秒和分钟组件可复用同一模板，采用单选按钮组实现"每"、"周期"、"循环"和"指定"四种模式，并通过el-input-number和el-checkbox-group提供参数配置。组件封装了完整的Cron表达式生成和验证功
2025-12-16 14:01:49
792
1
原创 get请求无法解析特殊字符的问题
本文针对axios在GET请求中遇到特殊字符解析失败的问题，提出了四种解决方案：1）建议后端改为POST请求；2）使用params传参（仍有局限性）；3）手动解析GET参数；4）最佳方案是在请求拦截器中统一处理。重点介绍了第四种方法，通过URLSearchParams对象自动转义特殊字符，并展示如何在不修改现有代码的情况下，在axios拦截器中统一改造所有GET请求参数。该方法既保持了代码整洁性，又解决了特殊字符导致的接口报错问题，适用于已有大量接口的项目改造。
2025-09-05 11:15:45
317
原创 如何实现左侧拉动功能
本文介绍了使用Vue实现左侧拉动功能的完整方案。通过三部分实现：1) HTML布局定义容器、侧边栏和拖动手柄；2) JavaScript处理拖动逻辑，包括初始化宽度、鼠标事件监听和限制宽度范围；3) CSS样式控制布局和拖动效果。关键点在于使用mousedown/mousemove/mouseup事件监听实现拖动功能，并设置最小240px、最大800px的宽度限制。该方案还支持触摸事件，确保移动端兼容性，且通过CSS优化了拖动手柄的视觉效果。
2025-09-02 17:17:05
149
原创 循环并定时发送接口
这段代码实现了一个定时循环发送请求的功能。主要逻辑是：首先通过batchUpdateDemandStatus获取数据列表，然后使用定时器每隔500ms依次发送getXqqdtb请求处理列表中的每个元素。代码中包含了异常处理机制，当所有请求处理完成后会自动清除定时器，也提供了手动停止请求的方法。关键点包括：使用async/await确保请求顺序执行，通过索引控制当前处理项，以及完善的错误处理和定时器清理机制。
2025-08-29 08:30:00
165
原创 element el-table 跨页多选保存
本文介绍了使用Element UI表格组件实现跨行多选并保存选中状态的方法。通过设置el-table的row-key属性为唯一标识(如id)，并配合selection列的reserve-selection属性来实现跨页多选功能。选中数据通过selection-change事件处理，将选中的值保存在selectionList数组中。这种实现方式适用于需要批量操作的场景，如批量审核等业务需求。
2025-08-28 09:00:00
153
原创 小程序uniapp，表格多选功能
本文介绍了在uniapp小程序中实现表格多选功能的代码方案。通过使用uni-table组件结合checkbox实现多选功能，主要包含以下实现点：1) 使用Set集合存储选中项ID；2) 实现单选和全选逻辑；3) 通过watch监听数据变化自动更新全选状态；4) 提供选中项的对象存储和更新功能。代码结构清晰，包含了模板渲染、数据绑定和事件处理等完整实现，可直接用于需要表格多选功能的uniapp项目中。
2025-08-27 10:49:19
223
原创 如何通过个数，获得百分比，并且相加正好是百分之百
本文介绍了一个JavaScript函数，用于将数值数组转换为百分比形式并确保总和为100%。该函数首先计算总数，然后计算每个元素的百分比（四舍五入取整），接着检查百分比总和是否为100%。若存在偏差，则对最大百分比项进行调整以补足差值。示例展示了如何将[117,48,1]转换为[70%,29%,1%]，完美解决四舍五入导致的总和不为100%的问题。适用于投票统计、资源分配等需要精确百分比展示的场景。
2025-08-07 10:03:05
311
原创 如何根据枚举值，快速方便显示对应枚举含义 js
常用于后端返回的枚举值，前端传的也是枚举值，但是要根据含义去显示给用户，如果用三元表达式也是可以的，但是如果枚举的值很多，会很麻烦。还有一个好处，用得到枚举的，大部分新增或者筛选的时候也会用到列如list这样的数组，增删修改都会统一变化，放到全局更好。
2025-08-06 14:10:31
183
原创 vue3图片放大镜效果
使用vue3的核心库，获得鼠标位置，进行左右移动并且有放大效果<template> <div class="goods-image"> <div v-if="!isOutside" class="large" :style="{backgroundImage:`url(${imageList[curIndex]})`, backgroundPositionX: positionX + 'px', backgroundPositionY: posi
2021-10-10 08:00:00
726
原创 2021-10-06
自增字段以及排他思想自增字段首先我们要知道自增字段的目的，类型目的：有时后台返给我们的字段可能不够多，但我们又需要这个字段来做或者显示，这时需要我们手动添加排他思想就是把自己以及自己的兄弟其实就是整个数组都赋值为false，统一的值只把自己的属性赋值为true一般都是点击事件，在模板中可以进行传实参，下面接受<template> <ul class="test-container"> <li v-for="item in list" :key="it
2021-10-06 17:09:36
136
原创 vue3的图片懒加载自定义指令
**图片懒加载-自定义指令**核心：图片进入视口才发送网路请求(数据的url交给img.src属性)这里用到了vue3的核心包的API，然后以插件的形式注册，和vue2的自定义指令有些不同import { useIntersectionObserver } from '@vueuse/core'import defaultImg from '@/assets/images/200.png'export default { install (app) { app.directive(
2021-09-30 14:48:13
233
原创 轮播图组件
自己封装组件时，先把静态的页面写好，然后再去把静态的变为动态数据，一般简单的数据的改动用props，如果是复杂的改动，则需要用插槽，多个的话需要具名插槽,如果有多个插槽，有一个没给名字，则默认名字是default<template> <div class="box" style="height:500px"> <div class="xtx-slider " @mouseenter="mouseenter" @mouseleave="mouseleave">
2021-09-29 20:08:07
321
原创 vue3的组件通信
vue3是向vue2向下兼容的，并不是替换setup()是vue3入口函数组件通信父传子子传父provide和inject（任何组件之间）顶层用provide、底层用inject一般数据响应式数据
2021-09-26 22:01:50
315
原创 如何封装Axios
目标:基于axios封装一个请求模块，调用接口时使用添加实例化请求拦截器响应拦截器封装一个通用的请求函数 (非必须)import axios from 'axios'const instance = axios.create({// baseURL 基地址 baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/', timeout: 5000//超时时间配置})//请求拦截器// 全局注册tokenins
2021-09-26 20:37:31
192
原创 在一个方法里调用新增和编辑接口
当我们编辑和新增用同一个弹框的时候，新增接口和编辑接口都是点击确定按钮这个时候我们往往需要有一个判断条件去区分到底调用哪一个接口这个条件就是通过vue调试工具，我们看看编辑的时候回显的数据和新增的数据的不同（往往是新增无id，编辑会回显，有id）可以看出新增无id，编辑有id如果是父子组件的，还要注意一个bug，因为我们回显的接口参数是父组件传来的值，，并且把这个返回值给了自己声明的这个data变量，那么在我们点击编辑的时候，我们一直得到的都是回显的这个数据，一直都会有id，那么我们就进不去新增
2021-09-18 21:47:10
1841
原创 422报错
错误解释：field:具体哪一个字段出错了*error:*这个字段错误信息解决办法：field:有可能是你没传这个字段有可能是你传的这个字段类型不对仔细看看接口需要传的具体参数是哪一个，确保自己传的正确*error:*看报错信息的内容：类型/缺失这个字段，才能精准找到错误原因，才能去修改...
2021-09-18 21:21:07
2488
原创 调用接口的返回值不是需要的
当我们需要调用接口传参首先看传参格式，是对象还是其他数据类型，其次看具体传参内容如果其中包括id(或者修改的时候必须要变得一个值)，首先需要后台给我们，通常使用插槽，因为会返给我们一个当前对象，从中可以得到id然后去配这个调用接口的参数调用接口返回的数据不是我们需要渲染的内容假如返回值不是我们需要显示的内容格式，这时无法让返回值和自己声明的值同步这时，我们需要手动去修改这个值，以达到一种同步的状态这时往往需要判断，判断条件是这个后台给我们的值然后根据具体情况手动修改这个值，再去调用接口
2021-09-18 21:04:29
342
原创 如何解决跨域
首先需要了解，何为跨域？跨域：指的是协议、 域名 端口 三者有一个不一致就会出现跨域，受同源策略的影响。所以我们需要解决这个问题？方案有以下几种cors这种主要有后端开发人员主导，开启允许我们跨域的接口...
2021-09-16 17:53:29
173
原创 如何将别人的项目进行二次开发
网上许多别人写好的项目，或者工作中，我们可能都不是从头开始的，而是别人已经写过的，我们如何开发呢？首先，克隆下来git clone gitee/gitbut的http地址先把.git删除，断开别人的链接，建立自己的仓库,最好也建立gitee网上仓库git init其次把项目的依赖包下载下来，出现这么个文件夹：node_modulesyarn然后运行，运行命令看package.json这个文件里的运行命令yarn start/npm run start 查看，了解每一个文件夹的作用
2021-09-14 22:09:14
1129
原创 自己写的组件绑定v-model语法糖
学习vue我们知道，我们想要使用v-model，都是和form表单绑定的，如果我们自己写了一个组件，如何在使用它时，让他也能拥有v-model一样双向绑定的语法糖效果呢？首先看一下官网上说的自定义组件绑定v-model首先写一个组件，并且要在父组件中使用组件记得注册，局部或者全局，或者插件注册vue插件注册不会插件注册的可以去看一下 必须要知道2件事：v-model内部绑定的属性是value，绑定的事件是inputv-model会自动做这2个：:value=’’ @input=’
2021-09-12 16:08:26
225
原创 vue中的router路由守卫
基本套路是一样的，要看具体需求，编写路由访问权限[1 ] 创建白名单列表（不需要token的）[ 2] js文件使用router和vuex对象，需要导入[ 3] 使用beforeEach方法，传入3个参数，to,from,next[4 ] 根据具体业务需求编写逻辑代码[ 4-1] 有token——>怎么做[4-2 ] 无token——>干什么// 权限控制import router from '@/router'//路由对象import store fr
2021-09-11 20:35:53
390
3
原创 将数据处理为Tree树形数据
当我们使用element组件库的Tree组件时，我们需要一个树形数据才能进行渲染const arr = [ { id: '01', name: '张大大 项目经理', pid: '', job: '项目经理' }, { id: '02', name: '小亮 产品leader', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIleader' }, { id: '04', name: '老
2021-09-10 21:17:18
472
原创 根据条件将一个一维数组转化为我们想要的二维数组
需求我们在导入表格时，需要的是一个二维数组，而且有时，我们只想导出部分数据问题后台返给我们的通常是一个一维数组，这个时候我们需要去处理数据前提：知道*Object.keys()和Object.values()*的用法let sourceData = [ { name: "张三", age: 18, height: 180 }, { name: "李四", age: 28, height: 160 }, { name: "王五", age: 38, height: 170 }
2021-09-10 19:58:18
398
原创 vue如何写插件
注册插件假如自己写了一个组件，需要全局使用，首先当然可以全局注册，但当我们需要有多个自己自己写的组件或者自定义指令以及方法时，就要在入口函数main.js写一次，这样的话，我们的入口文件就会非常大，不再简洁，这时我们注册插件，就像我们使用element和vant组件库一样，可以有非常多的功能如果需要注册什么功能，首先需要引入，这里我们就只注册包含一个组件的插件**注意：**你导出的是默认，导入同样用默认导入。导出的是按需导出，导入就要用按需导入{和你导出的名保持一致}插件导出，去入口文件main.
2021-09-09 15:56:21
354
原创 持久化处理token
持久化处理token为什么我们要做持久化？vuex基于内存管理的工具，内存每次刷新浏览器都会进行初始化 token丢失问题如果想要使用vuex管理数据的便捷，而且又想刷新时还不丢失 localStorage和cookie持久化缓存如何实现持久化呢？这里小编使用的是vuex和cookie专门给cookie封装了函数// 专门用来操作cookie的方法包// 内部封装繁琐的操作 参数处理 暴露函数import Cookies from 'js-cookie'// 定义一个变量c
2021-09-03 17:44:40
341
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人