- 博客(41)
- 收藏
- 关注
原创 vite + vue3 组件批量导入和注册
/ 文档地址:https://cn.vitejs.dev/guide/features.html#glob-import。// 遍历modules,生成componentMap和componentNameList。// 借助vite提供的import.meta.glob来导入指定目录下的模块。// 创建组件名称数组,方便后续遍历。// 使用展开运算符,批量注册组件。// 点击菜单项,切换组件显示。// 创建组件注册对象。
2025-02-19 09:08:02
534
原创 Vue3当中通过script和defineOptions两种方式指定组件的name
Vue3当中通过script和defineOptions两种方式指定组件的name
2024-01-22 15:19:16
1378
1
原创 【前端项目规范】Git Commit | ESlint | Prettier | Stylelint 配置
【前端项目规范】Git Commit | ESlint | Prettier | Stylelint 配置
2023-07-24 09:54:47
464
原创 useWindowPrint 自定义的打印HOOK
useWindowPrint用于实现页面的打印,打印的效果相对来说比较好。useWindowPrint支持onBeforePrint、onBeforePrintContent、onAfterPrint等回调,可以很方便地在不同阶段进行操作,如果觉得使用回调函数比较麻烦,useWindowPrint也维护了一个State,可以在打印时动态显示和隐藏页面上的元素。
2022-12-03 22:14:25
1116
原创 实用Chrome扩展
RGB转换扩展1 介绍平常在书写CSS样式时,经常会遇到CSS颜色进制相互转换的问题,一般都要去搜索网站,然后进行转换,为了方便,就手写了一个Chrome的扩展,支持16进制和10进制相互转换,点击转换按钮,可以进行切换。2 安装扩展文件放到了我的 GitHub 当中,可以去我的GitHub当中把整个文件夹下载下来,下载下来的目录如下:lib – 存放jqueryjquery.min.jsicon.png – 扩展程序的图标manifest.json – 扩展程序配置文件popu
2021-03-10 17:51:08
204
原创 Rate评分组件,可自定义图标和颜色
Rate 评分组件使用方法Rate组件需要放在components文件夹内目前Rate组件只支持iconfont的图标,需要自己到iconfont上查找图标,需要一个选中时的图标和一个未选中时的图标,找到之后,新建一个项目,放入到自己的项目当中,下载解压,将压缩包内以font开头的文件夹内的所有文件放到 assets\icon 文件内,再在 main.js 当中使用 import "./assets/icon/iconfont.css"; 导入图标父组件使用 Rate 组件的组件,即 Rate
2020-12-11 14:55:32
4760
原创 JS递归
JS递归 这篇博客是我对递归思想的一个理解,记录下来,方便理解。 以一个例子为例,求给定正整数的阶乘,这个例子就可以使用递归来解决。使用递归解决这个阶乘问题可以分为三步:明确递归函数的作用,即求一个给定正整数的阶乘。找出函数退出的条件,阶乘递归当中,当num小于2时,就可以直接跳出了,乘以1时结果不变。找出关系式,阶乘递归当中,10 * 9 * 8 * 7 … * 2 * 1, 类似于 n * n-1。function factorial(num){ if(num <= 2)
2020-05-23 22:25:52
656
原创 移动端的时间选择器
移动端的划动时间选择器 在工作当中,遇见了一个UI效果,是让用户划动选择1到12小时,在网上没有找到现成的,就自己写了一个,基本可以满足效果,GitHub地址:https://github.com/Jin0811/TimePicker.git,样式如下: 这个选择器只适合移动端的使用,PC端不能使用,用户在划动的时候,样式也会相应地发生变化。’ 所有的样式和代码,都放在了我的GitH...
2020-04-06 22:54:18
3906
原创 HTML中支付密码输入框
在工作当中遇到了一个需要支付密码输入框的需求,大概的需求类似在转账时,输入密码时的输入框,每一位密码之间都有间隔,但是普通的input标签并不能实现类似的效果。 这里我使用ul和input实现了类似的效果,每一个密码数字都是单独的,之间具有间隔。效果如下图: 原理:页面当中有一个ul,还有一个隐藏的input框,当点击ul时,利用JS控制input输入框获取到焦点,这样当我们输入数...
2020-03-28 10:12:27
1019
原创 Vue侦听器的使用
Vue侦听器小练习 Vue中的侦听器可以侦听data中数据的变化,并做出操作。下面是使用Vue的侦听器写的一个进度条的小demo。每完成一件事,进度条都会自动更新。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view...
2020-03-01 20:46:42
462
原创 旋转加载动画
Loading动画1、效果图:2、原理: 利用定位将两个div,重叠在一起,再利用border-bottom-color: transparent这个CSS样式,将div的一部分边框变成透明,最后分别为两个div添加不同的动画效果就可以了。3、代码<!DOCTYPE html><html lang="en"><head> <me...
2020-02-26 15:49:37
439
原创 利用ES6中的类制作一个简单Loading遮罩层
ES6中的类制作一个简单遮罩层 这个一个使用ES6的类,制作的一个简单的Loading遮罩层,可以展示Loading动画,或显示指定的文本,还可以设置遮罩层多少毫秒以后关闭,或者手动关闭遮罩层。代码如下:class Info{ // 构造函数 constructor(settings){ this.configure = settings; ...
2020-02-24 20:38:47
282
原创 漂亮的搜索页面
Home页面 在页面当中,可以直接输入要搜索的东西,点击搜索图片或者按下Enter键就可以进行搜索,原理就是利用JS改变浏览器地址栏中的URL,效果图如下,如果输入的内容为空,则会进行提示;代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...
2020-02-24 20:20:36
5205
9
原创 Node+Express+Mysql+Vue简单博客项目
BLOG 项目1. 项目介绍: 该项目为个人博客项目,包括用户端和后台,采用的是前后端分离的方式,前端使用Vue框架,后端使用Node.js,使用Express框架,数据库采用MySQL数据库。 用户端方面,每一位用户都需要进行注册和登录,每一位用户都有一个个人主页,展示个人的信息,同时用户也可以修改自己的相关信息。同时每一位用户都可以发布博客,可以查看自己发布的博客。 每一篇博客,...
2020-02-18 20:55:25
1141
4
原创 Node+multer实现文件的上传
Node上传文件 介绍:使用express框架和multer,来实现文件的上传。HTML代码,分为原生表单上传文件和axios上传文件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte...
2020-01-29 20:18:34
389
原创 获取验证码的JS代码
获取验证码的JS代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
2020-01-08 19:50:47
1777
原创 JS时间戳转换函数
JS时间戳转换函数业务需求在工作当中,请求接口之后,返回了一个时间戳,需要在前端页面上显示 “1小时之前发布” 或 “26分钟之前发布” 的信息,需要对时间戳进行转换。代码:// 创建一个时间对象,获取到一个测试的时间戳var testDate = new Date("12/3/2019 21:26:0");var oldTime = testDate.getTime()/1000...
2019-12-04 22:06:10
739
原创 Python中使用turtle库画同心圆
turtle库之同心圆1、代码import turtle as tcolorList = ["red","purple","skyblue","yellow","hotpink","green","blue","black","darkred"]for i in range(1,10): t.penup() t.sety(-15*i) # sety()保持x不变...
2019-08-31 10:26:08
20387
原创 纪念日和天气查询微信小程序
我的第一个微信小程序1.微信小程序介绍 介绍:这个小程序是我的一个练手的小项目,主要的功能包括纪念日和天气查询。 纪念日功能可以允许用户创建纪念日和删除纪念日,用户输入名称并选择时间,当选择过去的日期时,点击添加后,会显示已经过去了多少天,当选择未来的时间时,点击添加后,会显示还有多少天。在添加完成纪念日后,用户也可以选择删除纪念日。 天气查询功能可以为用户提供天气信息,当用户授权后...
2019-08-15 14:11:13
3735
原创 HTML5之meta标签
搜索引擎在检索页面时,会同时检索页面中的关键词和描述,但是关键词和描述不会影响页面在搜索引擎中的排名。1、使用meta标签可以用来设置网页的关键字 <meta name="keywords" content="HTML5视频教程">2、使用meta标签还可以用来设置网页的描述 <meta name="description" content="尚硅谷发布了javasc...
2019-07-29 09:00:49
215
原创 JS数据类型之Boolean、Null和Undefined
1.Boolean Boolean,布尔值,布尔值只有两个,true和false,布尔值主要用于逻辑判断。<script type="text/javascript"> var boolean_1 = true; // 注意此处不需要加引号 console.log(boolean_1); // 返回true console.log(typeof boolean_1); ...
2019-07-29 08:53:13
1011
原创 HTML5中的图片标签
HTML5图片标签 如果想要在网页中加载一张图片,那么就需要用到HTML中的图片标签,即img标签,img标签是一个自结束标签。 img标签的属性如下所示:src:设置一个外部图片的路径,可以使用相对路径和绝对路径也可使用一个链接。alt:可以用来设置在图片不能显示时,对图片的描述,搜索引擎可以通过alt属性来识别不同的图片,如果不写alt属性,则搜索引擎不会对img中的图片进行收录...
2019-07-27 14:55:43
981
原创 JS数据类型之数值(Number)
数据类型之Number JS中,所有的数值都是Number类型,包括整型和浮点型,浮点数即小数。1.判断数据类型 可以使用一个运算符typeof来检查一个变量的类型,语法:typeof 变量。 检查字符串时会返回string,检查数值时,会返回number,使用typeof检查Infinity时,也会返回number。<script> var word = "Hell...
2019-07-27 11:13:26
472
原创 Javascript数据类型之字符串(String)
数据类型在JS中,一共有六种数据类型,分别为String:字符串Number:数值Boolean:布尔值Undefined:未定义Null:空值Object:对象前五种数据类型为基本数据类型,Object为引用数据类型。数据类型之字符串 在JS中,字符串需要使用英文引号包括起来,单引号或者双引号都可以,注意:单引号里面不能嵌套双引号,双引号里面可以嵌套单引号。 注意:...
2019-07-27 09:55:51
494
原创 如何在HTML页面中编写大于号和小于号?(HTML实体)
1.HTML实体 在HTML中,我们是不能直接使用大于号">“和小于号”<"的,因为浏览器会将这些当作标签进行处理,这样一来就不能正常显示,所以需要使用到HTML的实体。 在 HTML 中,某些字符是预留的。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。例如:<!DOCTYPE html><...
2019-07-26 17:08:44
39463
原创 HTML5的文档声明
HTML5的文档声明<!DOCTYPE html> 上面的代码块是HTML5的文档声明,声明当前的网页是按照HTML5的标准编写的。 编写网页时,一定要将HTML5的文档声明写在网页的最上面,如果不写文档声明,则会导致有些浏览器进入怪异模式。进入怪异模式以后,浏览器解析页面会导致页面无法正常显示,所以为了避免进入该模式,一定要写文档声明。常用的文档声明HTML5<...
2019-07-25 10:36:16
5941
原创 JS的基本语法以及字面量和变量、标识符
1.JS的基本语法JS中严格区分大小写JS中的每一行代码,必须以英文的分号结尾JS会自动忽略多个空格和换行,所以可以使用空格和换行对代码进行格式化2.字面量和变量字面量是指不可以改变的值,如数字1、2、3等变量是指可以用来保存字面量的量,变量的值可以进行改变<script type="text/javascript"> console.log("数字1...
2019-07-25 10:10:17
270
原创 JavaScript的编写位置和引入方式
JavaScript的编写位置JS中函数的编写位置有四种1、写在外部文件中可以将JS代码,写在一个JS外部文件中,如:创建一个JS文件,在其中编写JS代码,在HTML中通过script标签引入外部文件<script type="text/javascript" src="js文件名.js">这个script标签可以写在HTML文件的head中,也可以放在body的下方。2...
2019-07-24 21:21:29
919
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人