自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(178)
  • 收藏
  • 关注

原创 uni-app 界面TabBar中间大图标设置的两种方法

最近写基于uni-app写app项目的时候,底部导航栏 中间有一个固定的大图标,并且没有激活状态。这里记录下实现方案。// 监听底部tabbar 中间按钮“党组织”,跳转对应的页面});})该方法跳转后是进入二级页面,底部导航栏会消失,顶部会有返回按钮。适应于新增类型的页面。

2024-11-21 13:38:46 719

原创 小程序与 H5 的交互

最近又在写小程序,不过是基于原生写的;里面有很多内容是嵌入的H5端的页面。

2024-11-12 21:37:17 214

原创 HbuilderX 连接 Genymotion 模拟器

最近在琢磨uni-app开发 app 应用,并且想要基于模拟器调试;但模拟器安装好以后,Hbuilder 始终识别不了(识别成功了也运行不了代码);这款模拟器用于开发调试是比较流畅的。当然,夜神、雷电、mumu 等也非常不错。

2024-10-24 17:47:24 253

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

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

2024-03-07 18:00:41 2821

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

在可视化大屏项目中,屏幕适配是绕不过去的一个问题(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插件

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

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

原创 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-19 11:42:50 216

原创 免费图床平台

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

2023-05-10 16:20:19 335

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

ElementUI 组件默认属性

2023-02-15 11:52:40 2646

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

eslint 基础配置

2023-01-04 17:14:05 586

原创 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"&gt

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关注的人

提示
确定要删除当前文章?
取消 删除