- 博客(96)
- 收藏
- 关注
RSS订阅原创 Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
2024-07-04 13:11:47
893
1
原创 前端重点之：Vue+websocket通信详细用法和websocket心跳机制的使用，websocket断开实时监测，websocket实时通信
在前端开发中，WebSocket 是一种常见的技术，用于实现客户端与服务器之间的双向通信。下面我将给出一个使用 Vue2 实现 WebSocket 连接的示例，并包括处理连接中断以及实现心跳检测的机制。首先，你需要在 Vue 组件或混合模块中初始化 WebSocket 连接。以下是一个简单的示例：// 导入 Vue，如果你在 Vue 项目中，这通常不需要，因为 Vue 已经是全局对象或者导入了name: 'WebSocketComponent', // 组件名称data() {return {
2024-07-04 11:32:57
241
原创 vue前端实现页面禁止缩放 前端适配问题处理 前端项目多端适配解决方案
在前端项目中，如果一个系统页面可以缩放可能会导致多种异常情况，这些异常情况涉及到页面布局、元素尺寸、事件触发、响应式设计和用户体验等方面。1.布局错乱：页面元素在缩放后可能会出现错位、重叠或部分隐藏的情况，导致页面布局混乱，影响用户对页面内容的理解和操作。这可能会使得用户无法顺利地浏览和使用页面上的功能和信息。解决方案：采用响应式设计和弹性布局来适应不同尺寸和缩放比例下的页面展示。使用CSS的flex布局或者Grid布局可以动态适应页面尺寸的变化，确保页面布局在不同缩放情况下依然能够保持合理的排列和显示
2024-06-03 14:22:35
273
原创 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
619
原创 nvm安装以后，node -v npm 等命令提示不是内部或外部命令 node多版本控制管理 node多版本随意切换
文章参考：https://blog.csdn.net/jingjingshizhu/article/details/134395067。
2024-03-27 09:21:56
1016
原创 Vue 实现页面导出A4标准大小的PDF文件，以及处理图片跨域不能正常展示的问题等
【代码】Vue 实现页面导出A4标准大小的PDF文件，以及处理图片跨域不能正常展示的问题等。
2024-02-26 16:18:36
1054
原创 Vue + el-upload阿里云文件上传进度条功能，阿里云文件上传切片进度条功能实现，el-upload文件上传真实进度条
阿里云文件上传进度条
2023-08-02 09:47:01
1627
原创 Echarts柱状图如何加Y轴刻度，且刻度线条颜色和文字颜色互不影响
【代码】Echarts柱状图如何加Y轴刻度，且刻度线条颜色和文字颜色互不影响。
2023-04-24 14:49:12
1746
1
原创 vue 或js 中解决 window.location.href下个多个文件只下载一个的问题， window.location.href不能同时下载多个文件问题解决
【代码】vue 或js 中解决 window.location.href下个多个文件只下载一个的问题， window.location.href不能同时下载多个文件问题解决。
2023-04-24 10:13:30
1637
原创 el-tree 修改默认左侧三角图标，并使没有子级的那一项不展示图标
【代码】el-tree 修改默认左侧三角图标，并使没有子级的那一项不展示图标。
2023-04-10 18:21:25
2402
原创 el-input-number修改默认上下图标，el-input-number修改默认增减图标
【代码】el-input-number修改默认上下图标，el-input-number修改默认增减图标。
2023-04-10 15:40:40
824
原创 vue双层for循环,点击孙子元素，滚动到页面可视区域，并设置平滑效果动画
【代码】vue双层for循环,点击孙子元素，滚动到页面可视区域，并设置平滑效果动画。
2023-01-06 10:58:44
67
原创 vue双层for循环，动态绑定唯一id值，vue中for循环，动态绑定dom元素唯一id值
【代码】vue双层for循环，动态绑定唯一id值，vue中for循环，动态绑定dom元素唯一id值。
2023-01-06 10:26:55
2108
1
原创 Vue案例总结之--数据操作双向回显，双向交互，批量操作，复选框数据操作，实时分数计算等
【代码】Vue案例总结之--数据操作双向回显，双向交互，批量操作，复选框数据操作，实时分数计算等。
2022-12-28 17:08:08
487
原创 element-ui中 this.$confirm修改确定取消按钮顺序和样式
【代码】element-ui中 this.$confirm修改确定取消按钮顺序和样式。
2022-10-31 17:54:26
1731
原创 el-checkbox-group修改默认样式，el-checkbox-group自定义样式案例
el-checkbox-group多选框修改默认样式
2022-09-05 09:51:45
3675
原创 Vue多重循环控制当前点击DOM元素样式，默认第一组第一个元素有颜色，Vue实现考试功能，上一题，下一题移动功能，包括题干题目选项回显等
vue实现考试答题功能
2022-07-29 15:31:55
62
原创 Echarts多排柱状图动态处理，动态渲染数据处理
后端返回的数据格式是一般的数据格式，前端处理还是比较复杂，此处做个记录数据格式效果图 X轴年月和每一组的柱状图条数都是动态的代码中的输出数据格式代码getData就是获取后端数据的接口 getDataval).then((res) => { if (res.code == 200) { var main = [] var arr3Year = [] var dataYList = []
2022-05-18 09:22:30
3412
原创 JS 删除“[ ]“数组格式的字符串中的 “ ” [ ] ,JS删除指定字符
大概的数据格式就是，数组格式的数据，但代码 val.data.forEach((element) => { if (element.detailName == '版本名称') { console.log('数据1', element.detailValue) console.log('数据1格式', typeof element.detailValue) ar
2022-05-17 16:02:52
1696
原创 el-date-picker比较两个时间值大小，el-date-picker循环组件比较两个时间值大小
el-date-picker比较两个时间值的大小，el-date-picker循环组件比较时间值的大小change事件用于时间比较值dom部分 <el-row> <el-col :span="12"> <el-form-item label="*开始时间:"> <el-date-picker
2022-05-05 14:07:38
1851
原创 Vue中computed多个值互相计算，Vue多个字段之间互相计算，vue多个值互相引用计算
需求：computed计算属性的应用一般会是几个互不影响的值计算，本次需求是多个值互相引用计算效果图注：computed多个值单独已用计算时，会报错，Vue computed 报错：Computed property was assigned to but it has no setter 解决办法就是 换一种写法，组件中定义的computed属性缺少setter,使用过computed 都应该知道，该错误提示通常发生在组件内为computed属性赋值的时候，如果没有显示的声明setter，控制台则会
2022-04-28 20:18:06
4093
1
原创 Vue element-ui 全局配置时间戳转换正确日期
使用和安装moment.js 即可npm install moment -Soryarn add moment -S在main.js全局引入注册使用这个插件import moment from "moment";// 全局过滤器的定义Vue.filter("global_filter", function(value, type = "YYYY-MM-DD hh:mm:ss") { return moment(value).format(type);});使用：单标签使用&
2022-03-30 17:19:08
640
原创 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
4085
原创 Vue，js前端实现语音实时转换文字，前端实现浏览器语音实时转换为文字，vue阿里云语音转文字
Vue，js前端实现浏览器语音实时转换文字功能详解1.首先总结一下，前端使用实时语音需要使用到HZRecorder.js这个JS文件来实现获取浏览器麦克风话筒权限大注意：HZRecorder.js获取话筒权限如果你在本地运行会发现正常可以使用，在发布线上不能用，那是因为线上地址不是https域名，不安全，所以浏览器默认不会给话筒权限2.HZRecorder.js文件;(function (window) { //兼容 window.URL = window.URL || window.web
2022-03-24 09:24:06
11326
原创 Echarts 折线图拐弯处竖线解决办法，Echarts 折线图二次查询出现竖直线解决办法
Echarts 折线图拐弯处竖线解决，奇葩现象，在有滚动条的情况下，不是100%的展示比例区间就会出现这种情况，二次查询可能会出现竖线的情况方案一：dataZoom中添加filterMode: ‘empty’,属性dataZoom: { show: true, realtime: true, height: 15, start: 20, end: 80, bottom: 0, filterM
2022-02-24 10:09:16
2691
1
原创 Vue 导出table表格为Excel
vue中使用file-saver导出文件来源1：https://blog.csdn.net/mouday/article/details/111958466来源2：https://blog.csdn.net/qq_30671099/article/details/104052782下载事件 exportToExcel4New() { let tables = document.getElementById('out-table4new') let table_book
2022-01-06 13:48:08
902
原创 Echarts中 vab-chart 以全局组件使用时，获取Echarts实例，使用this.myChart.setOption （）
Echarts 以全局组件使用时，获取Echarts实例，使用this.myChart.setOption （），用于解决二次查询销毁上一次的图表代码图代码legendselect(params) { var echarts = require('echarts') //起作用的地方 var originChart = document.getElementById('main') //起作用的地方 if (params.name ==
2021-12-23 16:45:04
2425
原创 Echarts 折线图或者其他图表切换数据时，有残留，Echarts二次查询残留上次数据解决办法
概述：如果首次查询的折线图有8条，二次查询的只有5条，刚开始还以为是后端传错了，结果查看以后，后端数据返回的数据条目是对的，那问题肯定就是前端的了，本以为每次查询清空所赋值的对象或数组，也不行。结果了解以后是Echarts渲染的问题。原因：折线图setOption时，默认对option进行合并，所以即使一次选择一条数据渲染时（除了首次）也会数据重叠显示多条折线解决方案1：根据api上说的，notMerge参数默认为false，设置成true，只要不让它合并数据那么问题就解决了mychart.se
2021-12-23 11:37:59
4974
4
原创 el-select 多选，清空，选择“全部”其余清空，取消全部，其余还原
el-select 多选，清空，选择“全部”其余清空，取消全部，其余还原记录一下 <el-form-item v-show="formData.pushScope == '个人'" label="选择学生:"> <el-select id="newStyle" v-model="formData.studentIdList" multiple pla
2021-12-22 16:02:00
5079
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人