你不讲 wood-CSDN博客

原创 HTML5之canvas绘图

canvas>是 HTML5 引入的一个强大元素，允许直接在网页上进行矢量图形和位图图像的绘制，为网页提供了一个动态图形渲染的平台。这一特性极大丰富了网页的表现力，特别是在数据可视化、游戏开发、交互式图表和动画制作等领域发挥着关键作用。查看浏览器支持率canvas 是一种强大的 HTML5 技术，用于在网页上绘制图形和图像，支持绘制基本形状、处理图像、实现动画效果以及响应用户事件，广泛应用于游戏开发、数据可视化和交互式应用中。

2024-09-14 19:33:38 1057

原创点击 input 框显示弹窗，关闭弹窗给 input 赋值并进行必填校验

点击输入框（input）时显示一个弹窗，当用户关闭弹窗时，将弹窗中的输入值赋给对应的输入框，并对输入内容进行必填项校验

2024-09-14 19:33:29 1334

原创 postcss 插件实现移动端适配

postcss-pxtorem 是一个 PostCSS 插件，它能够将 CSS 中的像素单位（px）转换为 rem 单位。这使得你可以直接按照设计稿的尺寸编写 CSS，并且通过这个插件自动转换为 rem，从而实现响应式布局，让页面在不同尺寸的设备上也能正确显示。

2024-09-13 19:41:07 663

原创媒体查询 + rem 实现 h5 移动端适配

在 H5 移动端项目中，使用媒体查询（Media Queries）和 rem 单位进行适配是一种非常实用的方法。其核心原理在于利用媒体查询来检测设备的视口宽度或其他特性，并根据这些特性动态调整根元素的字体大小，进而影响到所有使用 rem 作为单位的元素。这种方式允许你在不同屏幕尺寸上调整布局和字体大小，从而提升用户体验。

2024-09-13 19:40:27 311

原创前端 + 接口请求实现 vue 动态路由

后端接口返回路由配置：获取用户的权限信息及路由信息。动态加载组件：使用异步组件方式加载指定路径的组件。动态添加路由：根据权限信息动态添加路由。路由守卫：使用或添加路由。这样可以确保应用根据用户的权限动态加载相应的路由，增强安全性与灵活性。

2024-09-12 19:35:11 1533 1

原创前端单独实现 vue 动态路由

在用户登录成功后从服务器获取用户的权限信息，在 vuex 的异步处理函数中过滤掉角色权限不存在的路由，使用concat()合并公共路由，最后使用动态添加可访问的路由。这样可以确保应用根据用户的权限动态加载相应的路由，增强安全性与灵活性。

2024-09-12 19:34:30 1200

原创 Element-UI 组件实现面包屑导航栏

通过监听路由变化动态生成面包屑项，并在组件创建时初始化面包屑。面包屑项的标题和路径通过路由的meta属性获取，并根据当前路由路径决定是否设置跳转路径。通过这种方式，组件能够根据路由变化实时更新面包屑导航栏，提供清晰的导航指引。

2024-09-11 21:09:59 987

原创 Elemnt-UI + 递归组件实现后台管理系统左侧菜单

Element-UI 结合递归组件的方式，用于构建后台管理系统的左侧菜单，主要是通过以下步骤实现的：配置路由: 定义一系列路由对象构成的数组 routes递归组件: 利用 Vue 中的递归组件技术，创建一个菜单组件，该组件根据传入的路由配置（通常是 routes 数组）自动生成菜单项。递归的逻辑在于：组件内根据当前路由的 children 属性判断是否有子菜单，如果有，则继续渲染子菜单组件，直至没有更多子节点，以此实现无限级菜单的展现

2024-09-11 21:07:34 1764

原创第三方插件 mitt 实现跨组件通信

mitt是一个轻量级的事件发射器/事件总线，它只有 200 bytes 大小，不依赖于任何框架，可以方便地集成到 Vue 应用中。mitt提供了一个简单的 API 来发布事件和订阅事件，非常适合用来替代 Vue 2 中的EventBus模式。创建全局事件总线：在应用入口文件中创建一个 mitt 实例，并将其挂载到全局属性上。注册事件监听器：在接收数据的组件中注册事件监听器。触发事件并传递参数：在发送数据的组件中触发事件，并传递参数。事件处理：监听器接收到事件并处理参数。

2024-09-10 23:27:22 668

原创组件通信——provide 和 inject 实现爷孙组件通信

provide和inject是 Vue.js 提供的一种在组件之间共享数据的机制，它允许在组件树中的任何地方注入依赖项。这对于跨越多个层级的组件间通信特别有用，因此无需手动将prop数据逐层传递下去。provide在一个组件中使用provide方法来定义要提供的数据或方法。provide方法返回一个对象，该对象包含了要提供的数据或方法。inject在另一个组件中使用inject方法来注入这些数据或方法。inject方法接收一个数组或对象，指明要注入的数据或方法名称。provide和inject。

2024-09-10 23:27:03 1035 1

原创组件通信——Event Bus实现兄弟组件通信

Event Bus 是 Vue 中一种常用的组件间通信模式，它利用全局的 Vue 实例作为事件中心，允许组件之间通过触发和监听事件来进行通信。这种模式简单易用，适用于简单的跨组件通信场景。然而，在更复杂的项目中，可能需要考虑使用 Vuex 进行状态管理，以更好地组织和管理全局状态。

2024-09-09 21:12:30 964

原创组件通信——$attrs/$listeners实现爷孙组件通信

attrs和$listeners是 Vue.js 提供的一种机制，用于处理未声明的属性和事件的传递。它们在特定场景下非常有用，特别是在需要灵活传递属性和事件的情况下。然而，它们也有一定的局限性，如类型安全问题、调试困难等。因此，在实际开发中，应该根据具体情况权衡是否使用$attrs和$listeners，并在必要时使用它们来增强组件的灵活性和扩展性。

2024-09-09 21:11:40 956

原创 vue.config.js 配置

vue.config.js 文件是 Vue CLI 项目中的全局配置文件，它允许你以 JavaScript 的形式来配置构建选项，而不是通过命令行参数或者 .vue-clirc 的 JSON 格式。

2024-08-08 22:20:54 2302

原创 vue.config.js 配置configureWebpack 和 chainWebpack 以及一些常用配置

configureWebpack 允许你在 Vue CLI 项目中直接修改 Webpack 的配置。它可以通过一个对象或一个函数来实现。如果你使用的是一个函数，那么它会接收默认的 Webpack 配置作为参数，并且你应该返回一个修改过的配置对象。是 Vue CLI 提供的一种更强大的方式来修改 Webpack 的配置。与不同，使用 Webpack Chain API，它允许你以一种声明式的方式来修改 Webpack 配置。

2024-08-08 22:11:57 1976

原创 vue.config.js 配置 devserve 配置

在 Vue CLI 项目中，devServer 配置用于设置开发服务器的行为。这包括了开发服务器的端口、主机名、是否开启 HTTPS、自动打开浏览器等设置，以及配置代理规则来解决跨域问题。

2024-08-07 23:48:41 1594

原创 vue.config.js 配置多入口文件

在 Vue CLI 项目中配置多入口文件主要是为了支持多页面应用的需求。通常情况下，一个 Vue CLI 项目默认只有一个入口文件，所有的功能和路由都基于这个入口文件展开。但是，对于一些大型应用或者需要独立部署的多个子应用来说，可能需要将不同的功能模块拆分成多个独立的 HTML 页面，每个页面都有自己的入口文件。

2024-08-07 22:02:39 749

原创使用 webpack-obfuscator 进行代码混淆及报错解决方案

Error: The number of constructor arguments in the derived class t must be >= than the number of constructor arguments of its base class. TypeError: Cannot read property 'tap' of undefined TypeError: Cannot read property 'sourceAndMap' of undefined

2024-08-05 00:34:55 2073

原创数据状态持久化插件 vuex-persistedstate 的使用

解决页面刷新后 vuex 数据丢失的几种方法, 以及数据状态持久化插件 vuex-persistedstate 的使用与介绍

2024-08-04 14:17:55 530

原创 node版本管理插件nvm使用及报错解决方案

nvm使用以及下载node报错: Error retrieving "http://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt": HTTP Status 404nvm 下载 node, npm下载失败解决方法

2024-08-02 22:54:44 700

原创 vue使用自定义指令实现页面按钮权限控制

vue使用自定义指令实现页面按钮权限控制: 用户登录成功后, 在 router.beforeEach() 发起请求获取用户所拥有的权限,并将权限存储到 store 中,初始化 hasBtnPermi 对象, 并导入到入口文件 mian.js,在钩子函数 componentUpdated 判断是否有该按钮权限, 没有就用 removeChild() 方法移除按钮元素

2024-08-01 22:42:46 700

原创 axios使用cancel取消请求

使用 axios 取消了一个请求，那么再次发送同样的请求也会取消请求。这是因为 axios 同样的请求已经被 cancel ，因此无法再次发送。如果需要再次发送同样的请求，需要重新创建一个新的 cancelToken ，否则会一直提示被取消。

2024-07-31 23:01:21 427

原创 element-ui table组件时,勾选第一页某条数据,翻页后再跳转第一页,回显勾选,实现跨页联动

el-table 标签里面设置 :row-key=“getRowKeys” getRowKeys 函数返回 row 里面的唯一标识字段。el-table-column 标签里面设置 :reserve-selection=“true”

2024-06-30 12:04:30 233

原创解决 Element-ui中对话框（Dialog）中含子组件时，使用 refs 调用该子组件为 undefined 的问题

解决报错 TypeError: Cannot read property 'drawLinechart' of undefined

2024-06-23 19:33:11 391

原创 JS添加、删除@keyframes

JS进行动态生成@keyframes规则

2024-06-21 19:52:02 235

原创 ElementUI Form表单里使用 v-for循环创建表单元素校验

Form表单里的使用 v-for循环创建的表单元素校验

2024-06-20 20:43:52 961

原创 element-ui的table组件中，type属性为selection的列不能v-if控制显示

element-ui的table组件中，type属性为selection的列不能v-if控制显示

2024-06-19 21:00:16 337

原创 vue.config.js配置打包删除console.log日志

【代码】vue.config.js配置打包删除console.log日志。

2024-06-18 21:15:16 325

原创 JS函数节流和防抖

函数节流和函数防抖的核心就是限制某一个方法被频繁的触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，尤其是在事件回调中Ajax与后台进行交互的时候可以大大减轻服务器的压力，而这也是函数节流以及防抖多数情况下的应用场景。

2024-06-15 21:19:03 685

原创获取URL信息以及传参

PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。(设置或获取 href 属性中在井号“#”后面的分段, history路由模式下。(设置或获取 href 属性中跟在问号后面的部分, hash路由模式下。(设置或获取与 URL 的路径部分（就是文件地址）)(设置或获取与 URL 关联的端口号码)(设置或获取整个 URL 为字符串)(设置或获取 URL 的协议部分)(设置或获取 URL 的主机部分)8、js获取url中的参数值。

2024-06-14 21:28:21 235

a123456234的博客