- 博客(291)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 vue中组件的props属性（详）
今天这篇文章，让你彻底学会props属性……props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
2021-10-28 11:20:54
181748
51
原创 《愿你》-- 送给来访博主的每一位小伙伴
❤️愿你拥有好运气。对一切充满感激，喜欢美好，也喜欢自己。❤️愿你有盔甲也有软肋。善良得有原则，感性得有底线。对可恶的，就该连本带利地还击，凶狠之后别失礼仪。❤️愿你不饶点滴，不饶自己。❤️愿你一生努力，一生被爱。在糟糕的日子里和注定的人撞个满怀。❤️愿你付出甘之如饴，所得归于欢喜。有人说你不甘平庸，其实你只是想遇见那个更好的自己，只是别忘了偶尔停下来，就当犒劳那努力的自己。❤️愿你道路漫长，有的是时间发生故事。若没有人陪你颠沛流离，便以梦为马，随处可栖。因为是你，到的地方一定温暖为..
2020-12-15 14:38:32
490
2
原创 elementUI表格实现可编辑和增加行功能--直接复制即可
结构： <div class="twoTable fuceng"> <div class="h_top"> <span>新建任务</span> <img src="../../../../static/img/close.png" alt="" @click="close_twoTableDelete"> </div> <div cla
2020-07-16 17:24:37
11116
2
原创 vue中使用antvG6画分组结构图及树形关系图
效果图：<div id="container" ></div>我是对G6中提供的该图的相关函数进行了封装--下面的代码是写在公共js文件里面：export function renderMap(data,graph){ const collapseIcon = (x, y, r) => { return [ ['M', x - r, y], ['a', r, r, 0, 1, 0, r..
2020-06-24 11:51:11
7903
原创 使用antV-G6在angualr中画树形关系图
使用antV-G6在angualr中画树形关系图（流量追踪图）公司有个需求就是既要呈现出每个节点之间的关系（图里面需要带箭头，为了表现出流向关系），又要排版呈现出树状结构，也就是说是具备层次关系的，这种图呢就相当于既不完全是树图，形状呢又不是关系图，我算是苦思冥想了。而且又是在angualr中，angualr中支持的第三方插件特别少，本来想采用echarts的树状图，但是发现，树图的每个节点...
2020-04-30 15:31:41
6568
10
原创 vue3项目中实现国际化语言切换【直接粘贴即可】
注意：所有的项目中的涉及到的语言切换的配置，需要在下面的en.js和zh.js中自行定义好，且需要一一对应，否则可能出现切换了不起作用的情况。对应的英文配置：utils/i18n/locales/zh.js。分为三块：组件封装、store封装、配置方法封装。使用的插件：vue-i18n。
2025-04-09 16:39:18
365
1
原创 pinia中不定义state和action也能正常使用属性和方法
这种设计让 Pinia 使用起来更加灵活，特别是对于熟悉 Vue 3 组合式 API 的开发者来说，代码会更加简洁直观~而直接使用属性和方法，这是因为 Pinia 的设计非常灵活，利用了 Vue 3 的响应式系统。返回的所有内容都会被正确推断为 store 的成员。语法中，你可以直接返回一个包含属性和方法的对象。这些属性和方法会自动成为 store 的一部分。创建，因此pinia中一般定义属性和方法即可。在 Pinia 中，确实可以不显式定义。也能正常使用属性和方法的原因！包装的值才会是响应式的。
2025-04-08 20:07:29
362
原创 搭建一个简单的node服务，模拟后端接口
二、创建一个文件夹，用于放你的node服务代码。四、安装 Express（快速搭建服务的框架）法三、在vue3项目中调用，但是要配置代理。三、初始化一个package.json。一、查看是否安装了node和npm。法二、直接在控制台用fetch调用。五、创建serve.js。法一：使用 curl。
2025-03-04 10:38:19
465
1
原创 让你对nvm npm cnpm pnpm yarn npx n nrm不再迷茫
pnpm（Performant npm），是一个快速、磁盘空间友好的包管理工具，和 npm 类似，可以简单理解为 npm 的优化加强版。nrm是node registry manager的简称，中文意思是node安装源管理工具，主要用于在同一台机器中，管理多个不同的安装源，动态切换使用。npm 是 Node.js 的默认包管理器，通常与 Node.js 一起安装，无需额外配置。npm 作为 Node.js 的一部分，安装 Node.js 即完成了 npm 的安装。pnpm --registry <地址>
2025-02-05 16:11:29
559
1
原创 JavaScript原生复制方法，比引入插件方便多了
进行复制操作时，如果浏览器控制台显示类似“已废弃”的警告信息，这意味着未来的浏览器版本可能会移除这个功能。因此，建议使用原生JavaScript配合。
2025-01-13 11:39:20
115
原创 vue3实现系统tab标签页面切换
由于本系统的keepAlive实现没有用页面的name，而是用v-if条件判断哪些页面缓存就套个keepalive的壳，否则正常展示，因此，上面刷新的逻辑原理，需要配合下面的key值设置。如果，你们是通过设置页面name，结合include实现的缓存，就像下面这种形式，那么可以用v-if实现刷新。刷新的逻辑就是，在store里面存一个isReload的变量。使用的是element-plus中的el-tab组件，结构目录如下。右键显示功能菜单，写成了一个组件，在上面文件中进行引用。
2024-08-23 16:08:42
1061
1
原创 手把手教你如何在vue3中使用tsx渲染组件（必看）
注意：子组件中需要添加 emits: ["numClick"]，同vue3类似，vue3中也需要添加defineEmits将事件发射出去。vue中子向父传值都是emit的方式，这个在vue3中写法相似，只是多了一个定义emit的步骤，这也是为了后续的类型推导做准备。注意：v-model里面绑定变量需要加上 .value ，这也是与vue3的区别。v-model，v-show跟以前的用法类似，但注意后面不是双引号“”，而是大括号{}注意：父组件接收子组件发射的方法同样需要加上 on。
2024-08-08 10:15:31
1750
原创 强化JS基础水平的10个单行代码来喽！（必看）
规范中提到， 要比较相等性之前，不能将 null 和 undefined 转换成其他任何值，并且规定null 和 undefined 是相等的。是 ECMAScript 6 中新增的一个方法，它可以从类数组对象或可迭代对象（如字符串、Set、Map、NodeList 等）创建一个新的数组实例。提供初始值，cur 从数组第一项开始，若不提供初始值，则 cur 从第二项开始执行，对应的第一次 prev 是数组第一项的值。能做的，reduce都可以做，比如数组求和、数组求积、统计数组中元素出现的次数、
2024-08-05 17:46:58
920
原创 vue3中使用vueuse（必看）
首先vueuse不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API（组合式API）的常用工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式，省去程序员自己写相关代码。通俗的来说，这就是一个工具函数包支持了更好的逻辑分离，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。它的功能是将输入的文件转换为 base64 编码，并允许你监听文件的变化。剩余方法自行开发理解哈~State（状态机）
2024-08-02 17:49:52
2090
原创 可以给img图片设置颜色，你们知道吗？
大家都知道设置svg图片的颜色只需要设置color值，那么我们想直接修改img图片的颜色如何更改呢？只需要两行代码即可。
2024-07-19 09:56:26
654
原创 解决vue3中el-input在form表单按下回车刷新页面
解决方法 ： 再给一个input 表单 将其设置style="display:none"中只有一个input 框则按下回车会直接关闭表单 所以导致刷新页面。点击回车之后 刷新页面。
2024-07-16 17:45:14
729
原创 elementPlus自定义el-select下拉样式
即可，这样就可以将下拉框添加到body元素中去，否则当我们失去焦点，下拉就消失了，在元素中找不到el-select。剩下就可以通过如何自定义，大家自行设置吧~如何在f12元素选择器上找到下拉div呢？给el-select添加。
2024-07-02 14:54:45
904
1
原创 vue3+ts实现精确计算两个字符串的相似度
算法来精确匹配两个字符串的相似度百分比。Levenshtein距离是指两个字符串之间，由一个转换成另一个所需的最少编辑操作次数，这里的编辑操作包括插入、删除、替换。通过这种方式实现的字符串相似度是比较准确的。无论是匹配中文、英文、还是中英结合的、或者正序倒序的都可以正确匹配出来~在TypeScript中，可以使用Levenshtein。
2024-07-01 17:56:03
485
原创 vue3+ts实现匹配度排序搜索
先看下效果，根据点击后根据搜索的逻辑，可以将全匹配的优先展示，其次根据匹配度依次排序展示，同时忽略简繁体进行搜索。注意：里面引入的简繁体转换插件，是在这个博客中已提到。如果不需要简繁体转换，就可以去掉。
2024-05-20 11:27:54
379
原创 vue3中实现简繁体转换
由于项目在大陆和台湾同胞同步使用，因此需要实现中文的简繁体转换，实现输入简体，能搜索出简体和繁体的相关内容，输入繁体，也能搜索出简繁体相关内容。忽略简繁体，扩大搜索范围。过滤的时候，使用该简繁体转换的函数即可，将简繁体相关的内容都返回出来。
2024-05-15 16:50:57
1450
原创 vue2中npm i报错gyp info it worked if it ends with ok
当我拿到一个老的vue2项目，怎么也起不起来，后来找到报错原因，如上图所示，可以看到报错的path是node-sass，那么就猜想应该是sass版本和node版本不匹配。此时根据对照表，修改sass版本即可 ，也可以选择降低node版本，但我认为直接修改sass版本更方便~修改完成之后，再npm i 、npm run dev就好了。于是我查看了我的node版本是16+而sass版本是下图所示，版本有点低。
2024-05-11 09:55:05
570
原创 vue3中使用antv-S2表格（基础功能版）
表格的数值默认会渲染排序 icon, 可以配置 showDefaultHeaderActionIcon关闭。当配置为对象时，always 控制是否在子维度不足 2 个时始终展示小计，默认不展示。首先创建一个vue3+vite+ts项目，可以查看下面相关文章，只看第一条即可。可以调整行宽、列宽、列排序、单个单元格详情展示、选中某列、某行等基本功能。可以通过上面设置的SUM函数自动计算出数值，也可以自定义累加函数。配置自定义方法优先级大于配置聚合方式，即配置。1、在项目中安装（npm/pnpm都可以）
2024-04-10 18:04:10
1722
原创 解决vue3中刷新浏览器页面的axios请求状态变为canceled
为什么会想到fetch呢，是因为最近在开发中要加一个悲观锁的功能，具体需求是：用户1和用户2不能同时打开一个模型进行编辑，用户1优先进入模型后，要对该模型进行上锁，关闭该模型或刷新页面时要进行解锁，此时在刷新页面时出现了问题。由此可得出原因：页面刷新后，页面已经被销毁，但放在mounted中的解锁异步请求还没完成，页面就会主动把未完成的请求取消掉，这时的请求是还没到服务器的。在后台使用 Fetch API，因此它同样具有 64 KB 的载荷限制，以及它还可以确保请求在页面卸载后继续发出。
2024-03-21 16:33:01
1675
2
原创 vue3中使用vuedraggable实现拖拽el-tree数据进分组
vue3中使用vuedraggable拖拽el-tree数据，可以实现单个拖拽、双击添加、按住ctrl键实现多个添加，或者按住shift键实现范围添加，添加到框中的数据，还能拖拽排序
2024-02-22 11:46:36
1557
原创 微信小程序跳转第三方网站链接
很简单，先定义一个跳转外网的页面，利用 web-view 标签，通过src设置你要跳转的外网地址。然后在你的跳转按钮写跳转函数即可。
2024-01-24 15:35:29
3021
2
原创 elementPlus下拉框实现自定义模糊查询且100%匹配的优先展示
里面只需要修改对应的参数即可。100%匹配的同样会优先展示。创建人就会显示在创建时间。创建时间在创建人之上。
2024-01-16 14:27:52
1145
原创 vue3中实现el-tree通过ctrl或shift批量选择节点并高亮展示
按住ctrl键实现单个多选 按住shift实现区间范围多选。2、通过循环节点数组来更新nodes节点中isCurrent属性，控制高亮。引入的hooks文件，index.ts。1、重点是要获取当前所选节点数组。
2023-12-08 16:12:28
1653
原创 vue3中使用antv-X6实现关系图
代码如下，里面有个useMouse()函数，追踪鼠标位置，这个需要项目中安装vueuse，可以查看下面文章去自行安装，这里使用的X6中自定义节点的方式实现的，项目目录如下，hooks里面存放一些函数和变量。nodes里面是自定义节点的页面，最外围的index.vue就是主渲染页面。这个是自定义节点页面，定义好之后，在主页面中进行引入。有问题的可以评论区讨论~
2023-12-06 15:04:11
2565
2
原创 用echarts在vue2中实现3d饼图
1、修改3d饼图大小，在大概244行的位置，grid3D的对象里面，修改distance属性，即可调整。在3d饼图中设置下面这两属性是没用的，所以这里请注意一下，记得去grid3D里面修改他的位置。4、修改饼图位置，这个常用，也是在grid3D这个属性里面设置，在大概240行的位置。3、修改3d饼图颜色，直接在data中的optionData里面修改就行了。2、修改3d饼图视角高度，在大概161行的位置，修改函数的第二个参数。二、在main.js中引入。直接复制粘贴吧，省事。
2023-10-20 17:08:54
11640
17
原创 Argument of type ‘string | null‘ is not assignable to parameter of type ‘string‘. Type ‘null‘ is n
sessionStorage.getItem("detail") 方法可能返回null , 而null 不是字符串 ， 则JSON.parse在执行时就会出错，所以typescript 提示了上面的错误信息，即要处理为null 的情况。
2023-10-19 14:35:42
2047
原创 【three.js】坐标辅助器和轨道控制器
结合上一篇基本的3d页面代码，我们在里面添加坐标辅助器，也就是x y z轴坐标系，这样可以更直观的查看物体的位置。现在我们设置的立方体是自动旋转的，如果我们不想让他自己旋转，想手动拖拽，如何实现呢？查看效果，z轴不显示是因为，z轴是正对我们脸部，从我们正面看就是一个点。其实就是可以让拖拽或者放大缩小的行为不那么生硬，可以使其慢慢停止下来。看效果 ，用鼠标拖动并松开鼠标时，会慢慢停止，而不是立马停止。为了让z轴显示出来，我们修改相机的位置。效果，可以自动旋转，也可拖拽。这时就用到了轨道控制器。
2023-10-09 14:33:35
1008
原创 【three.js】结合vue进行开发第一个3d页面
如果我们想要不断的渲染，让它动起来，看到它不同方位的形状，需要调用渲染函数，如下所示。效果：由于我们设置的是从z轴看这个正方体，因此正对z轴看到的是平面。此时就完成了在vue中开发的一个简单的3d页面。回车后，依次输入项目名，选择vue和Js开发。新建一个项目目录，在集成终端打开，输入。将上面的静态渲染改为下面的旋转动画渲染。接下来我们开始安装three。然后安装依赖并运行项目。
2023-10-09 11:36:27
3635
vue打包为exe程序的demo包，全都配置好了，里面有详细使用流程
2021-05-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人