前言在许多中后台管理系统中，表格占据着半壁江山，如果使用element plus组件库，那么少不了要用到table组件，可是table组件的功能过于基础，因此，我在table组件的实现基础之上进一步封装，从而实现功能更强大的table组件。在实现table组件的功能之前，我们首先需要先来看看用法，由于使用示例比较多，可能将会有几篇文章主要介绍所有示例用法，介绍完示例之后将会有专门的文章基于使用方式
这次要实现的是这种效果，能够在页面上推拽和点击的，拖拽的话，就跟随鼠标移动，点击的话，就触发新的行为，当然也有指定某些区域不能拖拽，接下来就一起来看看有什么难点吧~需要监听的鼠标事件既然是web页面，那肯定要监听的就算鼠标事件mousedown(MDN: developer.mozilla.org/zh-CN/docs/…)mousemove(MDN: developer.mozilla.org/
结合lighthouse查看各项数据，不断进行性能优化，可以从代码、项目打包、项目部署这三个层面来优化代码层面1、v-if和v-show区分使用v-if（惰性的）用的条件判断，是惰性的，false的话初始不会渲染，适用于运行很少改变条件v-show不管是什么初始都会渲染，用的display: none来控制隐藏，适用于频繁切换条件的2、computed、watch和methods区分使用compu
两种情况引用实现1、在模版中使用首先要注意这里使用的是img元素，不是el-image等图片UI组件。此时使用相对路径或绝对路径都可以。<template> <img style="width: 100px; height: 100px" src="@/assets/01.png" /> </template>在Vite脚手架搭建的项目中，下面几种情况都
前言大家好，我是程序员蒿里行。浅浅记录一下面试中的高频问题，请你谈一下Vue响应式原理。 必备前置知识，Vue2官方文档中深入响应式原理及Vue3官方文档中深入响应式系统。什么是响应式响应式本质是当数据变化的时候，会自动执行一些相关函数。const apple = { price: 2, amount: 3 } const totalPrice = () => apple.price
一、实现思路动态设置高度和宽度，高度很容易，就是el-tree-v2组件本身的高度，困难点是如何找到应该设置的宽度，我的思路是直接强行取到一级节点及其展开节点中最宽的一个元素，取这个元素的宽度，来动态设置整个容器的宽度,但是会遇到竖向滚动条的位置始终在最右边，这样的话当我们的父容器宽度小于总宽度的话，虽然可以横向滚动条展示没问题，但是纵向滚动条只有当横向滚动条拉到最右边的时候才会显示，于是，我动态
1、事件参与角色介绍角色： 1、记录数组multipleSelection，负责记录目前已勾选的记录 2、表格变量currentDeviceList，显示显示当前表格的内容2、事件关联由于表格是带筛选功能的，且记录带有记忆性，所以记录数组multipleSelection里，可能携带了表格变量 currentDeviceList里没有的元素，这就导致在进行全部勾选/取消时，不能对记录数组mult
前言对于源码的阅读应该是建立在实际需要的过程中，这样才是科学的学习方式，不然一味地全盘阅读，先不说能不能读得完，这过程也是非常痛苦和枯燥。最近在应用虚拟列表的过程中发现vue3的更新方式给我造成了困惑，遂重温下vue2的diff算法，顺便学习下vue3的diff算法vue2的diff算法说一下主要流程① 判断是否是同一个node节点对比key对比tag对比comment对比是否同一个Input、对
前端路由前端路由是后来发展到SPA（单页应用）时才出现的概念。 SPA 就是一个WEB项目只有一个 HTML 页面，一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转。前端路由在SPA项目中是必不可少的，页面的跳转、刷新都与路由有关，通过不同的url显示相应的页面。优点：前后端的彻底分离，不刷新页面，用户体验较好，页面持久性较好。后端路由当在地址栏切换不同的url时，都会向服务
前言在开发 Web 应用时，我们经常会遇到需要重复调用接口的场景。例如，当用户频繁刷新页面或进行某个操作时，我们可能需要多次请求相同的数据。这不仅会增加服务器负担，还会导致用户体验下降。为此，我们可以使用缓存机制来优化这一问题。本文将教你一步一步实现一个功能较完善的Vue缓存Hook（钩子函数），它可以帮助我们减少接口的重复调用，提高应用性能。介绍这个Hook是一个基于Vue响应式系统的缓存工具，
1、前言在 Vuejs 中，内置了 KeepAlive组件用于缓存组件，可以避免组件的销毁/重建，提高性能。假设页面有一组 Tab组件，如下代码所示：<template> <Tab v-if="currentTab === 1">...</Tab> <Tab v-if="currentTab === 2">...</Tab>
开发后台管理系统，在业务上接触的最多就是表单（输入）和表格（输出）了。对于使用 Vue 框架进行开发的同学来说，组件库 Element 是肯定会接触的，而其中的 el-table 和 el-form 更是管理系统中的常客。然而，一旦项目的表格或表单多起来，每个不同的配置，以及多一个字段少一个字段，都要在 template 中重新写一大段组件代码，显得非常麻烦。或许你会考虑将这些代码封装起来，可是又
路由有两种模式：一种是 hash 模式、另一种是 history 模式，在使用 vue-cli 以及 vue-router 默认搭建的 Vue 项目，若不做特殊的配置，默认就是 hash 模式。1# 哈希模式vue-router 默认为 hash 模式，使用 URL 的 hash 值来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载。hash 路由模式是这样的：http://www.e
前端性能优化一直是大家非常关注的问题，在日常的开发中也是经常会被用到的点。所以今天我们就花一点时间来了解一下前端性能优化方案！一：页面渲染相关1：减少页面重绘和回流回流（reflow）：是指由于DOM结构或样式发生改变，浏览器需要重新计算元素的几何属性，然后重新布局页面的过程重绘（repaint）：是指当元素样式发生改变，但不影响布局时，浏览器只需要重新绘制受影响的部分，而不需要重新计算布局尽量减
1. 实现继承ES5 继承（寄生组合式继承）寄生组合式继承是对组合式继承（调用了2次父构造方法）的改进，使用父类的原型的副本来作为子类的原型，这样就只调用一次父构造函数，避免了创建不必要的属性。function Parent (name) { this.name = name; this.colors = ['red', 'blue', 'green']; } Parent.proto
前言一个网站的换肤效果算是一个比较常见的功能，尤其是在后台管理系统中，我们几乎都能看到他的身影，这里给大家提供一个实现思路。搭建项目vite+vue3搭建项目这里就不演示了，vite官网里面讲得很清楚。注：这里使用的css预处理器是sass，使用前要先安装他的依赖：npm i sass处理项目目录结构把src目录下的assets和components文件夹删除，新建src/theme/index.
下图是我实现的效果，分为三步：开始下拉时，屏幕顶部会出现加载动画；加载过程中，屏幕顶部高度保持不变；加载完成后，加载动画隐藏。首先讲解下拉的原理、根据原理写出初始代码；然后我会说明代码存在的缺陷、解决缺陷并做些额外优化；最后我会给出完整代码，并做一个总结。如图所示，蓝色框代表视口，绿色框代表容器，橙色框代表加载动画。最开始时，加载动画处于视口外；开始下拉之后，容器向下移动，加载动画从上方进入视口；
前言Redis作为一种优秀的基于key/value的缓存，有非常不错的性能和稳定性，无论是在工作中，还是面试中，都经常会出现。今天这篇文章就跟大家一起聊聊，我在实际工作中使用Redis的10种场景，希望对你会有所帮助。1. 统计访问次数对于很多官方网站的首页，经常会有一些统计首页访问次数的需求。访问次数只有一个字段，如果保存到数据库中，再最后做汇总显然有些麻烦。该业务场景可以使用Redis，定义一
序言本文主要内容分三部分，如果您只需要解决问题，请阅读第一、二部分即可。如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。1. 需求分析为了提高用户对页面链接分享的体验，需要对分享链接做一些处理。以 Telegram(国外某一通讯软件) 为例，当在 Telegram 上分享已做过处理的链接时，它会自动尝试获取链接的预览信息，包括标题、描述和图片。
前言打开 Vue3 的官方文档，它首先会告诉你，Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。文档为我们提供一系列两种风格的代码参考，供我们按照偏好进行选择。实际上，Vue3 组件可不止两种写法，而是多达十几种！然而，不管是什么写法，它们都是基于同一个底层系统实现的，概念之间也是彼此相通的，只是使用的接口不同。在实际开发中，我们也不会同时使用到那么多种写法，但是这并不意
优化前这里我挑选了一些项目里面比较大的图片，还有我之前保存的一些背景图，共计12张，上传到阿里云oss，然后写了一个demo去渲染图片，这里我们先看看加载时间。可以看到，一旦文件大小到了1M以上，加载基本都在1秒以上了，而且加载最慢的一张图片大小为2.4M；加载耗时5.27秒。然而在这个小程序中，有非常多的瀑布流图片展示，需要加载的图片也非常多，这对于这种图片展示类的小程序来说，简直是非常糟糕的体
前言验证码我们平时应该不少见到，其原理就是通过HTML5 Canvas API也就是我们说的画布，我们可以通过算法随机生成一系列字符、数字或图形，并将它们以扭曲、拉伸、旋转、添加噪点，以增加机器识别难度。对于更高级的验证码，可以使用SVG或者其他矢量图技术来创建复杂且难以解析的图形。目标效果代码实现总的来说主要分为以下五步：准备画布模版准备验证码字符准备生成随机数函数准备生成随机颜色函数绘制图片下
步骤1.引入两个依赖npm i html2canvas npm i jspdf点击 jsPDF 文档 查看关于jsPDF更多信息。2.在utils文件夹下新建html2pdf.ts文件import html2canvas from 'html2canvas'; import jsPDF from 'jspdf' export const htmlToPDF = async (htmlId: st
ref 和 reactive 是 Vue3 中实现响应式数据的核心 API。ref 用于包装基本数据类型，而 reactive 用于处理对象和数组。尽管 reactive 似乎更适合处理对象，但 Vue3 官方文档更推荐使用 ref。 我的想法，ref就是比reactive好用，官方也是这么说的，不服来踩！下面我们从源码的角度详细讨论这两个 API，以及 Vue3 为什么推荐使用ref而不是rea
核心使用CSS变量, 准备两套CSS颜色, 一套是在 light模式下的颜色,一套是在dark模式下的颜色dark模式下的 CSS 权重要比 light 模式下的权重高, 不然当我们给html添加自定义属性[data-theme='dark']的时候, dark模式权重比light低,会一直不起效果当我们点击 dark 模式的时候, 给 html 设置自定义属性[data-theme='dark'
LuckSheet和LuckyExcel在前端开发中预览Excel文件是常见的需求之一。本文将介绍如何使用Vue.js框架以及两个优秀的Excel库——LuckyExcel和Luckysheet，来实现Excel文件在线预览功能。LuckSheet是一款基于Web的在线表格组件，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源结合Vue3可以实现数据的动态展示和编辑，为用户提供良好
前言从vue3开始vue引入了宏，比如defineProps、defineEmits等。我们每天写vue代码时都会使用到这些宏，但是你有没有思考过vue中的宏到底是什么？为什么这些宏不需要手动从vue中import？为什么只能在setup顶层中使用这些宏？vue 文件如何渲染到浏览器上要回答上面的问题，我们先来了解一下从一个vue文件到渲染到浏览器这一过程经历了什么？我们的vue代码一般都是写在后
大文件上传的场景如果遇到需要上传电影、视频或者特别大的数据之类的需求，那么上传的文件是非常大的，这个时候我们不能说用一个请求就直接将所有的文件传输过去，因为这个大文件上传时间相比较来说是比较长的，存在很多的弊端，假如用户刷新了页面之类的情况，这时候上传又需要重头开始上传，这对用户以及服务器都是不妥的。首先想几个问题：怎么判断文件是否上传过了，再上传就重复了？ 有人会说 我通过判断文件名不可以吗？N
前言在 Vue.js 中，有一个特殊的方法 nextTick，它在 DOM 更新后执行一段代码，起到等待 DOM 绘制完成的作用。本文会详细介绍 nextTick 的原理和使用方法，并实现一个简易版的 nextTick，加深对它的理解。一. 什么是 nextTick简单的说，nextTick 方法是在 Vue.js 中常见的一种异步更新 DOM 的机制。它的原理是利用 JavaScript 的事件
本文将通过介绍什么是 Hook、如何在 Vue 使用 Hook，以及在实践场景中如何封装自己的 Vue Hook，带你走进 Hook 的世界，写出更优雅的代码。什么是 HookVue3 官方文档是这样定义组合式函数的。A "composable" is a function that leverages Vue's Composition API to encapsulate and reuse
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
