- 博客(17)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 二级导航栏加面包屑的实现
因为我把key的值设置的是路由的path路径，点击导航栏的时候要调用组件内置事件handleSelect 给activeIndex赋值实现高亮，当然我这里只是其中一种思路，肯定会有更好的实现思路的。因为切换路由的同时面包屑也要同步更新，我最初的方案是使用watch来监听，这个想法没错，但是刚开始监听的是activeIndex，这就导致了一个问题，第一次点击切换导航栏的时候面包屑是不同步更新的。监听整个$route路由，这样就完美解决了上面的问题。记录一下过程，如有更好的思路，欢迎随时交流指教。
2023-07-29 17:44:48
338
原创 什么是webSocket
WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。（维基百科）WebSocket本质上一种计算机网络应用层的协议，用来弥补http协议在持久通信能力上的不足。WebSocket 协议在2008年诞生，2011年成为国际标准。现在最新版本浏览器都已经支持了。
2023-07-15 17:18:40
763
1
原创 使用vue3+vant如何实现主题定制
在实际开发中不可避免的要使用一些组件库，但是里面的样式往往不是我们所需要的，和我们做的项目的主题所不匹配，那么我们就可以自己来主题定制，最常用的就是色彩主题定制和样式定制。项目主题：选择适合项目的主题色彩，可以根据品牌色彩或项目设计风格来进行选择，确保组件库的颜色与项目整体一致。样式定制：定制组件库的样式，包括按钮样式、输入框样式、边框样式等。可以通过修改 CSS 或使用样式覆盖机制，使组件库的样式与项目的整体风格一致。
2023-07-14 20:56:34
1128
1
原创 选项式API和组合式API的区别
在逻辑组织和逻辑复用方面，是优于因为几乎是函数，会有更好的类型推断。对友好，代码也更容易压缩中见不到this的使用，减少了this指向不明的情况出现命名冲突的问题在逻辑组织和逻辑复用方面，是优于因为几乎是函数，会有更好的类型推断。对友好，代码也更容易压缩中见不到this的使用，减少了this指向不明的情况如果是小型组件，可以继续使用，也是十分友好的。
2023-07-14 14:43:08
220
1
原创 如何从0到1创建一个vue3+ts的项目
会得到一个项目目录, cd到文件夹目录并下包 可以输入code.直接直接通过vscode打开项目。项目使用 Sass 预处理器，安装 Sass，即可支持 Scss 语法。可以根据自己的需求自行配置自己的规则,这里不在过多赘述，打开VSCode 开启 ESLint 自动修复，修改.eslintrc.cjs文件，补充配置项。这里我们可以优化一下，把pinia代码抽离出来。上面的两句命令，如果不能成功，就一句一句运行。统一导出，代码简洁，入口唯一，,这里有好几种导出方法，如下。
2023-07-13 09:18:06
159
1
原创 如何二次封装Element-Plus table组件
这里取了个巧，因为后台接口要传的必传参几乎一样而且都是GET请求，我就把请求也直接页封装在组件里了，只需要传一个请求地址就可以正常渲染，项目的批量删除也在组件内部处理了，且表单数据也可以直接传入到组件的params属性，这样查询时也可以动态更新数据，封装的不是那么的全面，欢迎各位路过的大佬们给出指点和建议，互相学习进步！最近做了一个后台的项目,需要用到大量的表格组件,我就试着把它给封装了一下，记录一下，那么现在开始了。效果：这里分页也在组件处理了，所以也无需自己在弄分页了。
2023-07-11 10:07:37
1150
原创 如何从0到1创建一个vue3+ts的项目
会得到一个项目目录, cd到文件夹目录并下包 可以输入code.直接直接通过vscode打开项目。项目使用 Sass 预处理器，安装 Sass，即可支持 Scss 语法。可以根据自己的需求自行配置自己的规则,这里不在过多赘述，打开VSCode 开启 ESLint 自动修复，修改.eslintrc.cjs文件，补充配置项。这里我们可以优化一下，把pinia代码抽离出来。上面的两句命令，如果不能成功，就一句一句运行。统一导出，代码简洁，入口唯一，,这里有好几种导出方法，如下。
2023-07-11 00:26:05
140
原创 TypeScript的基本使用
TypeScript 是由 Microsoft 开发和维护的一种开源编程语言。它通过为 JavaScript 添加静态类型注解和其他功能，提供了更好的可读性、可维护性和可靠性。TypeScript 最终会被编译为普通的 JavaScript 代码，在任何支持 JavaScript 的环境中都可以运行。本篇博客介绍了 TypeScript 的基础知识，包括类型注解和推断、类和接口，以及泛型的使用。TypeScript 提供了更好的类型系统和工具，帮助我们开发和维护可靠的前端项目。
2023-07-06 23:22:00
220
1
原创 深入探究Mock.js：前端数据模拟利器
1.1 什么是Mock.js Mock.js是一款前端数据模拟工具，它可以拦截ajax请求并返回模拟数据，从而实现前端开发中的数据模拟。Mock.js提供了一套简洁灵活的API，能够生成各种类型的随机数据，支持自定义规则生成数据，并可以与前端开发框架无缝集成。1.2 Mock.js的特性随机数据生成：Mock.js可以根据预定义的规则生成各种类型的随机数据，包括文本、数字、布尔值、日期等。数据拦截：Mock.js可以拦截ajax请求，模拟后端接口返回数据，从而实现前端开发中的数据模拟。
2023-06-30 22:11:53
657
原创 组合式API - reactive函数和ref函数区别
说到ref和reactive这两种方法,毋庸置疑这是vue3的两个组合式API的关键概念,我们先从Vue2.x和Vue3.0中的响应式原理说起,下面是Vue2与Vue3的响应式对比
2023-06-29 22:39:14
145
1
原创 vue实现上传拖拽功能
vue实现上传拖拽功能首先让我们看看用到了那些属性accept一个 HTML 属性，用于指定可接受的文件类型或 MIME 类型，通常用于文件上传的 元素,用于限制用户在文件选择对话框中可以选择的文件类型或 MIME 类型。这有助于提供更好的用户体验，并在前端对文件类型进行初步筛选changechange 事件在表单元素的值发生改变时被触发，可以用于处理用户对表单元素的交互操作,通常与表单元素（如 , , 等）一起使用。需要注意的是，change 事件通常在表单元素失去焦点（blur）时
2023-06-20 23:01:22
1692
1
原创 Cascader 级联选择器无法高亮问题
但是在自己测试的时候发现一个问题，就是刚开始进入这个页面的时候已选中的选项不会高亮，这就不美好了，我不想这样， 我希望 Cascader 级联选择器默认第最后一个选项且我刚进入这个页面的时候最后一个选项就要显示高亮，options 的数据格式是树形结构。我刚开始是在el-cascader组件绑定一个change事件，每次点击都可以获得一个数组 我开始是采用简单的取数组值 value[value.length - 1]，但是这并不能解决高亮问题，于是我去官网逛了一圈，果然让我找到了一个解决方案。
2023-05-29 23:12:07
705
1
原创 Vue概念与一些基础指令
概念：Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的渐进式框架基于数据渲染出用户可以看到的界面[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lw2VWkwc-1682521295538)(assets/1681875887026.png)]所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点所谓框架：就是一套完整的解决方案举个栗子。
2023-04-26 23:07:00
86
原创 JS事件循环
程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
2023-03-13 11:19:44
156
原创 你不知道的 CSS 之包含块
一说到 CSS 盒模型，这是很多小伙伴耳熟能详的知识，甚至有的小伙伴还能说出 border-box 和 content-box 这两种盒模型的区别。但是一说到 CSS 包含块，有的小伙伴就懵圈了，什么是包含块？好像从来没有听说过这玩意儿。
2023-03-06 10:30:23
298
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人