孟余的博客 | My Blog

弹窗方式的探索与优化

如何优雅方便的实现弹窗功能

一、前言弹窗都不陌生了，在一些面试中，问到 vue 的父子间通信，常常是举「弹窗」这个例子。在我以往的开发中，最初是通过属性绑定，即:的方式来实现弹窗的显示与隐藏，核心点就是需要声明一个变量，如 isShow，然后传给弹窗组件 —— :show="isShow"。但当弹窗数量变多与业务的复杂化，我并不喜欢声明一堆变量，那我又换了另一种方式。通过调用组件的方法来实现，即一般情况...

Posted by My on September 30, 2024

vue3项目0到1的探索之路

一个项目包括语言、框架、构建工具、路由、状态管理、UI组件...

一、前言做开发这么久了，动手搭过项目，查过资料，但是一直以来都没有很好的将整个流程记录下来，所以这次打算把自己在做 vue3 项目的过程记录下来，希望能给后面自己再搭项目的时候提供一些参考，而不是再去翻别人的博客了。二、正文 1. 项目准备首先，我们需要准备好项目的基本环境，包括：「项目名称」、「项目描述」、「项目技术栈」、「预处理器」、「UI 组件库」等。不是专业的架构师，...

Posted by My on August 10, 2024

h5页面加载更多的实践

上拉加载更多是用UI库，还是自己封装？

前言在 h5 页面中，列表页是需要有分页效果的，最常见的就是使用上拉加载功能，那就近正好遇到了，那基于这个需求，就来分析一下如何实现这个功能。那目前，整个页面含有几个组件，细的就不说，主要是整个页面框架和「上拉加载」组件。基本的内容准备 UI 效果是这样的：基于此，要实现上拉加载，得先有这个页面的容器和数据的请求接口，下面就针对这些进行分析。页面框架页面框架是基于 ...

Posted by My on April 10, 2024

vue 的 ui 更新

vue ui 更新的时机

前言最近写代码的时候发现一个小问题，就是点击提交按钮时，loading 效果的变化。我们一般都会在表单提交、或者列表查询时给按钮添加一个 loading 效果，当用户点击提交按钮时，按钮会变成 loading 状态，当提交成功或者失败时，loading 效果会消失。但是，我发现有时提交表单时，loading 效果并出现，所以我研究了一下。问题 1 2 3 4 5 6 7 8 9...

Posted by My on August 24, 2023

web 国际化语言配置

vue开发中国际化的一些方法

一、国际化其实，我们平常说的「国际化」配置，也就是语言配置而已，不包括地区的宗教信仰、生活习惯等等。而语言配置，一般都是结合文件，使用变量替换的方式实现的，我相信很多人也都做过「国际化」，都有一定的经验。二、切换方案目前，我所了解到的方案有以下三种：本地缓存：点击「切换」按钮后，将当前的语言，如 en 缓存到本地，下次打开页面时，直接读取缓存的...

Posted by My on August 19, 2023

element-ui 上传文件

上传文件前的限制为什么会删除列表中的文件？

问题描述之前使用 element-ui 上传文件时，也仅涉及到上传「单个」文件，也经常在 before-upload 钩子中限制文件类型和大小，没出现什么问题。但是这次需求需要上传「多个」文件，并且限制文件类型和大小，如果按照之前的做法，校验不通过时，返回 false，那已经上传的文件就会被删除。对了，使用的是文件列表展示，结构如下： 1 2 3 4 5 6 7 8 9 10 11 1...

Posted by My on August 10, 2023

关于 Vue 响应式原理的思考

什么是响应式？谁和谁之间的关系？

前言响应式最直观的解释就是：数据变化时，视图会自动更新，也就是「数据驱动视图」。换一句话说，响应式里的关系是「数据」和「视图」之间的关系。视图什么是视图？应该是用户看到的页面，也确实如此。但是，在计算机里，并没有所谓的「页面」。在「web」中，我们看到视图，就是 dom 元素，不仅如此，页面上的数字，文字也是视图的一部分。在 vue 中，是使用虚拟 dom 来映射成 do...

Posted by My on July 21, 2023

Parameter Normalization

How to normalize parameters

参数归一化（Parameter Normalization）是一种在处理数据时常用的技术，旨在将不同范围或不同单位的数据转换为一个统一的标准，使其在分析和建模时更加有效和一致。那在软件开发中如何实现参数归一化呢？比如说有一个函数，功能很简单，把传入的一个日期进行格式化，返回一个字符串。 1 2 3 4 5 6 7 /** * @description 格式化日期 * @param ...

Posted by My on July 10, 2023

幻影依赖

what are phantom dependencies?

慢慢地，放弃了使用 npm 作为包管理工具，转而使用 pnpm 作为包管理工具。其中一个原因就是 npm 存在幻影依赖问题。什么是幻影依赖？幻影依赖是指，在项目中，某个依赖包的版本号被锁定，但实际上该依赖包的依赖版本号并没有被锁定，导致项目中存在多个版本的依赖包。通俗的讲，当你只安装了依赖 A ，但实际上会安装很多依赖（查看 node_modules 目录）。因为里面存在...

Posted by My on June 1, 2023

debounce and throttle

对防抖和节流的简单理解

「防抖」和「节流」或多或少在项目中都会使用，技术并不是很复杂，主要是「设计思路」和对函数的理解与运用。防抖「防抖」是指在一个函数被多次调用时，只有在停止调用一段时间后才会执行，也就是说，函数在被调用时，会将之前的调用记录下来，如果在这段时间内又被调用，则会将之前的调用清除，只执行最后一次调用。举个例子：就像是电梯门，如果电梯门即将关闭，这时候你按下了开门按钮，电梯就会重置关门时间...

Posted by My on August 1, 2022

My Blog