随笔分类 -  Web前端

1 2 下一页
Nuxt.js v4中使用quill富文本组件
摘要：第一步：安装 使用包管理器 npm 或 yarn来安装 VueQuill。 npm install @vueup/vue-quill@latest --save # 或者 yarn add @vueup/vue-quill@latest 第二步：完成配置 （1）打开nuxt.js的nuxt.conf 阅读全文
posted @ 2025-12-04 11:57 莫颀 阅读(150) 评论(0) 推荐(0)
H5移动端图片查看器
摘要：一、新建名为ImageViewer.vue的组件，代码如下： <!-- ImageViewer.vue --> <template> <div class="fullscreen-viewer" v-if="visible" @click="closeViewer"> <div class="vie 阅读全文
posted @ 2025-10-13 11:40 莫颀 阅读(27) 评论(0) 推荐(0)
前端将医学影像DCM转换为Base64 图像数据的方法
摘要：第一步 下载dicom-parser.js库 npm安装： npm install dicom-parser 第二步 封装dcm转换base64图像数据的方法 /** * dicomToBase64.js文件 */ import * as dicomParser from 'dicom-parser 阅读全文
posted @ 2025-06-09 15:42 莫颀 阅读(192) 评论(0) 推荐(0)
umijs中简单使用umi-request
摘要：在umi.js4中使用umi-request进行网络请求，查看官网后还是没明白，便自己摸索一遍，如下把简单使用的过程记录下来，以便共享给其他需要的小伙伴做参考，如有不对的地方，烦请指出。 第一步：安装umi-request npm install --save umi-request 第二步：简单封 阅读全文
posted @ 2024-12-09 10:37 莫颀 阅读(972) 评论(0) 推荐(0)
前端数据加密的简单使用
摘要：在前端使用JSEncrypt进行加密是一种常见的做法，它可以帮助保护数据在客户端到服务器的传输过程中的安全性。以下是使用 JSEncrypt 进行前端加密的基本步骤： 一、安装 npm install jsencrypt 二、封装加密和解密方法 新建jsencrypt.js文件，在文件内封装加密和解 阅读全文
posted @ 2024-10-28 10:28 莫颀 阅读(277) 评论(0) 推荐(0)
Vue前端开发 转 React 指南
摘要：Vue前端开发 转 React 指南JSX 先介绍 React 唯一的一个语法糖：JSX。 理解 JSX 语法并不困难，简单记住一句话，遇到 {} 符号内部解析为 JS 代码，遇到成对的 <> 符号内部解析为 HTML 代码。 当你写下这个 React 组件时： import React from 'react'; function 阅读全文
posted @ 2024-09-04 15:57 莫颀 阅读(437) 评论(0) 推荐(0)
解决 Electron 安装失败问题的实用指南
摘要：遇到安装失败问题？ 在国内或其他网络受限的环境中，安装 Electron 时可能会遇到各种错误。以下是一些解决这些问题的有效方法。 如果您在Electron-Egg安装过程中遇到安装npm包报错的问题，也可以尝试以下办法，然后重新进行npm i --force操作重新安装包 方法一：更改 npm 源 阅读全文
posted @ 2024-08-30 17:11 莫颀 阅读(3377) 评论(0) 推荐(1)
前端WebSocket的方法封装
摘要：一、封装方法 在项目根目录src下的utils中新增webSocketManager.js封装文件，代码内容如下： // webSocketManager.js /** WebSocketMessenger封装类 */ class WebSocketManager { constructor(url 阅读全文
posted @ 2024-07-18 18:01 莫颀 阅读(643) 评论(0) 推荐(0)
自定义localStorage监听事件
摘要：一、问题 在项目开发过程中，发现有很多时候进行localStorage.setItem()操作设置本地存储后，页面必须刷新才能够获取到存储数据，而有些时候本地缓存更新后，页面无法通过再次刷新以获取本地缓存，这就导致依赖本地缓存的数据无法进行更新。为了解决这个问题，就必须要用到自定义localStor 阅读全文
posted @ 2024-07-16 17:00 莫颀 阅读(180) 评论(0) 推荐(0)
前端录制屏幕getDisplayMedia方法的视频分片问题
摘要：一、问题 最近在使用getDisplayMedia方法录制屏幕时遇到问题，总是在录制结束后才能得到全部的视频，最后通过查找资料发现有一个视频分片的配置参数，就是MediaRecorder： start（） 方法中的timeslice参数。 timeslice 可选参数 要记录到每个 Blob 中的毫 阅读全文
posted @ 2024-07-11 15:52 莫颀 阅读(323) 评论(0) 推荐(0)
前端实现生成条形码并下载
摘要：一、生成条形码 下载JsBarcode.js库 在对应项目的终端中，输入如下代码，安装： npm install jsbarcode --save 在二维码生成的页面中引入： import JsBarcode from "jsbarcode"; 使用示例： <!-- 条形码生成的页面--> <tem 阅读全文
posted @ 2024-06-21 09:57 莫颀 阅读(435) 评论(0) 推荐(0)
基于vis.js实现网络拓扑图等关系图谱
摘要：vis.js是一个动态的、基于浏览器的可视化库。该库被设计为易于使用，可以处理大量动态数据，并支持对数据的操作和与数据的交互。该库由组件DataSet, Timeline, Network, Graph2d和Graph3d组成。 现在使用vis.js实现一个简单的网络类似网络拓扑的关系图谱，效果如下 阅读全文
posted @ 2024-05-20 14:20 莫颀 阅读(1467) 评论(0) 推荐(0)
Vue3中Mock数据的简单方案
摘要：Vue3中Mock数据的简单方案因为Vue3项目开发中需要用到Mock数据，所以这里记录一种快速Mock数据的方法。 一、安装 首先，你需要安装 axios 和 axios-mock-adapter。 npm install axios axios-mock-adapter --save 二、编写mock数据 为了保证项目的整洁， 阅读全文
posted @ 2024-04-30 15:28 莫颀 阅读(1632) 评论(0) 推荐(1)
Vue3自定义指令实现权限控制
摘要：Vue3自定义指令实现权限控制使用Pinia（Vue.js的轻量级状态管理库，是Vuex的替代品）来管理用户权限，并结合自定义指令控制元素的显隐 阅读全文
posted @ 2024-03-12 11:11 莫颀 阅读(1343) 评论(0) 推荐(2)
如何在Nuxt3.0中使用MongoDB数据库
摘要：一、介绍 Nuxt.js 是一个基于 Vue.js 的开源框架，用于构建服务端渲染 (Server-Side Rendering, SSR) 或静态生成 (Static Site Generation, SSG) 的单页应用 (Single-Page Applications, SPA)，可以用来作 阅读全文
posted @ 2023-09-23 19:35 莫颀 阅读(2105) 评论(2) 推荐(2)
Element-plus组件库的MessageBox 消息弹框组件自定义样式的坑
摘要：一、问题描述： 在使用Element-plus组件库的MessageBox 消息弹框组件时，需要更改该组件的按钮样式，于是根据官网文档： 找到cancel-button-class、confirm-button-class两个属性，并在js代码中进行了添加,如下案例图： 然后，我在使用该组件的页面写 阅读全文
posted @ 2023-08-04 15:39 莫颀 阅读(1504) 评论(0) 推荐(0)
导航栏激活态下划线效果的CSS实现
摘要：一、鼠标移入效果图如下： 二、div结构 <div class="navbar"> <ul> <li>首页</li> </ul> </div> css如下： .navbar { color: #ACB0BB; font-weight: 400; cursor: pointer; } .navbar 阅读全文
posted @ 2023-08-01 14:55 莫颀 阅读(102) 评论(0) 推荐(0)
Nuxt3.0中使用EChart可视化图表📊
摘要：😊在Nuxt3.0项目中用到了可视化图表📊，于是我用了EChart可视化图表库。但是在官网我没有找到针对在Nuxt3.0中使用EChart的方法，于是在这里记录我的引入EChart并简单使用的步骤。需要声明的是，本文只针对在Nuxt3.0项目中使用EChart.js库的可视化图表进行讲解，不针对 阅读全文
posted @ 2023-05-10 18:41 莫颀 阅读(2728) 评论(0) 推荐(2)
NUXT3.0实现网络请求二次封装
摘要：😊最近在开发基于nuxt3.0的项目，看了官网的网络请求，感觉不太适合，就自己基于官网的useFetch()方法封装了一个网络请求，下面开始实现封装。 🚚第一步：新建http.ts文件，用于编写封装代码 我选择在composables目录中新建http.ts。composables是官方默认的插 阅读全文
posted @ 2023-05-09 16:27 莫颀 阅读(6377) 评论(5) 推荐(2)
CSS绘制虚线的方案
摘要：一、实现效果👀 二、代码实现🤖 <div class="line"></div> .line { width: 1px; /* 虚线宽度 */ background-image: linear-gradient(to bottom, #78FBCE 0%, #78FBCE 80%, transp 阅读全文
posted @ 2023-05-06 17:31 莫颀 阅读(1119) 评论(0) 推荐(0)

1 2 下一页