halo1416-CSDN博客

原创 vue3+ts+vite项目使用 unplugin-auto-import (自动导入)

该项目是基于vite创建的项目;

2024-03-07 18:00:41 1324

原创可视化大屏实现屏幕自适应和自动全屏的实现

在可视化大屏项目中，屏幕适配是绕不过去的一个问题（ps：如果知道大屏展示的屏幕是固定的，当我没说）。这里简单介绍通过css的transform属性里面的 scal()实现常规屏幕适配。

2024-03-04 17:33:19 1456

原创通过 xlsx 解析上传excel的数据

在前端开发中，特别是在后台管理系统中，导入数据（上传excel）到后端是是否常见的功能；而一般的实现方式都是通过接口将excel上传到后端，再有后端进行数据解析并做后续操作。今天，来记录一下前端通过xlsx直接解析得到数据。

2023-12-22 09:54:36 736

ps：想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。默认打包后是将css抽离出来成为一个单独的文件；所以在使用的时候就需要单独将css引入，相对麻烦。时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。该步骤时组件封装的重点，即利用vue的公开方法： install。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！采用的是淘宝镜像源或者其它，需要改成。当然，如果只有一个组件，直接放到。

2023-12-20 18:13:27 1266

原创 vue + docxtemplater 导出 word 文档

ps：前端还可以导出 pdf，但是其分页问题需要话精力去计算才可能实现，并且都不是很完善。导出word其实就是解析我们提供的模板，然后将对应字段填入，最新进行导出即可。踩坑：图片这里我一直报错‘%imgUrl’，最后发现必须要换行写，而其他数组可以在一行写。这种功能其实之前都是后端实现的，但最近有个项目没得后端。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！注意：导出操作可能涉及异步操作，请多使用。前几章都是基础，调用才是重点。语法用 { } 接口。{#list} 开头。

2023-11-23 18:35:47 1715

原创 uni-app小程序使用DCloud（插件市场）流程

这种大型组件库都有官方文档可参考，但一些团队或个人发布的小型插件没有文档，只有下载、导入按钮。是uni-app官方插件市场，里面有官方、团队、个人发布的众多插件，包括。在插件右侧点击下载即可，但注意：最好选择支持uni_modules的插件。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！为示例记录怎么引入插件并使用。

2023-10-18 10:35:08 2405 1

原创常用的 Vs Code插件

推荐下自己在使用的vs code插件。

2023-07-07 11:42:29 2484 2

原创 vs code koroFileHeader插件相关配置

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！插件作用：在文件顶部添加头部注释。VS Code 中搜索并安装插件。我一般只配置文件头部注释。

2023-07-03 17:19:43 1596

原创 Nuxt框架基础配置

预处理器安装后，Nuxt.js 会自动识别被导入文件的扩展名，之后，webpack 会使用相应的预处理器进行处理。前提是，你安装了对应预处理器。时，你需要在 plugins/ 目录下创建相应的插件文件，并在 nuxt.config.js 中的 plugins 配置项中配置插件的路径。该文件是Nuxt框架的主要配置文件，其大多数配置都可以在这里进行配置。：某一些模块的配置可以写在modules配置外，配置详情请参考模块的官方文档。这里除了配置一些公用的js外，每次你需要使用。

2023-07-03 11:29:26 1601

原创 vue + el-upload 实现图片尺寸缩小

而图片就会放到里面去导出，而图片尺寸太大，显示会有问题；例如简历个人信息里面的身份证、学历、头像等照片（这种问题其实我觉得应该由后端处理，但既然知道了，就研究研究）。时，将图片临时处理缩小后返回即可，这种操作不能影响到前端大图展示。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！因为在前端上传到服务器后，有个功能会导出。有个问题需要先确定：缩放实现在上传前还是上传后，区别是什么？二次封装代码不尽相同，故在此只展现压缩相关核心代码。都是比较场景的需求。组件中一般都有大图预览功能，即。

2023-06-29 16:50:55 2425

原创 unocss 基础用法

unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。当然，原子样式也有很多选择，最著名的就是Tailwind。但由于Tailwind 会生成大量样式定义，会导致全量的 CSS 文件往往体积会多至数 MB，从而有性能上有一些不足。扩展：什么是原子化原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能。

2023-06-12 11:47:33 17630 10

原创 vue3 项目实践总结

3. 如果想要通过 proxy， ctx 访问当前组件的变量，需要在onBeforeMount 和 mounted生命周期中，即在组件挂载之后才可访问，否则访问不了；1. 使用 ctx ，经过测试后，打包到dist以后，ctx下面的值是拿不到的，即只能在开发环境使用。的使用频率是很高的，每个组件（页面）都去这么引入/调用，会显得很麻烦。个人理解：只能在同步代码中使用，不能再异步代码中使用，所以，一般先在。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

2023-05-29 17:09:04 1695

原创 vue3基础常用语法

vue2 是option API;vue3是composition API。所以在语法上有很大不同，以下为上手vue3的常用语法。

2023-05-29 17:00:40 1861

原创 uni-app自定义v-model失效问题

但在实际开发中，我们可能更多的基于这一个逻辑去实现自定义的model。中定义model的时候用value和input，不能自定义更改。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！小程序中这样自定义是不会生效的。

2023-05-19 11:58:08 2139

原创计算多个时间范围是否有重叠

该方法用于多个时间段之间是否重置交叉。

2023-05-19 11:42:50 162

原创免费图床平台

图床就是一个在网络平台上存储图片的地方，最终目的是为了节省本地服务器空间，加快图片打开速度。这个为对于用低配置服务器做网站的小伙伴们节省不少空间，同时也提升不少网站流畅度。图床工具最重要的就是稳定和快捷。

2023-05-10 16:20:19 181

原创 ElementUI 全局设置组件的默认属性

ElementUI 组件默认属性

2023-02-15 11:52:40 2366

原创 vue 项目中 .eslintrc.js 配置示例

eslint 基础配置

2023-01-04 17:14:05 497

原创 js之运算符详解

前言，前三个为js已经发布较久的运算符（做一个全面、详情的总结）；而后三个为js的新特性（或为实验中的特性）1. && （逻辑与 => 二元逻辑运算符）两边条件都为true时，结果才为true；如果有一个为false，结果就为false；当第一个条件为false时，就不再判断后面的条件注意：当数值参与逻辑与运算时，结果为true，那么返回的会是第二个为真的值；如果结果为false，返回的会是第一个为假的值。2. || （逻辑或 => 二元逻辑运算符）只.

2022-05-05 14:39:21 432

原创 Day.js 常用方法

前言Day.js 是代替修改本地Date.prototype，Day.js对Date对象进行了封装，只需要调用Dayjs()即可。相对moment.js而已，day.js的体积更小，只有2KB左右；moment.min.js 有16.7KB。对应普通项目来说，对应时间的操作就只有那么几个（格式化、查询、计算），这些基于Day.js完全足够。并且Day.js的文档相对简单、清晰！该文章对比之前的moment.js的文章Day.js官方文档当前文章很多实例是以当前时间来处理的，当前时间

2022-04-21 10:49:06 48370 7

原创 vue3创建项目、基础知识

Vue3的基础概念一、创建vue3的项目（基于脚手架）// 前提：将vue-cli 升级到4.x 的版本vue create my-app-ts// 使用tsnpm install typescript ts-node -g生成时操作如下:二、vue3.0 部分写法改变后面补充createStore => useStorecreateRouter => useRoutervue所有api 的入口：setupvue3里面没有mapState原因：mapState 是

2022-04-02 14:17:25 2633

原创 linear-gradient 实现切角效果

一、前言linear-gradient() ：函数用于创建一个表示两种或多种颜色线性渐变的图片。即实现线性渐变！二、基础用法默认渐变方向是从上到下渐变，这种情况不需要申明渐变方向！/* 1. 从上到下，从红色开始，转为黄色，再到蓝色*/#grad { background-image: linear-gradient(red, yellow, blue);}/* 2. 从左到右，从红色开始，转为黄色 */#grad { background-image: linear-gra

2022-03-30 14:12:00 698

原创 git修改当前项目仓库地址的三种方法

一、前言最近公司将gitlab整体迁移了，换了新的地址，虽然在迁移的时候将相关分支信息、代码拷过去了；但是我们开发人员在迁移过程中也会有新的代码产出；或者由于项目原因，没有及时更新地址，造成大量新的代码产出！怎么样将自己新产出的代码提交的新库呢？方法：更新仓库地址二、怎么更改已有仓库地址注意：以下操作均在右键 => Git Bash Here 窗口中执行方法1：删除本地仓库当前关联的无效远程地址，再为本地仓库添加新的远程仓库地址git remote -v

2022-03-18 09:44:19 37827

原创 moment.js 计算当前一周、一月对应日期

一、计算当前一周对应日期/** * 根据一个日期计算出其所在的一周，反正对应一周的相应日期 * basisDate: 依据日期, 默认是当天 */ calcWeekDate(basisDate = moment().format('YYYY-MM-DD')) { let weekDate = []; let howWeek = moment(basisDate).day(); // 获取到依据日期为星期几；0为星期日、6为星期6 // 如果今天是周日，则单

2022-03-11 16:52:24 2610 3

原创 vue+element table自定义合并单元格与自定义合计栏

一、前言在最近的实际项目开发中，有个统计报表需要对单元格进行合并，如下图：实现功能：合并分公司相同的公司（没有分公司的也合并到一起，但是这些没有分公司的数据可能并不是连续的，需要前端自己排序）合并ETC客服中心相同的数据（不至于出现没有客服中心的数据，但在没有分公司的情况下，相同的客服中心可能不是连续的，也需要自己排序）自定义累计栏，将前三列合并，自定义完成率的计算公式显示累计栏后，table横向滚动条会出现在累计栏上方（element示例也是这样的），需要修改样式；如下图二、功能

2022-03-11 16:24:48 1903

原创 vue常用插件

Day.js ：一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。qs ：一个轻量的 url 参数转换的 JavaScript 库// 安装npm install qs// 使用import qs from 'qs'qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }qs.stringify({ user: "tom", age: .

2022-02-16 10:01:01 610

原创 vscode调试 node 源码

前言node 内置了很多核心模块，供开发者直接使用，但有时我们想知道其内部的实现原理，就可以通过vscode进行调试查看！调试步骤1. 新建launch.json文件2. 修改launch.json配置得到的配置文件如下：{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0",

2022-02-14 14:28:54 1047

原创基于vue实现假分页

一、前言分页对于前端开发而言，是一个经常遇见也比较简单的功能。常见的处理方式是结合后端接口处理即可。但偶尔有时候后端接口不太方便提供该功能时，我们可以自己通过前端实现一个假的分页效果！二、实现代码其主要实现和传统的分页（如element提供的分页组件）区别在于对 current-change（页码）改变时的处理传统分页：在current-change回调时间中，拿到最新的页码，重新请求接口即可自己实现假分页：在current-change回调时间中，拿到最新的页码，去从所以的列表数据中截取出

2022-02-10 14:44:50 2182 2

原创 js 实现拖动元素到任意位置

一、实现效果二、实现代码主要通过原生的 mousedown 和 mouseup 以及mouseleave 事件实现<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, m

2022-02-10 14:01:37 4625 2

原创通过js实现拖拽排序

一、实现效果二、实现效果实现原理：主要依靠原生的 dragstart 和 dragend 事件当然：也可以基于插件 vue.draggable 实现<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content=

2022-02-10 11:16:06 3101 4

原创 css实现波纹扩散效果

一、实现效果二、实现代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-casle=1.0,user-scalable=no" /> <title>圆点扩散</title> <style type="text/css"&gt

2022-02-10 10:32:33 3934

原创搭建 vite + vue3 项目

一、介绍该文章主要通过 vite + vue3 + vue-router4 + vuex4 + Element Plus + axios + mockjs 搭建项目。二、通过vite创建项目1. 通过vite创建 vue+ts 项目**注意：**经过我的测试，使用cnpm create vite时不能自定义项目名称；所以推荐使用 npm 或者 yarn// 创建项目 => vite-testyarn create vite// 进入 vite-testcd vite-test//

2022-01-27 15:07:43 8571 4

原创 npm更换包源以及 nvm的使用

一、前言在每一次的实际开发过程中，我们都会下载相关的依赖包，最官方的是 npm ，但是该服务器对于国内开发者来说，下载起来是比较慢的，所以我们需要换源。（有梯子或者信任官网的请忽略）二、cnpm : 国内对npm的镜像版本/** cnpm 官网地址: https://npm.taobao.org/* cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些*/ npm install -g cnpm --registry=https://registry.npm.taobao.org

2022-01-24 09:55:36 13517

原创关闭整个项目console.log的方法

一、前言在实际项目开发中，特别是在前后端联调过程中，我们往往会添加很多 console.log 日志来帮助我们开发。大多时候，我们在开发完成之后便将对应的 console.log 删除，但是，有时候我们忘记或者需要在上线后也看一段时间的日志（比如有一些逻辑测试环境无法测试，需要在正式环境进行微调）。这种时候，我们就可以添加一个全局开启/关闭日志的方法，省去我们挨个添加删除 console.log 的麻烦即重写一下 console.log 方法const isDebug = true; // 控制是

2022-01-20 10:07:21 4600 3

空空如也

空空如也