分享
扫一扫
超级会员免费看
HuiRonmantic
5年+ 前端老哥，文章只是做一些记录，大家如有需要文章，记得点赞收藏评论哦
展开
-
Vue实现手风琴功能组件 vue 实现折叠面板功能
【代码】Vue实现手风琴功能组件 vue 实现折叠面板功能。原创 2024-10-24 16:51:49 · 377 阅读 · 0 评论 -
Vue 前端导出页面A4大小pdf，Vue前端导出pdf自动切割换页不切割内容 Vue导出页面pdf自动分页和添加页码 导出的pdf提高清晰度
【代码】Vue 前端导出页面A4大小pdf，Vue前端导出pdf自动切割换页不切割内容 Vue导出页面pdf自动分页和添加页码 导出的pdf提高清晰度。原创 2024-09-27 17:05:30 · 798 阅读 · 0 评论 -
Vue 实现原生表格 tr td 动态合并 vue前端原生表格动态合并列 合并行
代码：dataD6List.columnNames是表头数据，dataD6List.datas是表格内容数据。原创 2024-09-26 15:42:53 · 467 阅读 · 0 评论 -
Vue实现自定义进度条占比功能 Vue自定义进度条功能
预览图效果。原创 2024-09-10 16:47:46 · 665 阅读 · 0 评论 -
纯vue+js实现数字0到增加到指定数字动画效果功能
-- 使用v-bind绑定data-target属性 -->原创 2024-07-11 09:18:24 · 694 阅读 · 0 评论 -
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。原创 2024-07-04 13:11:47 · 3122 阅读 · 1 评论 -
前端重点之：Vue+websocket通信详细用法和websocket心跳机制的使用，websocket断开实时监测，websocket实时通信
在前端开发中，WebSocket 是一种常见的技术，用于实现客户端与服务器之间的双向通信。下面我将给出一个使用 Vue2 实现 WebSocket 连接的示例，并包括处理连接中断以及实现心跳检测的机制。首先，你需要在 Vue 组件或混合模块中初始化 WebSocket 连接。以下是一个简单的示例：// 导入 Vue，如果你在 Vue 项目中，这通常不需要，因为 Vue 已经是全局对象或者导入了name: 'WebSocketComponent', // 组件名称data() {return {原创 2024-07-04 11:32:57 · 523 阅读 · 0 评论 -
Vue项目运行页面禁止缩放【移动端和PC端都禁止缩放】解决方案
【代码】Vue项目运行页面禁止缩放【移动端和PC端都禁止缩放】解决方案。原创 2024-05-29 16:11:46 · 1778 阅读 · 0 评论 -
Echarts饼图,柱状图,折线图图例太多，默认选中前5个，图例太多设置翻页滚动效果
代码和预览效果<template> <div :class="[tips == 0 ? 'container-main-container-aside1-div' : 'container-main-container-aside1-div01']" @dblclick="doubleClick"> <div v-if="tips == 0" class="container-main-container-aside1-div5-div1"></d原创 2022-03-24 15:10:04 · 4622 阅读 · 0 评论 -
el-checkbox-group修改默认样式，el-checkbox-group自定义样式案例
el-checkbox-group多选框修改默认样式原创 2022-09-05 09:51:45 · 4196 阅读 · 0 评论 -
Vue实现排行榜前三动态切换图标，排行榜图标动态切换
Vue ，Js，前端实现排行榜前三动态切换图标这可能是个小功能，但是就是想记录一下，希望能帮到你效果图这个功能或许还是比较常见，但是网上好像暂时没有过多的案例,所以做个记录<template>//主体 <div v-for="(item,id) in classLister" :key="id" class="studentslister"> <div v-if="id === 0"> <img原创 2021-04-23 17:57:50 · 5803 阅读 · 6 评论 -
Vue ElementUI el-select 自定义高度
小小的需求，却没有最好的解决办法，此处分析代码最少，最直观的办法，解决el-select自定义高度问题，文字颜色，边框，统统都可以自定义修改直接上代码就是用[ /deep/ ]这个属性，很给力效果图 <div class="subjectleft"> <el-select v-model="value" placeholder="请选择" class="selsectbox"> <el-option原创 2021-04-29 16:29:12 · 7746 阅读 · 4 评论 -
el-tree节点名称太长省略，且鼠标点击显示全部内容，Vue实现
el-tree节点名称太长省略，且鼠标点击显示全部内容这个问题不是很常见，但是目前网上只有一个案例，但是比较粗糙，不是很详细，然后我重新总结一个,效果图代码结构<template> <el-button type="text" @click='quanBu'>全部</el-button> <el-tree ref="tree" :data="knowledgeList" :prop原创 2021-05-25 17:39:42 · 4225 阅读 · 1 评论 -
Echarts折线图、柱状图X轴下文字区域高度设置以及文字过长展示不全
Echarts折线图、柱状图X轴下文字区域高度设置以及文字过长展示不全没设置之前，且文字是一行，换行效果是做了处理处理X轴下方距离左右滑块的距离问题grid属性//为了更直观的显示设置的位置，grid 跟 legend 同一层 grid:{ //直角坐标系内绘图网格 show:true,//是否显示直角坐标系网格。[ default: false ] left:"20%",//grid 组件离容器左侧的距离。 ri原创 2021-06-04 13:37:10 · 9120 阅读 · 1 评论 -
恶心的vscode 保存自动格式，禁止 VScode保存自动格式化
VScode保存禁止自动格式化，这个功能有点恶心，好好地代码一保存就格式乱了，看着很别扭，记录一下处理办法网上教程案例，试过了好几个，都不生效，把我的这个办法记录一下首先打开设置齿轮按钮---->再点击设置----->来到设置面板2.输入框输入保存，点击文本编辑器，再点击setting.json中编辑3.打开setting.json文件以后，在文本中添加 “editor.formatOnSave”: false, 就可以了，记得保存哦，就生效了...原创 2021-12-01 09:54:19 · 10105 阅读 · 2 评论 -
尔雅网课鼠标移出停止播放解决办法
相信好多同学都看过超星尔雅上的网课，但是很不开心的一点就是在看网课的过程中，你的电脑不能干其他事，鼠标移出视频当前播放页，就会停止播放，下面介绍解决办法，直接上教程首先以谷歌浏览器为例，建议用谷歌浏览器，谷歌浏览器设计很不错哦打开你的课程页面，如图所示第二步，进入网页，最好在空白处鼠标右键，点击“检查”3.点击检查所弹出的是浏览器的控制台窗口，这里可以看到代码4：看到这个界面以后...原创 2020-03-09 09:44:48 · 11941 阅读 · 7 评论 -
Element-ui项目打包后icon图标不显示
Element-ui项目打包后icon图标不显示element-ui 自带了一套常用的图标集合，使用起来十分方便。最近发现当 Vue.js 项目中使用 element-ui 图标时，如果使用 npm run dev 方式启动，图标是显示正常的而一旦使用 npm run build 编译打包后发布到服务器上，会发现图片显示不出来（Chrome 浏览器下显示方块查看网络请求可以看到如下两个字...原创 2020-03-13 15:30:46 · 6801 阅读 · 2 评论 -
vue双层for循环，动态绑定唯一id值，vue中for循环，动态绑定dom元素唯一id值
【代码】vue双层for循环，动态绑定唯一id值，vue中for循环，动态绑定dom元素唯一id值。原创 2023-01-06 10:26:55 · 2274 阅读 · 1 评论 -
vue双层for循环,点击孙子元素，滚动到页面可视区域，并设置平滑效果动画
【代码】vue双层for循环,点击孙子元素，滚动到页面可视区域，并设置平滑效果动画。原创 2023-01-06 10:58:44 · 116 阅读 · 0 评论 -
Echarts柱状图如何加Y轴刻度，且刻度线条颜色和文字颜色互不影响
【代码】Echarts柱状图如何加Y轴刻度，且刻度线条颜色和文字颜色互不影响。原创 2023-04-24 14:49:12 · 2344 阅读 · 1 评论 -
Vue + el-upload阿里云文件上传进度条功能，阿里云文件上传切片进度条功能实现，el-upload文件上传真实进度条
阿里云文件上传进度条原创 2023-08-02 09:47:01 · 2061 阅读 · 0 评论 -
v-for 双层循环dom拖拽功能
【代码】v-for 双层循环dom拖拽功能。原创 2023-12-18 13:51:29 · 74 阅读 · 0 评论 -
vue 或js 中解决 window.location.href下个多个文件只下载一个的问题， window.location.href不能同时下载多个文件问题解决
【代码】vue 或js 中解决 window.location.href下个多个文件只下载一个的问题， window.location.href不能同时下载多个文件问题解决。原创 2023-04-24 10:13:30 · 2050 阅读 · 0 评论 -
H5和turn.js实现电子书翻页效果
电子书的翻页效果实现，需要用到H5的插件JS文件turn.js首先看效果图：展示一下文件目录这个效果需要自己下载一个turn的JS文件，我是通过Git的地址clone下载下来的。turn.js完整文件展示然后再自己随便复制一些文字，创建一个data.txt文件，用来模拟获取电子书文字的数据。直接上完整代码：<!DOCTYPE html><html lang=...原创 2020-05-01 09:25:55 · 5557 阅读 · 1 评论 -
Vue多重循环控制当前点击DOM元素样式，默认第一组第一个元素有颜色，Vue实现考试功能，上一题，下一题移动功能，包括题干题目选项回显等
vue实现考试答题功能原创 2022-07-29 15:31:55 · 89 阅读 · 0 评论 -
Vue案例总结之--数据操作双向回显，双向交互，批量操作，复选框数据操作，实时分数计算等
【代码】Vue案例总结之--数据操作双向回显，双向交互，批量操作，复选框数据操作，实时分数计算等。原创 2022-12-28 17:08:08 · 563 阅读 · 0 评论 -
el-tree 修改默认左侧三角图标，并使没有子级的那一项不展示图标
【代码】el-tree 修改默认左侧三角图标，并使没有子级的那一项不展示图标。原创 2023-04-10 18:21:25 · 3044 阅读 · 0 评论 -
Vue 实现页面导出A4标准大小的PDF文件，以及处理图片跨域不能正常展示的问题等
【代码】Vue 实现页面导出A4标准大小的PDF文件，以及处理图片跨域不能正常展示的问题等。原创 2024-02-26 16:18:36 · 1238 阅读 · 0 评论 -
nvm安装以后，node -v npm 等命令提示不是内部或外部命令 node多版本控制管理 node多版本随意切换
文章参考：https://blog.csdn.net/jingjingshizhu/article/details/134395067。原创 2024-03-27 09:21:56 · 2257 阅读 · 0 评论 -
el-calendar自定义日程，显示文字内容，el-date-picker和el-calendar互动互联
效果展示首先el-calendar需要自定义日程内容的话，其格式一般必须满足如下结构{date: '2024-05-08', content: "数学模拟试卷(3)"},{date: '2024-05-08', content: "内容XXXX"},{date: '2024-05-03', content: "内容XXXX"},{date: '2024-05-28', content: "内容XXXX"},结构dom部分-- 日历组件 -->placeholder="选择月"原创 2024-05-13 18:43:11 · 1143 阅读 · 0 评论