- 博客(178)
- 收藏
- 关注
RSS订阅原创 uni-app 界面TabBar中间大图标设置的两种方法
最近写基于uni-app写app项目的时候，底部导航栏 中间有一个固定的大图标，并且没有激活状态。这里记录下实现方案。// 监听底部tabbar 中间按钮“党组织”，跳转对应的页面});})该方法跳转后是进入二级页面，底部导航栏会消失，顶部会有返回按钮。适应于新增类型的页面。
2024-11-21 13:38:46
719
原创 HbuilderX 连接 Genymotion 模拟器
最近在琢磨uni-app开发 app 应用，并且想要基于模拟器调试；但模拟器安装好以后，Hbuilder 始终识别不了（识别成功了也运行不了代码）；这款模拟器用于开发调试是比较流畅的。当然，夜神、雷电、mumu 等也非常不错。
2024-10-24 17:47:24
253
原创 可视化大屏实现屏幕自适应和自动全屏的实现
在可视化大屏项目中，屏幕适配是绕不过去的一个问题（ps：如果知道大屏展示的屏幕是固定的，当我没说）。这里简单介绍通过css的transform属性 里面的 scal()实现常规屏幕适配。
2024-03-04 17:33:19
3364
原创 通过 xlsx 解析上传excel的数据
在前端开发中，特别是在后台管理系统中，导入数据（上传excel）到后端是是否常见的功能；而一般的实现方式都是通过接口将excel上传到后端，再有后端进行数据解析并做后续操作。今天，来记录一下前端通过xlsx直接解析得到数据。
2023-12-22 09:54:36
901
原创 基于vue-cli快速发布vue npm 包
ps： 想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。默认打包后是将css抽离出来成为一个单独的文件；所以在使用的时候就需要单独将css引入，相对麻烦。时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。该步骤时组件封装的重点，即利用vue的公开方法： install。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！采用的是淘宝镜像源或者其它，需要改成。 当然，如果只有一个组件，直接放到。
2023-12-20 18:13:27
1359
原创 vue + docxtemplater 导出 word 文档
ps： 前端还可以导出 pdf，但是其分页问题需要话精力去计算才可能实现，并且都不是很完善。导出word其实就是解析我们提供的模板，然后将对应字段填入，最新进行导出即可。踩坑：图片这里我一直报错‘%imgUrl’，最后发现必须要换行写，而其他数组可以在一行写。这种功能其实之前都是后端实现的，但最近有个项目没得后端。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！注意：导出操作可能涉及异步操作，请多使用。前几章都是基础，调用才是重点。语法用 { } 接口。{#list} 开头。
2023-11-23 18:35:47
2752
1
原创 uni-app小程序使用DCloud（插件市场）流程
这种大型组件库都有官方文档可参考，但一些团队或个人发布的小型插件没有文档，只有下载、导入按钮。是uni-app官方插件市场，里面有官方、团队、个人发布的众多插件，包括。在插件右侧点击下载即可，但注意：最好选择支持uni_modules的插件。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！为示例记录怎么引入插件并使用。
2023-10-18 10:35:08
3486
1
原创 vs code koroFileHeader插件相关配置
文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！插件作用：在文件顶部添加头部注释。VS Code 中搜索并安装插件。我一般只配置文件头部注释。
2023-07-03 17:19:43
1899
原创 Nuxt框架基础配置
预处理器安装后，Nuxt.js 会自动识别被导入文件的扩展名，之后，webpack 会使用相应的预处理器进行处理。前提是，你安装了对应预处理器。时，你需要在 plugins/ 目录下创建相应的插件文件，并在 nuxt.config.js 中的 plugins 配置项中配置插件的路径。该文件是Nuxt框架的主要配置文件，其大多数配置都可以在这里进行配置。：某一些模块的配置可以写在modules配置外，配置详情请参考模块的官方文档。这里除了配置一些公用的js外，每次你需要使用。
2023-07-03 11:29:26
1849
原创 vue + el-upload 实现图片尺寸缩小
而图片就会放到里面去导出，而图片尺寸太大，显示会有问题；例如简历个人信息里面的身份证、学历、头像等照片（这种问题其实我觉得应该由后端处理，但既然知道了，就研究研究）。时，将图片临时处理缩小后返回即可，这种操作不能影响到前端大图展示。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！因为在前端上传到服务器后，有个功能会导出。有个问题需要先确定：缩放实现在上传前还是上传后，区别是什么？二次封装代码不尽相同，故在此只展现压缩相关核心代码。都是比较场景的需求。组件中一般都有大图预览功能，即。
2023-06-29 16:50:55
2919
原创 unocss 基础用法
unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。当然，原子样式也有很多选择，最著名的就是Tailwind。但由于Tailwind 会生成大量样式定义，会导致全量的 CSS 文件往往体积会多至数 MB，从而有性能上有一些不足。扩展：什么是原子化原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能。
2023-06-12 11:47:33
27953
10
原创 vue3 项目实践总结
3. 如果想要通过 proxy， ctx 访问当前组件的变量，需要在onBeforeMount 和 mounted生命周期中，即在组件挂载之后才可访问，否则访问不了；1. 使用 ctx ，经过测试后，打包到dist以后，ctx下面的值是拿不到的，即只能在开发环境使用。的使用频率是很高的，每个组件（页面）都去这么引入/调用，会显得很麻烦。个人理解：只能在同步代码中使用，不能再异步代码中使用，所以，一般先在。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！
2023-05-29 17:09:04
1981
原创 vue3基础常用语法
vue2 是option API;vue3是composition API。所以在语法上有很大不同，以下为上手vue3的常用语法。
2023-05-29 17:00:40
2400
原创 uni-app自定义v-model失效问题
但在实际开发中，我们可能更多的基于这一个逻辑去实现自定义的model。中定义model的时候用value和input，不能自定义更改。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！小程序中这样自定义是不会生效的。
2023-05-19 11:58:08
2793
原创 免费图床平台
图床就是一个在网络平台上存储图片的地方，最终目的是为了节省本地服务器空间，加快图片打开速度。这个为对于用低配置服务器做网站的小伙伴们节省不少空间，同时也提升不少网站流畅度。图床工具最重要的就是稳定和快捷。
2023-05-10 16:20:19
335
原创 js之运算符详解
前言，前三个为js已经发布较久的运算符（做一个全面、详情的总结）；而后三个为js的新特性（或为实验中的特性）1. && （逻辑与 => 二元逻辑运算符）两边条件都为true时，结果才为true；如果有一个为false，结果就为false；当第一个条件为false时，就不再判断后面的条件注意：当数值参与逻辑与运算时，结果为true，那么返回的会是第二个为真的值；如果结果为false，返回的会是第一个为假的值。2. || （逻辑或 => 二元逻辑运算符）只.
2022-05-05 14:39:21
473
原创 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
51269
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
2803
原创 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
755
原创 git修改当前项目仓库地址的三种方法
一、前言最近公司将gitlab整体迁移了，换了新的地址，虽然在迁移的时候将相关分支信息、代码拷过去了；但是我们开发人员在迁移过程中也会有新的代码产出；或者由于项目原因，没有及时更新地址，造成大量新的代码产出！怎么样将自己新产出的代码提交的新库呢？方法：更新仓库地址二、怎么更改已有仓库地址注意：以下操作均在 右键 => Git Bash Here 窗口中执行方法1：删除本地仓库当前关联的无效远程地址，再为本地仓库添加新的远程仓库地址git remote -v
2022-03-18 09:44:19
41696
原创 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
2727
3
原创 vue+element table自定义合并单元格与自定义合计栏
一、前言在最近的实际项目开发中，有个统计报表需要对单元格进行合并，如下图：实现功能：合并分公司相同的公司（ 没有分公司的也合并到一起，但是这些没有分公司的数据可能并不是连续的，需要前端自己排序 ）合并ETC客服中心相同的数据（不至于出现没有客服中心的数据，但在没有分公司的情况下，相同的客服中心可能不是连续的，也需要自己排序）自定义累计栏，将前三列合并，自定义完成率的计算公式显示累计栏后，table横向滚动条会出现在累计栏上方（element示例也是这样的），需要修改样式；如下图二、功能
2022-03-11 16:24:48
2181
原创 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
691
原创 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
1158
原创 基于vue实现假分页
一、 前言分页对于前端开发而言，是一个经常遇见也比较简单的功能。常见的处理方式是结合后端接口处理即可。但偶尔有时候后端接口不太方便提供该功能时，我们可以自己通过前端实现一个假的分页效果！二、实现代码其主要实现和传统的分页（如element提供的分页组件）区别在于对 current-change（页码）改变时的处理传统分页：在current-change回调时间中，拿到最新的页码，重新请求接口即可自己实现假分页：在current-change回调时间中，拿到最新的页码，去从所以的列表数据中截取出
2022-02-10 14:44:50
2290
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
5068
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
3315
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">
2022-02-10 10:32:33
4586
原创 搭建 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
8934
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
14428
原创 关闭整个项目console.log的方法
一、前言在实际项目开发中，特别是在前后端联调过程中，我们往往会添加很多 console.log 日志来帮助我们开发。大多时候，我们在开发完成之后便将对应的 console.log 删除，但是，有时候我们忘记或者需要在上线后也看一段时间的日志（比如有一些逻辑测试环境无法测试，需要在正式环境进行微调）。这种时候，我们就可以添加一个全局开启/关闭日志的方法，省去我们挨个添加删除 console.log 的麻烦即重写一下 console.log 方法const isDebug = true; // 控制是
2022-01-20 10:07:21
5073
3
原创 页面无法自动播放音频的解决方案
问题描述：最近在做一个客服电话平台（电话呼出呼入），因为里面使用了webRTC实现了软电话功能，所以现在电话呼入之后，页面弹出接听弹窗并且播放来电铃声，提醒用户接听。所以就使用了audio标签的play() 做自动播放（很久以前这么做过），但是没想到报错如下：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo
2022-01-10 11:26:39
3903
原创 如何判断WebSocket是否连接成功
一、前言：该文章基于原生WebSocket而编写的基础文章，大佬请绕过！！！二、判断是否连接成功判断依据：Socket.readyState （即状态为1就代表可以连接成功）值状态0连接尚未建立1连接已建立，可以进行通信2连接正在进行关闭3连接已经关闭或者连接不能打开在浏览器的控制台输入new WebSocket(地址)连接成功连接不成功在我们正式写 websocket 前，在浏览器里面快速的验证一下是否可以连接成功，还是
2021-11-23 17:06:59
12873
原创 vscode保存代码时自动ESLint格式化（支持vue）
一、问题描述在开发项目的时候，往往我们会配置ESLint的代码规范。而我们在实际开发过程中，每次出现代码格式问题都去手动修改是非常麻烦的（比如双引号改成单引号；缩进问题；句尾分号、逗号等），而通过配置vscode在保存时去自动修改这些简单的代码规格是非常必要也非常方便的！二、配置方案2.1 安装eslint插件2.2 修改用户配置ctrl + shift + p => 首选项：打开工作区设置在打开的配置文件中添加以下内容：{ "eslint.autoFixOnSave": tr
2021-10-25 09:23:38
24261
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人