- 博客(297)
- 收藏
- 关注
RSS订阅原创 element ui图片上传组件封装+校验黑白照片
项目需求是在上传照片的时候，不能上传黑白照片。如果上传的黑白照片需要提示。所以就封装的一个组件，校验照片颜色也是我在网上找到的，但是原文链接找不见了。所以自己改了改封装的一个小功能。
2024-01-03 13:59:11
590
原创 解释 Git 的基本概念和使用方式
分支（Branch）：是仓库中的一个独立线条，可以用于独立开发、实验和测试功能。远程仓库（Remote Repository）：是位于网络服务器上的一个仓库，用于与团队成员共享项目。提交（Commit）：是对项目文件的一次更改的记录，包括修改的内容和作者的信息。可以是本地仓库（在本地计算机上）或远程仓库（在网络上的服务器上）。初始化仓库：创建一个新的Git仓库，或将现有项目转换为Git仓库。切换分支：在不同的分支之间切换，以便进行不同的开发或测试。提交更改：将文件的更改提交到仓库，创建一个新的提交记录。
2024-01-02 17:03:56
1014
原创 前端文件上传组件最全封装+删除+下载+预览
前言：使用的是若依的框架+element ui+vue2封装的。如果有不对的地方欢迎指出。后台管理使用，文件需要上传。回显列表，详情也需要回显+预览。
2024-01-02 16:44:32
675
原创 css+js实现鼠标移动边框高亮效果
前言：效果是鼠标移入空白区域，边框高亮的效果。效果是在douyin的渡一教育袁老师的课程学习到的，观看以后是一个实用的小特效。想看的可以平台查询，自己也学到了知识。
2023-12-29 15:03:53
690
原创 前端使用elementui开发后台管理系统的常用功能（持续更新）
前言：本次的文章完全是自己开发中遇到的一些问题，经过不断的修改终于完成的一些功能，当个快捷的查看手册吧~elementui开发后台管理系统常用功能高级筛选的封装elementui的表格elementui的表格实现跨页多选+回显elementui的表单elementui的日历vue获取某几天内的日期和星期几请假时长计算高级筛选的封装功能描述：数据使用的若依的字典，或者是自定义数据，可以点击每个选项进行选择，取消选择，也可以在已选择进行清除和单个删除const officeConfig = {
2023-09-06 11:00:58
1217
原创 vue实现滚动公告提示效果vue-seamless-scroll
官网https://chenxuan0000.github.io/vue-seamless-scroll/zh/// 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1。// 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3。// 开始无缝滚动的数据量 this.dataList.length。// 单步运动停止的时间(默认值1000ms)// 这个是我们的接口，返回公告信息的。// 这个是需要通过npm安装的。// 这个是我们的接口。
2023-05-13 18:23:10
987
1
原创 js日期选择范围限制一个月，获取一个日期的下一个月，上一个月
获取一个时间的上一个月或者下一个月function getPreMonth(date) { var arr = date.split("-"); var year = arr[0]; //获取当前日期的年份 var month = arr[1]; //获取当前日期的月份 var day = arr[2]; //获取当前日期的日 var days = new Date(year, month, 0); days = days.getDate(); //获取当前日期中月的天数 va
2022-03-14 15:59:26
1579
原创 js实现微信禁止h5网页下拉，禁止微信h5页面默认下拉
直接添加下面代码即可：document.body.addEventListener('touchmove', function (e) { e.preventDefault()}, { passive: false })
2022-02-24 14:24:33
1089
1
原创 js笔试题 比较版本号函数
实现一个function 传入(v1，v2) 如果v1>v2 返回1 v1<v2返回0 其他返回0compareVersion(‘1.1’, ‘1.1.0’), 0compareVersion(‘13.37’, ‘1.2’), 1compareVersion(‘0.1’, ‘1.1.1’). -1function compareVersion(v1, v2) { const v1Arr = v1.split(".") const v2Arr = v2.split("
2022-02-22 11:17:53
465
原创 iframe嵌套网页全屏显示，已实现有代码
两种方式：直接复制使用修改地址即可使用没有上面的<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>iframe全屏测试</title> </head> <body scroll="no" style="margin:auto"> &l
2022-01-06 16:17:09
1105
1
原创 开发小技巧-5种CSS实现渐变色边框
给 border 设置渐变色是很常见的效果，实现这个效果有很多思路。1、使用 border-imagecss 提供了 border-image 属性用于给 border 绘制复杂图样，与 background-image 类似，我们可以在 border 中展示image和linear-gradient。通过 border-image 设置渐变色 border 是最简单的方法，只需要两行代码：<style> body { background-color: #000; }
2021-10-18 10:57:20
291
1
原创 Vue面试题，最全汇总
vue常见面试题vue优点？v-show和v-if指令的共同点和不同点？vue父组件向子组件传递数据？子组件像父组件传递事件？如何让CSS只在当前组件中起作用？keep-alive的作用是什么?如何获取dom?说出几种vue当中的指令和它的用法？vue-loader是什么？使用它的用途有哪些？为什么使用key?v-modal的使用请说出vue.cli项目中src目录每个文件夹和文件的用法？分别简述computed和watch的使用场景v-on可以监听多个方法吗？$nextTick的使用vue组件中data为
2021-10-11 16:34:19
210
原创 开发小技巧-如何在单击按钮上创建波纹效果？
波纹效过是现代设计趋势的一部分。你一定在许多网站上见到过，它提供了按钮按下的波纹动画效果。我们可以通过向按钮添加子元素并设置动画效果来产生涟漪效果。我们也可以使用Javascript根据光标在按钮上的位置进行定位。一、基本样式：使用position:relative属性向按钮添加基本样式，以放置内部span标签并overflow:hidden防止span超出按钮。<!DOCTYPE html><html> <head> <title></ti
2021-10-11 11:30:11
385
原创 jQuery简单的2048数字游戏代码
<div> <div class="scoringArea">您现在得分 <span class="score">0</span> 分 </div> <div class="gameFrame"> <div class="gameFrameRow"> <ul class="gameFrameUl"> <li class="gameFrameCell "> </.
2021-09-16 18:10:34
316
1
原创 vue3 ref函数
1、ref推荐定义基本数据类型(ref值也可以是对象，但是一般情况下是对象直接使用reactive更合理)。2、在 vue 的模板中使用 ref 的值不需要通过 value 获取 （vue 会通过自动给 ref 的值加上 .value）。3、在 js 中使用 ref 的值必须使用 .value 获取。<template> <div>{{count}}</div></template> <script> import {r
2021-09-15 15:32:30
488
原创 常问面试题，封装函数判断数据类型
面试题 封装函数判断数据类型在js中有哪些数据类型js中判断数据类型的方法1.typeof2.instanceof3.constructor4.toString解答面试题在js中有哪些数据类型在javascript中数据类型可以分为两大类：一个是基本数据类型 另一个是引用数据类型基本数据类型：string number boolean undefined null symbol引用数据类型：Objectjs中判断数据类型的方法1.typeof能够返回部分数据正确的数据类型，但是有一些数据无法返
2021-09-02 15:32:27
282
原创 jquery实现分页，自己编写的jquery分页插件，通用性很强
html代码<div id="page" class="paging"></div>调用<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="./page.js"></script><script type="text/javascript"> $("#page").paging({ total: 1.
2021-09-01 18:12:07
360
1
原创 6 个你可能不知道的强大 JavaScript 控制台方法
控制台方法warn方法error方法table方法assert方法dir方法count 和 countReset 方法warn方法console.warn() 方法用于在浏览器控制台中显示警告 它需要一个参数（警告文本）console.warn("This is a warning message");error方法console.error() 方法允许我们在控制台中打印错误消息。它将错误消息作为一个参数。这种方法通常用于测试目的。console.error("This is a err
2021-08-25 13:17:46
209
原创 如何使用JavaScript删除CSS属性？
方法1：使用cssremoveProperty：该CSSStyleDeclaration.removeProperty()方法被用来从一个元件的样式删除一个属性。通过遍历styleSheets数组并选择cssRule，可以选择元素的样式。然后可以使用要删除的属性指定removeProperty方法。句法：element.removeProperty('property')案例：<!DOCTYPE html><html> <head> <title
2021-08-24 11:09:58
4391
7
原创 网页特效 js动态调用图文卡片ui特效
css3+jq制作炫酷的旅游图文列表展示，鼠标划过图片圆形缩放显示文字内容详情动画特效。这是一款写入js里面调用动态数据图文列表。html代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title></title> <meta n
2021-08-23 18:16:56
336
原创 react脚手架配置代理总结
方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）方法二第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js第二步：编写setupProxy.js配置具体代理规则：const proxy = requir
2021-08-20 09:38:08
85
原创 React 脚手架
React 脚手架使用create-react-app创建react应用react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖3.可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件
2021-08-19 10:19:42
154
原创 react生命周期
react生命周期引出生命周期钩子二级目录三级目录引出生命周期钩子案例：让指定的文本做显示 / 隐藏的渐变动画，点击“不活了”按钮从界面中卸载组件效果图：<script type="text/babel"> // 创建组件 // 生命周期回调函数 <=> 生命周期子函数 <=> 生命周期函数 <=> 生命周期钩子 class Life extends React.Component{ state = { opacity
2021-08-11 14:12:32
99
原创 React之旅基础篇(四)
React之旅基础篇（四）事件处理收集表单数据受控组件非受控组件高阶函数 函数柯里化不适用函数的柯里化事件处理通过onXxx属性指定事件处理函数(注意大小写)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 — 为了更好的兼容性React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) — 为了高效通过event.target得到发生事件的DOM元素对象 — 不要过度使用ref class Demo extends React.Component {
2021-08-06 11:53:40
109
原创 React之旅基础篇(三)
React之旅基础篇（三）React组件函数式组件类式组件组件三大核心属性stateReact组件理解组件：用来实现局部功能效果的代码和资源的集合(html/css/js/image…)注意：定义函数组件的时候首字母需要大写函数必须有返回值在渲染组件的时候要写Demo标签，必须有结束标签虚拟DOM元素只能有一个根元素函数式组件创建函数式组件渲染组件到页面渲染类组件标签的基本流程React解析组件标签，找到了Demo组件发现组件是使用函数定义的，随后调用该函数，将返回的虚拟
2021-07-23 09:32:35
330
原创 放大镜展示特效，仿华为手机商品~
原生js制作华为手机商品图片放大镜预览，带左右按钮和缩略图切换。通过js默认设置好缩略图和大图，悬停大图放大镜展示特效。适用于各大商城网站商品图片展示代码。html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-07-22 10:48:43
318
1
原创 vue2.0插件大全，方便你的开发
vue2.0插件大全 UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为
2021-07-21 16:02:46
2081
原创 炫酷的登录注册表单切换
html代码<body> <div class="container"> <div class="main"> <div class="bg"></div> <form class="formone" action="/" method="get"> <div class="title">My forms</div> <div class="username">&.
2021-07-20 17:29:32
308
原创 4种在JavaScript中获取URL中参数值的方法
正则法function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]); } return null;}// 这样调用：
2021-07-12 11:24:36
678
原创 React之旅基础篇(二)
React之旅基础篇（二）JSX语法规则JSX练习模块与组件、模块化与组件化的理解React开发者工具调试JSX语法规则定义虚拟DOM时，不要加引号标签中混入js表达式时要用{}样式的类名指定不要用class。要用className内联样式，要用style={{key:value}}的形式去写只有一个根标签标签必须闭合标签首字母若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报
2021-07-09 17:30:19
96
原创 面试常问的13种Vue修饰符，你都知道吗
1.lazylazy修饰符作用是，改变输入框的值时value不会改变，当光标离开输入框时，v-model绑定的值value才会改变<input type="text" v-model.lazy="value"><div>{{value}}</div>data() { return { value: '111111' }}2.trimtrim修饰符的作用类似于JavaScript中的trim()方法，作用是把v-model绑定的值的首尾空格给过滤掉
2021-07-06 16:59:41
550
原创 React之旅基础篇(一)
React之旅基础篇1React简介是什么？谁开发的？为什么学？React入门相关js库效果创建虚拟DOM的两种方式jsx方式js方式虚拟DOM与真实DOMReact简介英文文档：react英文文档中文文档：react中文文档是什么？用户构建用户界面的JavaScript库是一个将数据渲染为HTML视图的开源JavaScript库谁开发的？由FaceBook开发，且开源为什么学？原生js的痛点：原生js操作DOM繁琐 效率低 （DOM-API 操作 UI）jq仅仅只是代码
2021-06-30 16:57:25
81
原创 JSON.stringify几种使用
用过 json 的应该都知道，把一个对象通过 stringify 之后提交给后台是很常用的手段。但是 IE6-7 下没有 jsON 对象，所以要借助 json2.js 来实现。1、经典用法//JavaScript数组中包含对象var data = [ {name: "悟空", sex:1, age: 30}, {name: "八戒", sex:0, age: 20}, {name: "唐僧", sex:1, age: 30} ];//将JavaScript对象转换为J
2021-06-22 15:58:08
84
原创 TS 面试题整理（持续更新ing...）
1、TypeScript 的主要特点是什么跨平台：TypeScript 编译器可以安装在任何操作系统上，包括 Windows、macOS 和 Linux。ES6 特性：TypeScript 包含计划中的 ECMAScript 2015 (ES6) 的大部分特性，例如箭头函数。面向对象的语言：TypeScript 提供所有标准的 OOP 功能，如类、接口和模块。静态类型检查：TypeScript 使用静态类型并帮助在编译时进行类型检查。因此，你可以在编写代码时发现编译时错误，而无需运行脚本。可选的
2021-06-18 17:19:26
17683
原创 瓶子里的萤火虫动画特效
使用css绘制装在透明瓶子里的萤火虫发光动画，鼠标悬停在瓶子上打开盖子萤火虫飞出动画特效。html代码<div class="container"> <div class="jar"> <div class="wording help">HELP!</div> <div class="wording thanks">THANKS! :)</div> <div class="jartop"></div
2021-06-01 15:13:31
325
原创 卡通的独角鲸动画特效
一款使用css3绘制圆形径向动态背景的独角兽ui动画，卡通的独角鲸挥手翘尾巴动画特效。老好看了~快去试试吧html代码<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>独角鲸派对</title><link rel="stylesheet" href="css/style.css"></head><b
2021-05-25 15:19:38
547
原创 5种实现CSS底部固定的方法
今天主要介绍一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，就不能撑开元素到达浏览器的底部时，下面的布局就是解决如何使元素粘住浏览器底部。一：全局增加一个负值下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度。html代码：<body> <div class="wrapper"> content <
2021-05-24 11:52:02
4838
原创 vue中H5页面跳转小程序
最近在做的就是H5页面跳转小程序的一个功能，我下面说的是我在项目中遇到的问题和解决方法，不知道对你们有没有帮助，如果有更好的方式，大家提出来讨论互相学习哦~这样才能进步的快官方开放标签的文档–文档多看几次，细节部分注意https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E5%BC%80%E6%94%BE%E6%A0%87%E7%AD%BEH5页面-html相关的问题和答案user
2021-05-11 14:46:19
1309
原创 Js阻止事件冒泡和阻止默认事件
js中阻止事件冒泡，阻止默认事件的方法，理解stopPropagation()，preventDefault()，return false的区别1、event.stopPropagation()方法event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。提示：请使用 event.isPropagationStopped() 方法来检查指
2021-04-25 10:14:17
1687
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人