My Blog

「黎明到来之前都是黑暗的」

弹窗方式的探索与优化

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

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

vue3项目0到1的探索之路

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

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

h5页面加载更多的实践

上拉加载更多是用UI库,还是自己封装?

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

vue 的 ui 更新

vue ui 更新的时机

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

web 国际化语言配置

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

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

element-ui 上传文件

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

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

关于 Vue 响应式原理的思考

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

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

Parameter Normalization

How to normalize parameters

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

幻影依赖

what are phantom dependencies?

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

debounce and throttle

对防抖和节流的简单理解

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