维多利亚少年--CSDN博客

原创 vue3使用@antv/x6-边工具的右键菜单实现

若是使用的其他ui框架，变更下拉菜单组件即可。还有该元素的css属性。

2024-04-07 12:29:39 376

原创 flex 实现多行项目动态堆叠，随着屏幕尺寸而扩展减少

当您增加或减少屏幕尺寸时，这些 flex 项目会缩小和增长。flex-wrap;height;padding;display;;;;.boxflex;flex;margin;height100%;center;center;

2023-09-12 16:22:51 617

想不到吧，这种功能现在纯前端就能够实现了，当然还可以做的更复杂一点，包括修改保存等功能，保存可以使用showSaveFilePickerAPI，它可以写入文件，同样是返回一个promise。感兴趣的可以试着完善编辑器的功能。entries、keys、values这三个方法都是用来获取目录中的所有文件和目录的，它们返回的都是一个AsyncIterable对象，我们可以通过for await…了解完这些知识点，我们就可以来开发一个简陋网页版编辑器了，初期只包含打开文件、打开文件夹、查看文件、切换文件。

2023-09-11 18:24:24 237

原创 Vue3 pinia的使用

/ useStore 可以是 useUser、useCart 之类的任何东西// 第一个参数是应用程序中 store 的唯一 id'main', // 或者id: 'main',// store里的初始值count: 0}),getters: {},// Actions 相当于组件中的 methods。

2023-09-05 18:37:28 298

转载监听手机键盘是否弹起

前端小伙怎么监听手机键盘是否弹起。

2023-09-05 17:18:58 82

原创自动化部署shell脚本，前端

由于研发项目较小，团队人员较少，所以没有部署jenkins。需要写一个自动化部署的shell脚本，实现在本地执行脚本自动完成打包，上传、备份、重启等操作。3、由于本地客户端无法安装sshpass或except来实现免密登录，你可以在客户端生成ssh公钥并把它放在服务器上，来完成免密登录。1、在项目根目录新建名为deploy.sh的脚本文件，每次修改完代码，直接在根目录打开git命令窗口，执行sh deploy.sh。

2023-02-17 15:34:01 455 1

原创 linux 定时执行shell巡检脚本，巡检jar服务是否正常，如果挂掉可以重新启动

实现定时执行shell脚本，巡检jar服务是否正常，如果挂掉可以重新启动，并存储检查日志。

2023-01-14 20:16:20 797

原创 vue-seamless-scroll数据量少时，暂停滚动，继续滚动

获取数据后并渲染到dom后，查看最后一个子元素是否在父元素的可视范围内，如果在就禁止vue-seamless-scroll复制数据和自动滚动行为，反之则允许。大屏项目：指定dom元素内，如果子元素内容过多，超出父元素的最高高度，可以发生自动滚动；如果子元素内容没有超出父元素的最高高度，不可以发生自动滚动。通过最后一个子元素offsetTop和父元素的clientHeight比较。

2023-01-10 10:01:10 2906 5

原创 js正则校验[{key:xx,val:xx}]格式

通过js正则表达式校验指定格式[{“key”:“123”,“val”:“123”},{“key”:“123”,“val”:“123”}]

2022-11-26 19:26:55 201

原创 js正则校验IP和IP段

【代码】js正则校验IP和IP段。

2022-11-26 18:19:37 2088

原创内网/外网实现部署nginx服务

轻松部署nginx到你的服务器上，常用命令

2022-09-16 18:18:35 3134 1

原创 vue3 + vite中按需使用ace-builds实现编辑器

vue3中按需使用ace-builds在页面中实现编辑器

2022-09-15 16:59:58 7432 5

原创 js正则判断域名和IP的端口路径是否正确

通过正则来判断输入的ip端口路径http://127.0.0.1:3000/list是否正确const reg = new RegExp("/^http(s)?:\/\/(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[0-9])\.((1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.){2}(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-

2022-04-21 14:52:07 2816

原创移动端H5解决Popup滑动穿透问题(多种方法)

· 我们时常会遇到这样的需求，点击按钮，显示弹层。弹层内容超出弹层高度并可以滑动，但是滑动时会发生滑动穿透的问题，背景内容也会发生滚动。我们显然不希望发生这种问题的发生。现在就让我们看看如何解决这种问题。·1. 通过body的overflow我们可以在弹层显示的时候，控制doucment.body的overflow属性来让背景多余的内容隐藏来完成阻止背景内容滚动document.body.style.overflow = 'hidden' // 弹层显示时document.body.style

2022-03-13 20:52:45 4509 1

原创 js 数组去重；排序数组；取大小值；对象数组排序

1.sort排序sort是es6新增的方法排序会直接改变的是原数组const arr = [1,51,25,41,5]arr.sort((a, b) => { // b-a从大到小 a-b从小到大 return b - a})sort函数也可以排序对象数组const arrobj = [ { id: 1, name: 'haha' }, { id: 20, name: 'sasa' }, { id: 15, name: 'fafa' }

2022-03-12 21:16:26 518

原创 vuex的基础入门

mutation-可以看出mutation是用来修改数据的方法，我们为什么不直接new一个State来改数据呢？而是在mutation里传入数据再commit提交来修数据呢？vuex这样做是为了跟方便的记录下数据的变更记录和轨迹，为了后面的监听和回滚之类的操作action-为了更方便的操作mutaion一些异步操作等，就是在mutation外包裹了一层方法...

2022-03-12 20:00:09 1703

原创 flex布局控制每行显示几个且有间隔

实现一个父元素包裹多个子元素，且每行只能有三个宽度不固定的子元素。父元素内部边距是32px，相邻两个B元素的间距是16px。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=

2022-03-12 19:14:33 6962

原创 css3文字智能适配背景颜色

实现一段文字在不同背景下展示不同的颜色，像是下面这样：CSS3 新增了一个很有意思的属性 – mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa

2022-03-09 17:10:14 299

原创 JS数据结构中的集合结构详解

不管是哪一种编程语言，都有集合。虽然 es6 中提供了 Set类，我们可以直接使用，但是这里为了让大家理解集合的内部实现机制，这里我们来手动封装一个集合类。什么是集合集合通常是由一组无序的, 不能重复的元素构成可以将它看成一种特殊的数组,特殊之处在于里面的元素没有顺序, 也不能重复没有顺序意味着不能通过下标值进行访问, 不能重复意味着相同的对象在集合中只会存在一份创建一个集合类主要是封装一个集合的构造函数，在集合中, 添加了一个 items 属性, 用于保存之后添加到集合中的元素. 因为

2022-03-09 13:34:33 1599

原创微信授权登录增加浏览器历史记录解决方法

在前后端分离的开发模式中，在首次进入页面通过微信授权后会遇到返回两次才能真正达到返回的效果。但在纯应用内前后端(jsp等)重定向，是没有上述多次返回按键问题的。单页应用的解决方案在首次进入项目页面时，可以让后端判断前端过来的请求，如果cookies失效需要重新跳转授权了，那么返回一个标志告知前端需要微信跳转至授权页面。或者前端自己写判断哪个页面需要授权后才能进入。前端通过location.href跳转至该授权回调链接。授权完毕会redirect到步骤2的约定url中。目前为止location.

2022-02-25 18:06:20 1535

原创手动实现Vue秒杀活动倒计时组件

预计实现效果子组件<template> <div class="_base-count-down no-rtl"> <div class="content"> <slot v-bind="{ d: days, h: hours, m: mins, s: seconds, hh: `00${hours}`.slice(-2), mm: `00${mins}`.slice(-2),

2022-02-21 17:20:47 547

原创网页阅读进度功能实现

通过js和css实现文章顶部的阅读进度功能使用 JavaScript 实现阅读进度功能1. html和csshtml css 部分非常简单，通过嵌套的两个 div 实现，外部的 div 提供底色背景，内部 div 显示阅读进度<head><style>.read_pro { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-colo

2022-02-09 14:16:27 1112

原创如何中断一个已发出去的请求?

最近在开发中遇见了如何中断已经发送web请求的问题，在这里跟大家探讨一下。中断axios请求axions 中断请求有两种方式：方式一使用 CancelToken.souce 工厂方法创建一个 cancel token，代码如下：import axios from 'axios'const CancelToken = axios.CancelTokenconst source = CancelToken.source()// 换成服务器资源地址是一样的 https://mdn.github

2022-01-05 17:57:29 2991 1

原创 Vue 前端代码风格指南（自用）

一、命名规范市面上常用的命名规范：camelCase（小驼峰式命名法 —— 首字母小写）PascalCase（大驼峰式命名法 —— 首字母大写）kebab-case（短横线连接式）Snake（下划线连接式）1.1 项目文件命名1.1.1 项目名全部采用小写方式，以短横线分隔。例：my-project-name。1.1.2 目录名参照项目命名规则，有复数结构时，要采用复数命名法。例：docs、assets、components、directives、mixins、utils、view

2021-11-02 10:23:20 98

转载 Chrome开发者工具详解

Chrome 开发者工具可以在浏览器中按下F12来进入开发者模式Chrome 开发者工具有很多重要的面板，比如与性能相关的有网络面板、Performance 面板、内存面板等，与调试页面相关的有 Elements 面板、Sources 面板、Console 面板等。你可以在浏览器窗口的右上方选择 Chrome 菜单，然后选择“更多工具–> 开发者工具”来打开 Chrome 开发者工具。打开的页面如下图所示：Chrome 开发者工具从图中可以看出，它一共包含了 10 个功能面板，包括了 Elemen

2021-08-02 15:39:30 3486 2

原创记录webpack3升级到webpack4的艰辛历程

项目的第三方样式库是vux，vux2必须配合vux-loader使用，webpack打包会做一些别的配置这是项目升级前的一些打包和环境配置目录，升级后目录结构没有改变。在这说明只是对我或你们的项目配置看看有哪些地方有差异1.升级webpack以及插件升级webpack到版本4的命令npm install --save-dev webpack@4 我这里更新到了4.8.1同时需要安装webpack-clinpm install --save-dev webpack-cli 我这里更新到了2.1.

2021-07-30 10:02:25 697 1

原创浏览器工作原理详解

浏览器工作原理详解“在浏览器里，从输入 URL 到页面展示，这中间发生了什么？ ”这是一道经典的面试题，能比较全面地考察应聘者知识的掌握程度，其中涉及到了网络、操作系统、Web 等一系列的知识。但很多人只能答出其中几个知识点，并不能将这些知识点串联成线，无法系统而又全面地回答这个问题。这篇文章会详细的讲解这些内容首先从浏览器的工作讲起，这里主要讲chrome浏览器(因为chrome浏览器市场占用率最高，具有代表性)现代浏览器都是多线程执行，由于进程是相互隔离的，所以当一个页面或者插件崩溃时，影响

2021-07-19 23:39:11 3267 1

原创 H5唤起手机照相、相册、摄影、录音及打电话发邮件

拍照<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拍照</title><script type="text/javascript"> function change(){

2021-07-19 10:53:26 793

原创想了解TS，看这儿就明白了

1.TS数据类型let isDone: boolean = falselet age: number = 123let sname: string = '123'let message: string = '123'let u: undefined = undefinedlet n: null = nulllet num: number = undefinedlet notSure: any = 4// 任何类型随意赋值或者调用不存在方法也不会报错notSure = '123'notS

2021-06-14 18:00:51 382

原创 File、Blob、dataURL 和 canvas 的详解与应用转换

基本介绍1. File(1) 通常情况下， File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。(2) File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如：FileReader, URL.createObjectURL(), createImageBitmap(),

2021-05-14 15:20:49 300 1

原创实现PC端的图片拖动效果

<!DOCTYPE HTML><html><head> <style> * { margin: 0; padding: 0; } #div1 { position: absolute; right: 50%; transform: translateX(-50%);

2021-03-29 16:44:36 285

原创 Js 数字每日动态增长的实现

let number = 0// 千位分隔符的动态数组let thousandsNumber = 0// 基础人数let baseNumber = 2100// 每天动态增加的人数 7个let curNumber = Math.floor((+new Date() - (4*60*60*1000)) / 1000000) + ''// 限制最大人数let maxNumber = Math.floor(Number(curNumber.substring(2, curNumber.length

2021-03-11 15:02:59 676

原创 canvas实现H5接物类小游戏

在vue中实现接物类小游戏先放张效果图<template> <div id="container"> <div id="guidePanel"></div> <div id="gamepanel"> <div class="score-wrap"> <div class="heart"></div>

2021-03-11 10:50:41 1380 1

原创 Js 将数字转换为大写金额

export const changeToChinese = (Num) => { //判断如果传递进来的不是字符的话转换为字符 if (typeof Num == "number") { Num = new String(Num); }; Num = Num.replace(/,/g, "") //替换tomoney()中的“,” Num = Num.replace(/ /g, "") //替换tomoney()中的空格 Num = N

2021-03-09 15:30:51 744

原创 Js 16进制颜色转RGB/RGBA字符串

export const colorToRGB = (val, opa) => { var pattern = /^(#?)[a-fA-F0-9]{6}$/; //16进制颜色值校验规则 var isOpa = typeof opa == 'number'; //判断是否有设置不透明度 if (!pattern.test(val)) { //如果值不符合规则返回空字符 return ''; } var v = val.replace(/#/

2021-03-09 15:27:43 617

原创 javascript执行机制(宏观和微观)

当拿到一段 JavaScript 代码时，浏览器或者 Node 环境首先要做的就是；传递给 JavaScript 引擎，并且要求它去执行。然而，执行 JavaScript 并非一锤子买卖，宿主环境当遇到一些事件时，会继续把一段代码传递给JavaScript 引擎去执行，此外，我们可能还会提供 API 给 JavaScript 引擎，比如 setTimeout 这样的API，它会允许 JavaScript 在特定的时机执行。所以，我们首先应该形成一个感性的认知：一个 JavaScript 引擎会常.

2021-03-07 22:26:19 385

空空如也

空空如也