HuiRonmantic
5年+ 前端老哥,文章只是做一些记录,大家如有需要文章,记得点赞收藏评论哦
展开
-
vue前端实现页面禁止缩放 前端适配问题处理 前端项目多端适配解决方案
在前端项目中,如果一个系统页面可以缩放可能会导致多种异常情况,这些异常情况涉及到页面布局、元素尺寸、事件触发、响应式设计和用户体验等方面。1.布局错乱:页面元素在缩放后可能会出现错位、重叠或部分隐藏的情况,导致页面布局混乱,影响用户对页面内容的理解和操作。这可能会使得用户无法顺利地浏览和使用页面上的功能和信息。解决方案:采用响应式设计和弹性布局来适应不同尺寸和缩放比例下的页面展示。使用CSS的flex布局或者Grid布局可以动态适应页面尺寸的变化,确保页面布局在不同缩放情况下依然能够保持合理的排列和显示原创 2024-06-03 14:22:35 · 210 阅读 · 0 评论 -
Echarts实现半圆形饼图,Echarts实现扇形图
【代码】Echarts实现半圆形饼图,Echarts实现扇形图。原创 2024-05-31 14:25:51 · 292 阅读 · 0 评论 -
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 · 4024 阅读 · 1 评论 -
Vue ElementUI el-select自定义图标,左右任意自定义加图标
本来人家官方的组件我们前端就觉得特好看了,但是每个公司都有特别执拗的UI,硬是要换样式,你只能换了这个下拉框中左右自定义图标,网上好多案例说的不清楚,且实现起来相当麻烦看下我的效果图上代码,基于Vue项目 <div class="subjectleft"> <el-select v-model="value" placeholder="请选择" class="selsectbox"> <el-opt原创 2021-04-29 17:24:16 · 10079 阅读 · 4 评论 -
Vue全局捕获后端接口异常并将提示语句显示
Vue 全局捕获后端接口抛出的error,并以提示框的形式显示这个是比较常见的问题,但这种东西一般都在配置项里,如果不是很了解配置项的话还是不容易找到对应的位置提示类型首先得知道vue+axois 封装请求+拦截器的配置,然后一般全局捕获在instance.interceptors.response.use()中去做相应的处理。其中的response参数,就是每次调用接口可以触发的后台接口返回的状态码以及值instance.interceptors.response.use( (respon原创 2021-05-21 10:25:41 · 8916 阅读 · 1 评论 -
Vue Element-ui中el-select,el-cascader多个关联选中查询数据,就是上一个选中,下一个根据上一个的条件渲染自己的数据
el-select,el-cascader多个之间列表相互关联效果图代码结构<template> <span class="ml32">教师</span> <el-select v-model="teacher" placeholder="请选择教师" style="width: 150px;" filterable > <el-option v-for="(item,index) in teache原创 2021-06-07 15:04:52 · 1779 阅读 · 0 评论 -
Vue Element-ui中el-tabs,el-tab-pane切换改变字体颜色,自定义颜色等
Element-ui中el-tabs,el-tab-pane切换改变字体颜色,以及自定义下方条状的颜色等样式效果代码结构<template> <div class="main"> <el-tabs v-model="activeName" class="box"> <el-tab-pane label="视频" name="video"> <CourseVideo></CourseVideo&g原创 2021-06-09 17:35:44 · 15399 阅读 · 0 评论 -
Vue,JS判断数组中的对象的每一个值不能为空,判断数组中的每一层对象的某一个字段属性值不能为空或其他条件
Vue,JS判断数组中包含的每一层对象的某一个属性值不能为空或者其他终极大法:就是用every,some遍历数组,区别:every只要有一项不满足条件都返回false some有一项满足都会返回true这种操作一般用来操作列表,提交数据时需要判断某一个字段不能为空等条件此次案例:在点击最下方的提交时,需要判断红色框内的每一个分数不能为空方法一:使用every()函数,此函数不怎么常用,想要了解更多请自查注:其实判断这种列表中的数组,用for循环也可以,但是最终的效果是判断数组中的对象,只提示一个原创 2021-08-05 11:06:02 · 8321 阅读 · 0 评论 -
Echarts中鼠标悬浮提示语tooltip数据保留2位小数,或tooltip数据加单位,加%
关于Echarts的tooltip配置项的小结tooltip的值配置保留2位小数,且数据后面添加%或者其他单位图示:代码: tooltip: { trigger: 'axis', //核心代码,处理tooltip中的数据需要在此formatter函数中做处理 formatter(params) { var relVal = params[0].name; fo原创 2021-11-16 15:46:36 · 6183 阅读 · 1 评论 -
Echarts雷达图自定义添加的“全选”图例,全选勾选情况下,悬浮窗禁止显示,提示框显示错误Bug解决方案,雷达图的数值添加 %
Echarts用了很多类型的图表了,才发现雷达图和其他柱状图折线图还真不一样,此次记录的问题是Echarts自定义添加的“全选”图例,全选勾选情况下,提示框显示错误Bug解决方案,雷达图的数值添加 %效果图当勾选全选,鼠标放在最中间,之前的问题是这样的,有数据展示但是是错误的之所以不好处理,是因为雷达图中的series中的data的value值只能为数字,不可以百分比,所以%只能前端拼接添加了,其次折线图,柱状图的formatter所带参数输出的seriesName为当前的正确数据,而雷达图的所有原创 2021-12-09 15:12:19 · 1550 阅读 · 0 评论 -
Vue2 环境下安装Vue3 ,同一台电脑同时安装vue2 和vue3
目前大多数老的项目还是以vue2.0版本为主,在vue3的环境下vue2的项目又不能运行,因此Vue2 和Vue3两个版本同时存在显得尤为重要,本博客为转发博客,非常详细博客1:https://blog.csdn.net/Jioho_chen/article/details/90455778博客2:https://blog.csdn.net/lb1135909273/article/details/100132670原创 2021-12-16 09:06:18 · 14410 阅读 · 9 评论 -
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 · 2378 阅读 · 0 评论 -
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 · 2641 阅读 · 1 评论 -
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 · 11053 阅读 · 0 评论 -
el-tree点击,获取当前节点和其所有子节点的id,el-tree点击获取所有节点id
el-tree点击获取所有节点id,再自己做之前查过其他博客,都不是很详细,主要是不简洁,在此写出我的方法首先展示el-tree的数据结构以及字段,此处是获取后端的动态tree.因此字段有所不同,参考着根据自己实际情况而定点击选中,并筛选所有选中的父级,子级,孙子级Id。 //el-tree树形结构 <div> <el-tree ref="tree"原创 2021-07-07 14:23:15 · 10297 阅读 · 9 评论 -
el-tree前添加图标,el-tree只从第二级添加图标,el-tree添加增删改图标
el-tree是特别常见的组件,一般要求给每一级文字前面添加图标,从第二级开始添加删除,修改图标增删改的图标都是当鼠标悬浮在当前节点之上才显示!先展示下效果图第二级添加删除,修改图标代码结构<template> <!-- 节点树结构 --> <div class="treeBox"> <el-tree ref="tree"原创 2021-07-30 17:32:37 · 3940 阅读 · 2 评论 -
Element-ui + Vue 省市区街道/镇四级联动组件
Element-ui + Vue 省市区街道/镇四级联动组件由于全国范围内的省市区四级联动数组十几万个,JS数组相当庞大,因此我讲代码文件以网盘的形式分享分享链接:https://pan.baidu.com/s/1vhwlacv6YyAstsYSGJS0ig 密码:6zsg效果截图部分代码预览...原创 2020-08-12 14:53:00 · 5322 阅读 · 2 评论 -
Element-ui中el-select选择值,同时改变另外一个input框中的对应值
需求:通过下拉框选中销售员的名字,改变与之对应的另外一个input框中销售经理的名字上图:此需求简单,但是想记录一下**template中的代码**<el-form-item label="销售经理" prop="SalerManager" :label-width="formParams.formLabelWidth"> <el-input v-model="data.SalerManager" placeholder="请填写销售经理" auto-complete原创 2020-05-13 15:32:59 · 11427 阅读 · 1 评论 -
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 · 6599 阅读 · 2 评论 -
Vue中post请求接口时,以数组的形式传参处理方法
摘要:一般很多情况下,vue中请求接口的时候,data传参是都是字符串的形式,很少有以数组的形式,但是今天就遇到了,后端写接口的人也是真的傻X啊。描述下需求:公司业务需要,需要做一个交货单核验的功能,意思就是利用条形码扫描仪扫描交货单上面的条形码,将扫描的结果通过事件提交给后台,然后后端判断结果如图所示是所需要的设备,虽然这与本章博客主要内容无关,哈哈部分截图后端给的说明文档:代码片段<template> <div class="form-content"&原创 2020-08-22 16:32:53 · 16661 阅读 · 4 评论 -
Element-ui分页之:page-sizes使用无效解决办法
Element-ui的表单组件还是相当好用的,其中分页:page-sizes的使用容易踩坑,在此做个记录刚开始的时候看着文档,直接拉过来就使用,默认显示的条数页是好的,切换其他条数就不显示数据了,也不报错,所以还是有点小坑的!效果展示上代码 <template> <!--表格主题--> <el-table ref="multipleTable" v-loading="loading" element-loading-text="拼命加载中原创 2020-08-27 16:54:38 · 12661 阅读 · 6 评论 -
element-ui中el-select的value值传参时为数字的vue解决办法
在使用el-select组件的时候,el-option选项中的label和value的值分别是对应的,但是value的值需要在传参的时候,后端需要的是数字,不是字符串首先这种写法,传的参数在后台是字符串的value=“1” 这种直接赋值的方法是传的是字符串<el-form-item label="核对状态" prop="State" :label-width="formParams.formLabelWidth"> <el-select v-model="d原创 2020-08-29 10:14:12 · 17213 阅读 · 11 评论 -
Element-ui 中日期组件 <el-date-picker> 传两个值
组件是一个可以同时选择两个日期的组件,分别为其实日期和终止日期,但是组件绑定值只能绑定一个,就需要其他办法为其绑定两个值,并传给后端样式展示代码:<template><!--查询条件主体--> <div class="form-content"> <el-form :inline="true" :model="data = data01.Content" ref="data02"> <el-form-it原创 2020-12-19 16:36:09 · 10844 阅读 · 6 评论 -
Vue点击确定或保存以后刷新当前页面
Vue点击事件刷新当前页面1:方法一 window.location.reload(); 注意:此种方法点击刷新页面以后,网页的当前页面会有短暂的留白效果2:方法二this.$router.go(0)注意:此方法代码简洁,但还是有刷新页面以后短暂留白的效果...原创 2019-09-10 09:49:52 · 6524 阅读 · 0 评论 -
Element-ui中el-table中有form表单元素,实现点击动态添加行
1:在通过用Element—UI加Admin做后台管理系统的时候,有个需求就是在el-table中的表格中还需要加上form表单元素,比如input元素,且需要点击添加行信息需要实现动态添加行效果案例图此处是列表项的源码<!--表单添加--><el-button type="success" @click="AddListRow()" round>添加行信息&l...原创 2019-09-16 13:48:45 · 19100 阅读 · 9 评论 -
Vue+Element-ui中el-switch组件,改变数据状态且初始化
el-switch使用过程中,通过触发开关按钮,数据更改成功,但是按钮一直是默认的一种状态,因此需要数据和开关状态同时改变,所以每次操作对应的信息时要初始化按钮开光状态。以下是效果图此处是一个el-dialog真的弹出框,此处省略与本要点无关的代码,只放el-switch的相关代码,此处的data04.Content是请求数据所传的值,用CusData 代替data04.Content,而d...原创 2019-10-23 15:58:10 · 10750 阅读 · 1 评论 -
钉钉实时拍照和上传图片
钉钉实时拍照&图片上传功能的官方接口的使用在项目中有个需求,基于Mint-UI做的钉钉微应用接口,有个功能是实时拍照的功能和既能拍照又能上传图片的功能1:只允许拍照功能,接口:biz.util.uploadImageFromCamera首先在使用钉钉接口时,需要现在main.js文件中,当配置好微应用的SDK之后,将所用功能接口注册,此项为必填项。注意:需要使用的jsapi列表,注...原创 2019-10-30 17:02:17 · 12375 阅读 · 5 评论 -
node环境下使用import引入外部文件出错
**由于没有熟知ES6新语法,其中node.js环境下是不支持import的使用。ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。因此详细了解这个问题至关重要,要不然很容易采坑******解决方案参考大...原创 2019-12-20 09:33:01 · 4255 阅读 · 0 评论