自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 React实现在移动端进行签字

这里使用了 useState 钩子来创建了一个名为 signatureDataUrl 的状态变量,用于保存签名数据的base64编码。在 handleClear 和 handleSave 函数中,除了清除签名和保存签名的操作外,还使用了 setSignatureDataUrl 函数来更新签名数据的状态变量。在用户签名后,签名数据的base64编码会被保存到 signatureDataUrl 状态变量中,可以将其发送到后端保存签名图片。然后,在需要使用签名组件的React组件中,导入。

2023-02-23 20:44:51 94

原创 React移动端中实现全选和不选的实现

属性,表示该数据是否被选中。当点击全选按钮时,会将所有数据的。,当数据有一个未被选中时,全选按钮也会被设为未选中状态。表示要选择的数据列表,每个数据对象中有一个。下面是一种实现方式,其中的。

2023-02-22 14:36:32 28

原创 通用防抖和节流方式的实现

比如,当用户滚动页面时,需要处理滚动事件,但是由于滚动事件非常频繁,可能会导致处理函数被频繁调用,从而影响页面性能。它返回一个新函数,当这个新函数被调用时,它会检查上一次调用的时间是否距离现在的时间超过了延迟时间 delay,如果超过了就执行 func 函数并更新上一次调用的时间,否则什么都不做。它返回一个新函数,当这个新函数被调用时,它会先清除之前设置的定时器(如果有的话),然后设置一个新的定时器,在延迟时间 delay 后执行 func 函数。

2023-02-21 13:46:20 19

原创 新建一个完整的react项目和完善初始项目

1.完善默认改变端口号,打开package.json,找到scripts中的dev,在dev后面添加–host --port 3002 如果再在后面加一个–open,就可以自动打开了–host --port 3002 --open。devDependencies(开发工具)开发环境使用的,使用打包工具之后这些依赖不会被打包进去,但是dependencies(依赖工具)下的这些依赖会打包进去。1):找到自己创建的文件夹,在文件夹中打开命令提示符,找到文件夹的路径,cmd,敲回车,打开命令提示符工具。

2023-02-16 21:15:37 573

原创 react 改变项目默认启动的端口号

react 改变项目默认启动的端口号

2023-02-16 19:57:09 52

原创 Thu Feb 16 2023 13:49:53 GMT+0800 (中国标准时间)变为YY-MM-DD HH:MM:SS

Thu Feb 16 2023 13:49:53 GMT+0800 (中国标准时间)变为YY-MM-DD HH:MM:SS

2023-02-15 13:54:21 110

原创 使用create-react-appt做一个react的项目搭建

使用create-react-appt做一个react的项目搭建

2023-02-13 14:38:29 22

原创 react中使用定义数据并监听其值

原因:定义了数据,搜索之后可以打印出来数据,但是会延迟得到搜索后的数据。const [ procDefId , setprocDefId ] = useState('') //定义任务类别 // 搜索任务类型时触发 const changeRadio =(value) = > {console . log(value) //这样可以得到搜索的值 setprocDefId(value) //搜索后的内容,存入procDefId } const getMoblieList =() = > {

2023-02-09 17:30:27 510

原创 react学习小记之如何进行双向绑定(mobile.ant.design中的Collapse折叠面板的使用)

mobile.ant.design在react中使用,组件`Collapse`折叠面板的使用,并且有手风琴效果的

2023-02-07 13:26:12 227

原创 react中使用iframe嵌入vue2页面

react中使用iframe嵌入vue2页面

2022-11-22 17:29:15 265

原创 vue2前端实现网页截图

vue实现网页截图

2022-10-26 14:27:28 1400

原创 vue3中使用iframe嵌入vue2页面

vue3中使用iframe嵌入vue2页面或vue页面和iframe页面的相互传参问题

2022-10-21 11:05:31 1330

原创 Vue2项目集成到Vue3项目遇到问题汇总

Vue2转Vue3遇到问题汇总

2022-10-13 21:00:40 329

原创 vue3之 element-plus的循环图标

vue3之 element-plus的循环图标

2022-10-12 10:29:57 914

原创 Element Plus的分页组件el-pagination显示英文

使用Element Plus的分页组件el-pagination,切换每页显示数量时显示的是英文。:Element Plus 组件默认使用的是英语,显示中文的话需要做下配置,就是要引入element-plus里面的中文包。

2022-09-21 13:32:29 1022 3

原创 el-menu动态加载菜单

使用el-menu动态加载菜单,菜单只展示图标,没有展示菜单数据(通过下拉图标才能展示数据)

2022-09-07 11:21:00 789

原创 vue3+echart5 遇到的报错:Cannot read properties of undefined (reading ‘type‘)

vue3+echart5 遇到的报错:Cannot read properties of undefined (reading ‘type‘)

2022-09-07 11:17:05 544

原创 前端在登录时将用户密码加密

RSA加密登录的输入密码

2022-08-23 13:58:43 2437

原创 Vue+ElementUI 之 input输入框 添加自定义图片

template中v - model = "inputUser" class = "input" size = "large" icon = "el-icon-search" placeholder = "账户" > < template #suffix > < div class = "suffix" > < img src = "../assets/image/user.svg" alt = "" > < / div > < / template > < / el - input >

2022-08-19 16:19:21 1831

原创 vue3中使用swiper轮播显示多张图片

vue3中使用swiper轮播显示多张图片

2022-08-17 14:54:47 1464

原创 vue 点击切换动态Class变化,实现当前样式改变

vue 点击切换动态Class变化,实现当前样式改变。

2022-08-17 14:19:28 1011

原创 el-table里面滚动条修改样式

在vue文件中定义一个class属性在样式中表下的属性设置滚动条的属性展示的效果:

2022-07-12 10:40:37 2255 1

原创 基于el-table和el-pagination实现数据的分页效果

当我们使用el-table(表格) 和 el-pagination(分页),要实现el-table 表格存放数据, el-pagination 设置分页效果el-pagination的基本属性1、实现步骤&涉及要点参数 说明注意此处在选择要显示的数据时也需要对其进行截取操作,否则会直接全部显示。我们使用的是 slice(start,end) 截取数组,其中不包括 end;每页数据量 pageSize 为 6, currentPage 为当前页;比如第一页,那么截取的就是 0 ~ 6,slice 返回的

2022-07-07 15:02:43 2201 2

原创 VScode插件篇

插件不是越多越好, 有些插件会有冲突导致代码出错, 不要乱装

2022-07-01 13:58:24 186

原创 display:flex详解

1. 属性指定了弹性子元素在父容器中的位置。2. 内容对齐()属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐3. 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。4. 属性用于指定弹性盒子的子元素换行方式。5. 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。6. 属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。(1)flex-direction的值有::横向从左到右排

2022-06-29 16:46:00 5571

原创 常用的display的属性

1. display:inline(默认值)将设置该元素的标签以内联元素即像普通文本一样插入文档流,不会自动换行或者设置宽度跟高度;其中设置该元素的标签的宽度跟高度以放入的该标签的元素的宽高为准,不允许修改。2. display:none将该元素隐藏,不会再文档流中出现,所谓的文档流也就是文档中可显示对象在排列时所占用的位置3. display:inline-block将绑定该元素的标签以inline内联样式插入到文档流中,然后它本身拥有block块的属性,可以设置宽度跟高度,通俗的说也就是,把我

2022-06-29 16:07:04 1454

原创 div背景是渐变色且模糊,不影响里面内容的显示

需要实现:背景是渐变色且模糊,要求背景上方的文字不模糊,不渐变,是正常显示的。实现代码: 代码解读:一种实现线性渐变的属性,顾名思义,它的特点的是控制渐变,特点是线性的进行控制。第一个属性是是设置渐变从上到下,设置一个起始点和一个方向(指定为一个角度)的渐变效果...

2022-06-29 15:52:20 320

原创 css实现点击div改变背景图片,再点击更换成之前点击的样子

css实现点击div改变背景图片,再点击更换成之前点击的样子1.定义一个点击事件,同时class绑定两个属性,showBtn为true是展示showBox的class属性2.开始默认为,3.展示开始默认的效果图:4.点击,如果showBtn为true变为showBtn为false,如果showBtn为false变为showBtn为true5.这里是style里面定义好的属性,你想展示点击后是什么样子,可以在hideBox添加相应属性。6.点击完成之后,我的页面效果是位置发生变化,图片转换

2022-06-24 17:30:37 1282

原创 如何解决CSS中-webkit-box-orient: vertical属性编译后丢失问题

一、起因需求要求展示两行,多余的文字用三个点替代,于是用了这几个不太规范的属性后来发现代码里写的好好的,一到页面上居然没有反应,和没写一个样,f12看了下,原来是这个属性丢失,导致了不生效,在Styles里把这个属性加上就好了,于是断定是编译过程导致这个属性丢失。二、解决办法网上找了一个可行的解决方案,把autoprefixer关掉,有一种写法:这样确实解决了编译丢失的情况,但会在编译过程中报warning,最后到GitHub上找到最佳解决方案,如下问题解决,也不报warning了。...

2022-06-15 09:38:04 1877

原创 使用echart的图表中:Initialize failed: invalid dom 之 dom加载出现的问题

报错原因:Initialize failed: invalid dom引入 因为在还没加载的时候,option 获取元素,就开始检测,并尝试去获取它,但是在vue中引用的中,发现在模板dom还没加载的时候 就已经开始执行,所以会报错 2、解决办法:根本原因就是dom没加载,echarts没有检测到dom,那么我就让dom加载后再去获取dom,就把echarts.init()这部分数据放在onMounted里面执行,也就是挂载完成之后执行...

2022-06-10 15:07:54 737

原创 前端缓存方案

调用得到缓存数据的函数也可以在其他页面使用,使用方式是一样的,在调用的页面要引用

2022-06-09 11:26:27 132

原创 js中为对象添加属性

一.在普通js中打印结果:打印结果2、在vue中使用利用this.$set(对象名,“属性名”,属性值) 或者 Vue.set(对象名,“属性名”,属性值)注:属性名用引号打印结果

2022-06-09 10:36:00 31051 1

原创 web前端适配问题

web前端适配静态配置就是所谓的固定布局(pc端)以像素作为页面的基本单位,不管设备和浏览器宽度,只设计一套尺寸1,自适应布局根据不同根据不同的分辨率,加载不同的CSS样式文件(可切换的固定布局)(1)获取屏幕宽 window.screen.width// 分辨率大于等于1680,大部分为1920的情况下,调用此cssif(window.screen.width >= 1680){document.write('<link rel="stylesheet" href="css

2022-05-30 15:04:36 1168 1

原创 get请求时有query参数有body参数时怎么发送请求

1.这个是接口,要求指标值id是path类型(或则body类型),指标项是query类型。2. 接口可以给两个参数,id是指标值id是通过拼接到地址栏中,params中的参数是通过地址栏传参请求的网址:

2022-05-24 17:34:20 1770

原创 前端处理后端返回的二进制流文件

前端处理后端返回的二进制流文件首先收到后台的数据由于项目文件服务器加密原因,只能通过后台接口获取二进制流,需求:需要点击一个 按钮 ,实现文件下载 ,而后端返回的数据为二进制流数据。原因:前端收到后台的数据,前端收到后台接口获取的二进制流,前端实现文件下载。前端页面的编码格式和服务端编码格式不同,正如此时,服务端返回的是 blob格式的数据,而我们使用的是 非 blob格式去解析,所以产生了乱码。1.这一步非常重要!!!在请求接口时要设置responseType为blob。要想处理这段乱码

2022-05-24 17:21:13 4128

原创 nvm详细安装步骤以及使用(window10系统)

nvm详细安装步骤以及使用nvm是一个管理nodejs版本的工具。在实际的开发中,有些项目的开发依赖需要低版本的nodejs运行环境,此时我们就需要使用nvm来降低nodejs版本。1.下载安装nvm,首先安装目录不要有空格和中文,会出现乱码下载地址: https://github.com/coreybutler/nvm-windows/releases2.解压之后安装,安装路径默认的是C盘,如果C盘内存不够的话可以安装到D盘,一般我是安装到D盘上。3.更改环境变量,一般安装好之后环境变量

2022-04-13 17:45:06 38835 2

原创 编译打包部署到云服务器

编译打包部署到云服务器1.前端代码打包之后(npm run build),有这样一个文件(dist或者build,只是名字不同)2.打开码云登录https://gitee.com/,新建仓库,仓库名字为必填项管理中修改私有模式为公开模式>基本设置>开源,然后保存这是相关命令,在相关路径中执行前两行代码(比如我的项目是在打包之后dist文件下面执行),然后进行初始化git init,我这个项目dist是要全部添加上去的,执行git add *,然后提交版本,版本名字为v1.0git

2022-04-12 17:59:08 1288 1

原创 前端vh和vw

1.vhvh就是当前屏幕可见高度的1%,也就是说height:100vh == height:100%;但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开,但是设置height:100vh,该元素会被撑开屏幕高度一致。2.vwvw就是当前屏幕宽度的1%,补充一句,当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,但是100vw是相对于屏幕可见宽度来设置的,所以会出现50vw 比50%大的情况...

2022-04-12 14:25:10 2284

原创 van-image怎么使用本地图片

van-image怎么使用本地图片1.使用require(‘这里是你的本地图片地址’)2.:image :src 要注意这个冒号(v-bind),要用绑定属性的方式另一种方式

2022-04-01 17:04:00 2576 1

原创 Vuex中mutations的用法

Vuex中mutations的用法之一在 Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离。Mutations使用Vuex 中的 mutations 非常类似于事件,每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler),也可以理解为{type:handler()},这和订阅发布有

2022-04-01 14:44:49 8020

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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