- 博客(52)
- 收藏
- 关注
RSS订阅原创 简单的vuex使用
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，解决多组件数据通信问题。
2025-04-03 11:13:44
215
原创 css定义变量
在css中，使用 - 前缀来定义变量，变量得命名可以由字母、数字、下划线组成，但必须是字母开头，通常放在选择器规则集内或者在根元素（:root:root {
2025-01-06 16:20:33
450
原创 大屏自适应缩放解决方案
做大屏做难搞的就是自适应问题, 此方案是在视频播放器上得到的灵感, 计算宽高的缩放比, 根据宽高最小的缩放比进行缩放, 用到的是css里的transform: scale, 希望此案例能有所帮助, 如果有更好的解决方案也希望大家一起分享。
2024-09-12 13:35:51
402
原创 js防抖与节流
使用节流或者防抖要用到工厂函数（返回新函数的函数），onclick不会触发返回的方法，addEventListener可以正常触发，所以我们要使用addEventListener监听某个按钮来使用。任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行，它们可以减少不必要的函数调用次数。换句话说，无论函数被触发多少次，它都只会按照预定的间隔执行。* 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行；* 指定时间间隔内只会执行一次任务,/**提交数据 */
2024-08-22 10:01:44
442
原创 vue封装一个简单的权限管理功能, 控制页面的按钮显示与隐藏
/ 登录成功后获取到的按钮权限数据存储到这里。2、在utils/index.js里编写。1、在项目入口html文件创建全局变量。3、在main.js里引入。5、模拟获取到的权限数据。
2024-06-24 15:32:52
414
原创 使用vue自定义指令directive写一个div移动指令
1、在src/utils目录创建drag.js文件。在注册指令名称时不需要‘v-’；2、在min.js里引入指令。
2024-06-19 14:35:18
386
原创 vue3使用pinia
vuex: 集中式管理状态容器, 可以实现任意组件之间通信;核心概念: state\mutations\actions\getter\modules。pinia: 集中式管理状态容器, 可以实现任意组件之间通信 核心概念: state\actions\getters。pinia类似于vuex, 但相对于vuex少了mutations和modules。
2024-02-20 20:56:29
383
原创 el-select二次封装实现可分页加载数据
使用el-select时一次性渲染几百条数据时会造成页面克顿, 可以通过分页来实现, 这里我用的方式为默认获取全部数据, 然后一次性截取10条进行展示, 滚动条触底后会累加, 大家也可以优化为滚动条触底后发送请求去加载数据。
2023-12-19 18:41:11
1578
原创 vue使用js生成图片验证码
1、创建Identify.vue文件，用来生成验证码。2、在需要显示图片验证码文件里引入。使用canvas生成图片验证码。
2023-11-15 17:37:39
428
原创 js如何获取字符串大小是几M
在上述代码中，getStringSizeInBytes函数接收一个字符串作为参数，并使用Blob对象将字符串转换为字节数组。然后，通过将字节长度除以1024*1024来计算字符串的大小（以兆字节为单位）。最后，将结果返回并打印到控制台。请注意，这种方法计算的是字符串在内存中占用的字节大小，而不是字符串在网络传输中的实际大小。如果字符串包含非ASCII字符或Unicode字符，那么由于编码的原因，实际的传输大小可能会更大。
2023-08-15 15:54:01
2130
原创 el-carousel加载缓慢问题
el-carousel加载缓慢，如果点击下一个或者上一个按钮时，加载速度很快，否则需要等2秒左右才能显示。已经确定不是接口问题，后来各种百度才知道el-carousel会自动添加了一个空的数据。
2023-08-14 09:59:31
747
1
原创 js使用正则表达式去掉标签
在上面的代码中，我们定义了一个 stripHtml 函数，它使用正则表达式 /<[^>]+>/g 匹配所有的 HTML 标签，并使用 replace 方法将它们替换为空字符串。最后，我们将富文本内容传递给该函数，并将返回的纯文本内容打印到控制台上。
2023-08-01 17:36:36
983
原创 nginx配置auth_basic认证
1、下载 httpd 下载地址: https://www.apachelounge.com/download/2、生成密码：打开cmd，进入到 Apache24\bin后其中: G:\nginx\nginx-1.14.2\conf为你自己的nginx位置user为用户名, 可以根据自己的情况定义输入完成后打回车后输入密码, 再次输入密码即可;3、找到nginx.conf文件，在需要做安全认证的地方添加配置完成后重启nginx；
2023-07-28 16:42:30
1218
原创 echarts Cannot read properties of null (reading ‘setOption‘)
可以使用 echarts.init 函数创建 ECharts 实例并在回调函数中调用 setOption 方法，或者使用 setOption 方法提供的第二个参数 notMerge 来控制是否合并新的配置。如果以上方法无法解决问题，还可以尝试检查代码中是否存在 ECharts 实例被重复创建或者销毁的情况，以及是否存在其他代码影响 ECharts 实例的加载和渲染。以下是一个使用 echarts.init 函数创建 ECharts 实例的示例代码。其中，true 表示合并新的配置，不清除旧的配置。
2023-07-18 13:51:31
3677
原创 文字超长省略打点
可以使用css来处理: overflow: hidden;如果想要实现头部省略打点, 尾部完全展示, 可以使用direction: rtl;
2023-07-17 13:58:40
312
原创 使用多次定时器导致页面卡死解决方案
在开发时, 难免会遇到使用定时器定时获取数据, 但是时间久了后会导致浏览器直接卡死, 原因是js的单线程引起的, setInterval不会清除消息队列, 每执行一次都会导致定时器叠加, 直到浏览器卡死, 以下两种方案希望可以帮助您。
2023-07-13 16:32:14
1934
原创 遍历对象并改变对象某个属性的值
遍历对象并改变对象某个属性的值function ergObj(){ let obj = { name: '张三', age: 18, address: '月球' }; for (let attr in obj){ // 打印对象的所有属性和值 console.log(attr+": "+obj[attr]); // 更改对象的name值 attr == 'name' ? obj[attr] = '李
2022-02-18 14:09:29
1967
原创 vue+element-ui实现form表单动态验证是否为空并且验证是否只能输入数组或者小数
vue+element-ui实现form表单动态验证是否为空并且验证是否只能输入数组或者小数<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
2022-02-14 16:32:02
2015
原创 浏览器定时器离开标签是会变慢问题
定时器离开标签是会变慢问题对于不方便使用webSocket的实时页面来说,需要用到setInterval或者setTimeout, 但是在使用他们的时候我们会发现离开当前标签后等待一段时间定时器会变慢,就像休眠状态一样,本来一秒钟执行一次,结果变为一分钟或者更长才执行一次,这个问题困扰了我很久,最终在git上找到解决办法,还不错,来给大家分享一下: 1, 安装 worker-timers npm install worker-timers 2, 导入 import * as worker
2021-06-23 14:49:55
992
原创 vue新建项目
vue新建项目1、 首先查看是否安装node.js在cmd里输入 node -v如果没有安装请到node.org.下载安装即可。2、全局安装vue-clinpm install vue-cli -g3、查看vue-cli是否安装成功 vue -V4、如果出现上图所示，表示已安装成功，下面来创建新项目vue create my-project// myproject代表项目名称，可按自己需求5、到这一步打回车即可，耐心等待。6、到这一步我们已经成功的创建了第一个vue项目，启
2021-03-06 17:15:03
297
原创 vue项目中自动生成二维码
vue项目中自动生成二维码我们在做vue项目时，很多时候要用到生成二维码的功能，今天给大家介绍一个有前端生成二维码的小例子：1、安装vue-qr：npm isntall vue-qr --save2、在组件中引入<template> <div> <vue-qr :logoSrc="imgPath" :text="value" :colorDark="stype" :size="150"></vue-qr> </div>&l
2021-03-06 14:23:40
614
原创 websocket的使用及nginx通信的ws代理配置
websocket的使用及nginx通信的ws代理配置最近在做的vue项目要使用websocket，本文讲述了websocket在vue中使用及打包后使用nginx代理。1、创建vue项目，这里不在详细去说，如果在创建项目时有疑问请访问:link.<template> <div></div></template><script> export default { name: 'socket', data(){ re
2021-03-05 15:29:05
1707
原创 vue子组件调用父组件内的方法
vue子组件调用父组件的方法在子组件里用$emit向父组件触发一个事件，父组件监听这个事件即可父组件<template> <div> <child @fatherFunc="fatherFunc"></child> </div></template><script> import child from './components/child'; export default {
2020-10-22 12:32:04
235
原创 vue使用md5给密码进行加密
vue使用md5给密码进行加密安装md5npm install js-md5 --save在min.js里全局引入md5import md5 from 'js-md5';Vue.prototype.$md5 = md5;在需要使用的文件里进行使用let password = this.md5(123456)注: md5是不可逆的密码加密方式...
2020-09-23 10:29:51
1089
原创 vue使用datepicker封装日历组件
vue使用datepicker封装日历组件安装datepickernpm install vue-datepicker --save新建time.vue页面<template> <div> <myDatepicker :date="startTime" :option="multiOption" :limit="limit" v-model="dataForm.createDate" ></myDatepicker> </div>
2020-09-18 15:24:24
620
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人