- 博客(90)
- 收藏
- 关注
RSS订阅原创 大屏动画效果
0%表示动画开始时的状态，即动画开始时元素的样式。50%表示动画进行到一半时的状态，即元素经过一定时间后的样式。100%表示动画结束时的状态，即动画结束时元素的样式。3）rotat e。
2024-06-25 15:34:39
642
原创 单点登录的几种方式
sso需要一个独立的认证中心，所有子系统都通过认证中心的登录入口进行登录，登录时带上自己的地址，子系统只接受认证中心的授权，授权通过令牌（token）实现，sso认证中心验证用户的用户名密码正确，创建全局会话和token，token作为参数发送给各个子系统，子系统拿到token，即得到了授权，可以借此创建局部会话，局部会话登录方式与单系统的登录方式相同。单点登录的英文名叫做：Single Sign On（简称SSO），指在同一帐号平台下的多个应用系统中，用户只需登录一次，即可访问所有相互信任的系统。
2024-06-19 14:50:04
885
原创 vue表格中上传按钮样式
因为上传的图标被包含在el-upload中，而删除按钮并没有被包含在el-upload中。所以整体的样式对应上传有偏差。
2024-05-22 10:04:18
218
原创 vue 中el-select联动 清空后无法点击选择后一个el-select
【代码】vue 中el-select联动 清空后无法点击选择后一个el-select。
2024-05-08 17:02:15
549
1
原创 小程序vant组件中，日期选择器van-calendar选择历史日期
组件默认是选择当日之后的日期，加上限制最小日期就好了 :min-date="new Date(1990, 0, 1)"。
2024-05-08 15:26:40
1908
1
原创 配合后端-开发工具（在线）
1.url编码解码工具：URL解码 URL编码 在线URL解码/编码工具 iP138在线工具2.json在线解析：JSON在线 | JSON解析格式化—SO JSON在线工具
2024-02-04 08:51:10
549
原创 vue：菜单栏联动内容页面tab
需要实现效果：左侧菜单栏与右侧内容部分联动，当点击左侧的菜单，右侧会展示对应的tab，没有点击时，不展示（如刚进入页面没有点击菜单，则没有tab）；点击后没有关闭tab再打开其他菜单（如测试项目2），则测试项目2的tab高亮为选中状态。
2024-01-18 17:55:33
2504
原创 vue：文件下载
这一系列操作实现了通过浏览器触发文件下载的过程。要注意，这种方式适用于现代浏览器，但在一些旧版本的浏览器中可能存在兼容性问题。: 这一行代码检查 HTTP 响应的状态是否为 200，表示请求成功。只有在成功的情况下才会执行后续的文件下载操作。这是为了触发下载，因为浏览器需要在文档中存在的元素上进行点击事件。这个 URL 将在后续用于文件下载。是文件的名称，会在下载时使用。元素并触发点击实现文件下载。元素，用于设置下载链接。属性，以便关联下载链接。: 设置下载时的文件名。元素，触发文件下载。
2024-01-17 15:10:24
3364
原创 vue：处理base64格式文件pdf、图片预览
在文件预览的上下文中，这一步是为了将服务器返回的Base64编码的文件内容解码为原始二进制数据，以便后续可以处理和使用这些数据，比如创建Blob对象用于文件预览。）如果文件类型不是 'pdf'，则继续检查是否属于图像格式（'png', 'gif', 'jpg', 'bmp', 'svg'）。对象实际上是一个包含了文件内容的二进制数据，其中每个元素都是一个 8 位无符号整数，对应于之前字节数据的数值表示。这一步的目的是为了获得一个用于预览文件内容的 URL，通常用于将文件内容嵌入到页面中或者在新窗口中打开。
2024-01-17 11:30:23
5928
原创 vue-预览public(本地)文件下的pdf文件方式
2）引用时，不能使用相对路径，因为使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。注意： （ ../../public/exam.pdf'), 这 样 写 是 打 不 开 的 ， 不 能 写 成 相 对 路 径。1）在vue项目中，读取本地的pdf文件需要放到public下static文件夹中，不能放在别的地方；iframe也是，不可以用相对路径，直接：/文件名.pdf 就可以。1.把文件放在public文件夹下。
2024-01-17 09:41:11
1748
原创 跨域问题解决：chrome浏览器禁用跨域功能
一般我们的解决方法是设置代理，但有些情况比如外网地图不太好改允许跨域，此时可以chrome浏览器禁用跨域功能，这样就可以访问了。需求：在开发中，我们常常遇到：内网、外网不互通，异地等跨域问题。
2024-01-10 17:48:46
6444
原创 vue、element-ui使用el-tooltip判断文本是否溢出
1.需求：需要实现文本单行显示，超出时，使用省略号，划过该文本时使用tooltip显示全部文本。需要考虑数据是由接口动态获取，只有溢出文本鼠标滑过时显示全部文本，没有溢出的则不需要。判断文本溢出之前一定要使用单行文件溢出显示省略号的css，并且要加在tooltip内部要溢出隐藏的span上，不然scrollWidth和clientWidth会一直为0。这里网上可以找到很多方法，我是用scrollWidth去拿到实际文本长度，跟clientWidth文本可视宽度作比较。第一步：首先要判断文本是否溢出。
2024-01-09 17:46:30
1509
原创 深度比较（lodash 的 isEqual 方法）
是一种深度比较，因此它会遍历对象的所有嵌套属性以确保相等性。这对于比较复杂的数据结构（例如嵌套的对象或数组）特别有用。是 Lodash 提供的一个函数，用于比较两个值是否相等。它会递归地比较两个对象的属性和值，以判断它们是否相等。返回值是一个布尔值，如果两个值是完全相等的（包括对象、数组、基本类型等），则返回。
2023-12-18 11:05:56
5094
1
原创 父子组件:isArchived=“isArchived“ 和 :isArchived.sync=“isArchived“ 区别
至于异步操作在父子组件间的意义，Vue.js 组件的生命周期和数据传递都可能涉及异步操作。例如，在父组件中调用子组件的生命周期钩子、异步获取数据后传递给子组件等。在 Vue.js 中，父子组件之间通过属性传递数据是一种常见的做法。两者之间有一些区别。
2023-12-18 10:31:35
654
原创 vue中element-ui日期选择组件el-date-picker 清空所选时间，会将model绑定的值设置为null 问题 及 限制起止日期范围
在Vue中使用Element UI的日期选择组件，当你清空所选时间时，组件会将绑定的v-model值设置为null。这是日期选择器的预设行为，它将清空所选日期后将其视为null。但有时后端不允许日期传空。因此，可以考虑使用自定义函数来处理日期选择器的值，然后根据需要进行相应的处理。
2023-12-14 17:09:23
8538
1
原创 数组去重有哪些方法
虽然这种方法可以去重数组，但通常来说，Set更适合这种任务，因为它的主要目的就是存储唯一的值。虽然Map主要用于键值对的存储和检索，但你也可以使用Map来去重数组，虽然不是最常见的做法。：ES6引入了Set数据结构，它只允许存储唯一的值，因此可以用来去重数组。：创建一个空对象，以数组元素的值为属性，并检查属性是否已存在来去重。方法，我们将Map中的唯一值提取出来，从而得到去重后的数组。方法来构建一个新的数组，只包含不重复的元素。来创建一个Map，确保键的唯一性。来创建一个新的数组，只包含不重复的元素。
2023-10-19 14:37:26
175
原创 一篇带你看懂异步：promise、async await
在前端开发中，特别是使用Vue.js框架时，Promises（承诺）和resolve是与异步操作相关的重要概念。让我来解释一下它们的含义和如何在Vue.js中使用它们。
2023-10-11 17:45:37
402
原创 iframe框架token失效重新登陆问题
而token失效在页面内时也是走到了这一步，也就是说明这里跳转登录页是没有问题的，但页面仍然报错，这说明现在登出的只是内层，要一层一层直到最外层登出才是正确的。这时如果你用的是iframe框架的话，就会出现登录界面是嵌套在框架里面的情况，或者出现下图所示报错情况。这样，当Token失效时，页面会被重定向到最顶层，然后执行你的登录逻辑，确保了整个应用程序的正确性。在我的代码中，我尝试了一下debugger，发现token失效后，当刷新整体页面时也是走到了这一步。生命周期钩子内，以便在页面加载完成后执行。
2023-10-09 16:32:07
2130
原创 【无标题】未完成
代码中，当用户点击保存按钮（`<el-button>`）时，会触发 `handleSaveAll` 方法，该方法调用了 `$refs['leftTab'].saveAll()` 方法。根据代码，这个方法会执行一些保存相关的操作，但具体的实现逻辑是在 `my-left-tab` 组件中的 `saveAll` 方法中定义的。2. 异步调用：如果 `saveAll` 方法中包含异步操作，例如 `axios` 请求，那么可能会出现多次接口调用。
2023-09-28 10:51:46
66
原创 判断和比较方法if、==、===还有includes等
根据这些条件的不同组合，可以灵活地控制表单项的禁用状态，以满足业务逻辑和用户权限的要求。方法时，需要考虑其中的逻辑，该方法用于确定当前表单项是否应该被禁用。，表示允许添加新数据，那么表单项将保持可编辑状态，方法返回。，表示允许编辑数据，那么表单项将保持可编辑状态，方法返回。，表示不允许添加新数据，那么表单项应该被禁用，方法返回。，表示不允许编辑数据，那么表单项应该被禁用，方法返回。，则说明表单项是新建状态，此时会进一步检查。，无论其他条件如何，表单项都应该被禁用。，即表单项不是新建状态，那么会检查。
2023-09-28 10:50:11
103
原创 hasOwnProperty 方法解析
是 JavaScript 中的一个内置方法，用于检查对象是否具有指定名称的属性。具体来说，方法用于判断一个对象是否拥有某个指定的属性，而不是继承自原型链的属性。它是一个布尔值方法，如果对象拥有指定属性，则返回true；否则，返回false。例如，假设有一个对象person在上面的例子中，person对象拥有firstName属性，因此第一个调用返回true。但是，它没有age属性，因此第二个调用返回false。这个方法通常用于，以确保你。
2023-09-20 16:58:25
6971
原创 CSS :has伪类
has有时候我们会遇到一些场景，比如样式涉及到父子父子组件：我们使用了element-ui的Tree 树形控件，但是我们不希望使用其自带的样式，比如父级不希望有选中样式之类，中国社会科学院就可以用has。:has伪类的语法非常简单，表示满足一定条件后，就会匹配该元素。例如，下面的选择器只会匹配直接包含img子元素的a再例如，下面的选择器只会匹配其后紧跟着p元素的h1元素从形式上来看，去除:has()后，剩下的选择器仍然是完整的a>img加上:has()后，可以选中最前面的元素a。未完待续。。。。
2023-08-29 13:52:44
1014
原创 Canvas和SVG
它描述了图形的形状、颜色、大小等信息，而不是使用像素来描述。SVG 图形是矢量的，因此可以无损地缩放，适用于不同分辨率的设备。Canvas 是一个用于在浏览器中绘制图形和图像的 HTML 元素。它提供了一个基于像素的绘图环境，可以通过 JavaScript 动态创建和修改图形。你可以在 Canvas 上绘制图形、绘制图像、创建动画等。当涉及前端绘图和图形表示时，可能会遇到两种主要的技术：Canvas 和 SVG。这两者在实现和用途上有所不同。
2023-08-28 10:40:37
101
原创 v-on 和 v-bind
这是Vue中用于绑定数据的指令。它用于将 Vue 实例的数据绑定到 HTML 元素的属性中，以实现数据驱动的动态更新。来监听元素的各种事件（如点击、输入、鼠标移动等），并在事件触发时执行指定的回调函数。并不通常与回调函数一起使用，它用于在 HTML 元素上动态绑定数据。用于绑定数据到元素属性上。指定的是事件处理函数（回调函数），而不是直接的回调函数。这是Vue中用于绑定事件监听器的指令。都可以与回调函数一起使用，但它们的作用不同。是一个在 Vue 实例中的数据属性，中并没有直接使用回调函数的情况。
2023-08-28 10:39:30
1451
原创 vue中的Computed和watch区别即使用方法、场景
在Vue.js，computed是一个非常有用的属性，它允许声明计算属性，这些属性会根据其依赖的数据进行自动更新，而无需手动触发。computed属性常用于根据现有的响应式数据进行计算，以生成派生的数据，而这些数据的值会随着依赖数据的变化而自动更新。computedcomputed属性会在其依赖的数据发生变化时进行重新计算，但是它会缓存计算结果。这意味着，只有在依赖数据变化时，才会触发计算函数重新执行，如果依赖数据没有变化，会直接返回之前缓存的计算结果，这有助于性能优化。
2023-08-25 16:13:57
943
原创 el-transfer穿梭框使用（传值、清空）
可能会遇到从后台获取的数据全部都显示在了左边框中，右边框没有数据，因为 v-model 绑定的selectedUserIds接收的是 key 的数组。有两个区域：一个是"待选用户"，另一个是"已选用户"。在组件el-transfer中有些特殊，因为他禁用的不是整个组件，而是每条数据。注意，这种索引方式依赖于子组件在模板中的位置，如果你的模板结构发生变化，这些索引可能会失效。来给子组件命名，然后通过命名来访问子组件，而不是通过索引。组件中的不同区域，每个区域可能具有不同的查询条件(代表一个Vue组件的引用。
2023-08-18 17:37:16
7801
原创 git修改当前项目仓库地址的方法（远程仓库）
git remote set-url origin "新的仓库地址" // ( 如果未设置ssh-key，此处仓库地址为 http://... 开头)git remote add origin "新的仓库地址" // 重新关联git远程仓库地址。git remote rm origin // 删除关联对应的远程仓库地址。git remote get-url origin // 查看远程仓库地址。git remote -v // 查看git对应的远程仓库地址。cd .git // 进入.git目录。
2023-08-09 14:16:07
728
原创 vue项目中el-tree ：横向和纵向滚动条设置
①纵向滚动条容易设置，只需要在el-tree组件中设置height即可。②横向滚动条稍微复杂，如下代码（或者通过js计算）
2023-08-09 14:13:55
6290
原创 前端性能优化
2.代码开发中尽量保证写出的代码清晰、可维护，比如：清晰的目录和文件结构、添加必要的注释、提取公共函数公共组件、组件单向数据流、组件功能尽量单一等。1.开发前会花时间梳理业务，全局视角过一遍交互和视觉，思考组件划分，找出项目中相似的部分，提取为公共组件和通用逻辑。页面中存在很多接口时进行优先级排序，优先请求页面重要信息的接口，并关注同一时刻请求的接口数量，如果过多进行分批请求。组件卸载时取消事件的监听、取消组件中的定时器、销毁一些三方库的实例。图片、数据量大的情况、播放直播视频的SDK、3D地图引擎等。
2023-07-17 16:07:05
344
原创 vue生命周期四个阶段（created和mount）
1）必经阶段2）非必经阶段提示：主动调用函数销毁后，可用将断开的new Vue()和页面重新建立虚拟DOM树，重新绑定起来挂载界面。2.生命周期钩子函数（回调函数）每个阶段前后，各有一对生命周期钩子函数，也就是回调函数。
2023-07-12 15:17:11
11065
原创 细节：双花括号（{{ ... }}）在Vue中的用法-无法取值问题
为什么后端返回的是数字类型时， {{ form.orderPrice }}可以拿到值展示， {{ form.orderPrice || "-" }} 不可以？）在Vue.js中的用法。双花括号是Vue.js的插值语法，用于将表达式的值渲染到模板中。是一个数字类型的值，并且该值为0或为空（或未定义），它将被视为一个假值。是一个数字类型的值，并且该值为正数（大于0），那么它被视为一个真值。的值），如果没有真值，则返回最后一个操作数。可以显示返回的数字类型值，而。是一个数字类型的值，而。时，将显示订单金额加上。
2023-07-11 17:19:02
2523
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人