vue
解决实战中遇到的各种问题
萌新之路
希望我的文章对您有帮助!!
展开
-
echarts 饼图去掉指示线以及指示文字
echarts 饼图去掉指示线以及指示文字。原创 2023-03-17 10:18:24 · 4660 阅读 · 0 评论 -
实现四块区域显示数据【出处:若依框架】
实现四块区域显示数据【出处:若依框架】原创 2023-03-16 14:58:56 · 467 阅读 · 0 评论 -
封装echarts代码【出处:若依框架改编】
封装echarts代码【出处:若依框架改编】原创 2023-03-16 14:56:44 · 252 阅读 · 0 评论 -
element+vue-baidu-map实现地图标点获取经纬度和地区搜索功能
【代码】element+vue-baidu-map实现地图标点获取经纬度和地区搜索功能。原创 2023-03-15 17:32:48 · 1124 阅读 · 0 评论 -
【解决】element-ui设置表格底部border颜色,不生效
解决element-ui设置表格底部border颜色,不生效。原创 2023-03-13 15:36:29 · 927 阅读 · 0 评论 -
for循环阻塞请求接口(串行请求)
【代码】for循环阻塞请求接口(串行请求)原创 2023-02-15 11:34:44 · 248 阅读 · 0 评论 -
for循环中异步请求问题:循环里面使用异步函数,如何等所有的异步函数都执行完再进行下一步
在一个列表循环里,对数据进行赋值,调用接口,循环外后面的代码需等待所有请求执行完成后再去执行。转载 2023-02-13 13:46:50 · 1044 阅读 · 0 评论 -
antd vue table组件实现合计栏(使用summary无效)曲线救国!!!
【代码】antd vue table组件实现合计栏(使用summary无效)曲线救国!!!原创 2023-01-04 11:43:29 · 1329 阅读 · 0 评论 -
antd-vue 日期选择器 添加快捷选择
antd-vue 日期选择器 添加快捷选择。原创 2022-12-09 10:47:52 · 1053 阅读 · 0 评论 -
antd-vue设置表格悬浮行颜色
antd-vue设置表格悬浮行颜色。转载 2022-11-14 23:41:36 · 538 阅读 · 0 评论 -
vue 实现循环组件按enter获取输入框焦点
vue 实现循环组件按enter获取输入框焦点。原创 2022-11-11 13:47:04 · 487 阅读 · 0 评论 -
iframe调用打印 线上跨域,曲线救国!!!
【代码】iframe调用打印 线上跨域,曲线救国!!!原创 2022-11-07 16:47:04 · 853 阅读 · 0 评论 -
antd-vue table自定义列头
【代码】antd-vue table自定义列头。转载 2022-11-04 10:06:13 · 651 阅读 · 0 评论 -
【解决】antd vue可搜索选择器 搜索的值明明存在,但是显示未搜索到
【解决】antd vue可搜索选择器 搜索的值明明存在,但是显示未搜索到转载 2022-10-21 11:23:07 · 392 阅读 · 0 评论 -
antd Vue 数字输入框控制输入整数、以及只能保留几位小数
【代码】antd Vue 数字输入框控制输入整数、以及只能保留几位小数。原创 2022-10-09 16:21:43 · 2021 阅读 · 0 评论 -
vue-pdf 组件实现 pdf预览效果+点击打印按钮直接弹窗打印指定pdf文件
vue-pdf 组件实现 pdf预览效果+点击打印按钮直接弹窗打印指定pdf文件。原创 2022-09-28 18:03:28 · 1448 阅读 · 0 评论 -
JS 根据出生日期计算岁、月、天;根据岁、月、天计算出生日期。
JS 根据出生日期计算岁、月、天;根据岁、月、天计算出生日期。原创 2022-08-25 14:26:03 · 1288 阅读 · 0 评论 -
js实现表格自动滚动效果(鼠标悬浮在表格上 暂停滚动,鼠标移开继续滚动)
js实现表格自动滚动效果(鼠标悬浮在表格上 暂停滚动,鼠标移开继续滚动)原创 2022-08-08 17:17:37 · 2321 阅读 · 0 评论 -
vue递归组件实现动态多级表头-elementui
vue通过递归组件实现动态渲染elementui多级表头原创 2022-08-02 17:36:16 · 975 阅读 · 1 评论 -
3d饼图实现
实现3d饼图效果原创 2022-08-01 14:38:31 · 905 阅读 · 0 评论 -
自定义百分比显示图(含动画效果)
自定义百分比圆形展示效果原创 2022-07-21 11:31:10 · 232 阅读 · 0 评论 -
自定义渐变色块甘特图
自定义渐变色块,实现多项单行显示(甘特图)原创 2022-07-21 09:54:30 · 526 阅读 · 0 评论 -
html—table(房屋楼层显示以及根据不同类型进行背景颜色区分)
房屋楼层表格显示以及根据不同类型进行背景颜色区分原创 2022-06-09 18:27:27 · 802 阅读 · 0 评论 -
解决vue 本地运行在70%左右停顿很久,运行很慢的问题。
第一步:安装babel-plugin-dynamic-import-nodeyarn add(npm install) babel-plugin-dynamic-import-node --save第二步:修改babel.config.js文件module.exports = { presets: [ '@vue/app' ], env: { development: { plugins: ['dynamic-import-node'] }转载 2022-05-31 09:34:07 · 2045 阅读 · 0 评论 -
记录 js 通用方法
各种js方法实现各种需求原创 2022-05-25 15:06:29 · 157 阅读 · 0 评论 -
使用vue-baidu-map实现地址定位标点及关键字搜索定位(获取地址数据并获取经纬度)
实现效果:关键字搜索或点击地图标点 获取地址数据及经纬度修改表单时::根据数据回填地址显示标点代码背景::vue+antd+vue-baidu-map实现效果:默认选中成都有搜索值时,显示搜索值相关的标点数据有地址标点同时输入了搜索值时,显示搜索值相关数据有地址数据,没有搜索值时,显示地址数据相关标点代码:表单显示:<a-row><a-col :span="12"> <a-form-model-item label=原创 2022-04-29 16:52:40 · 6702 阅读 · 0 评论 -
vue中$set和vue.set() 以及通过数组下标直接修改的区别
数据: item:[“1”,“2”,“3”],//页面元素 <p v-for="(item,index) in item " :key="index"> {{item}} </p> <button @click="demoClickOne">使用数组下标修改触发</button> <button @click="demoClick">使用vue.set方法触发</button> &原创 2022-03-02 10:01:27 · 1918 阅读 · 0 评论 -
js实现文字折叠展开、收起效果
<div @click="open('open','jianjie_text')" v-if="isShow" id="open" style="color:#6EC4F2;font-size:14px;cursor: pointer;">展开</div> <p style="margin:8px 0;font-size:14px;line-height:30px;text-indent:10px;" class="many-txt" id="jianjie_text"&g原创 2021-12-22 13:56:08 · 2921 阅读 · 0 评论 -
node写入图片到本地
node:const fs = require('fs');const express = require('express');const bodyParser = require('body-parser');const expressApp = express();const port = 3010;// 接口expressApp.use(bodyParser.json({ limit: '50mb' }));expressApp.use(bodyParser.urlencoded({原创 2021-12-21 16:11:24 · 2054 阅读 · 0 评论 -
四步快速安装node,npm环境(易懂)
1、下载node-----node官网下载2、安装一路next就行了(默认就行一直next)注:安装路径可以默认可以自行更改3、window+R—cmd ----测试一下npm -v 以及node -v 显示版本号4、分两种情况,视情况选择①或②。①默认地址的直接配置环境变量(我的电脑——右键属性——高级系统设置——高级——环境变量)直接在用户变量path里面新建添加node的安装路径 eg:“C:\Program Files\nodejs”②更改了安装地址的在文件夹里面添加两个文件夹(1、原创 2021-12-13 16:52:48 · 8395 阅读 · 0 评论 -
vue动态路由
需要用到方法:router.addRoute()注:addRoutes被废弃了代码如下:router.beforeEach((to, form, next) => { if(to.path ==="/login"){ return next("/") }else{ if(!hasRoute(to)){//判断是否已经拉取了路由信息 store.dispatch('DYNAMICROUTERS',{}).then(res=>{//接口 if原创 2021-12-13 14:48:14 · 1018 阅读 · 0 评论 -
webSocket 监听服务器返回数据时addEventListener重复监听
sendOut() 代表点击发送消息时触发强调一定要判断一下当前的msg为不为空 因为它有可能会保存到上一次的数据,如下图我在判断到msg不为空的时候(也就是保存的上一次的接收的服务器数据的时候)把当前的侦听器移除封装的socket代码...原创 2021-10-27 16:25:43 · 3050 阅读 · 0 评论 -
手机号获取验证码倒计时
<van-field v-model="phone" required clearable label="联系电话" placeholder="请输入11位手机号码" /> <button id="btnSendCode" @click="sendMessage">获取验证码</button>方法如下://倒计时 sendMessage(){ // let InterValObj; //t.原创 2021-09-17 14:42:41 · 174 阅读 · 0 评论 -
控制微信公众号点击分享按钮时把授权后的参数加入链接一起分享导致没办法进行重新授权
可以通过官方的JS-SDK来解决这个问题1、先通过config接口注入权限验证配置 微信官方文档–配置2、使用下图这两个接口方法可以自定义链接就可以避免以上那个问题 微信官方文档–相应接口配置注入权限常见问题解决思路:常见错误及解决方法注::你传入的url跟后台获取到ticket那些参数后拼接的url应该是保持一致的(可以通过 页面工具 去进行校验)最后完美解决!!!...原创 2021-08-26 15:38:58 · 302 阅读 · 0 评论 -
解决vue+element 需求为:多个菜单指向同一个页面,页面的数据是根据选择的菜单来进行动态渲染
问题:1、根据element文档其中tags标签栏属性index代表菜单唯一性、路由地址2、点击菜单页面数据不重新渲染3、点击菜单进页面时没数据(前提:功能都已经全部完成)解决:1、解决菜单唯一性可以在index参数值后面添加参数(“aaa?ID =” +res.data[i].ID) //因为我这里项目的需求只需要把其中一小块动态渲染就可以了, //所以我这里就直接请求的接口然后直接去push在数组里面的 数组.push({ key:'3-2-'+[i],原创 2021-07-20 15:52:48 · 2686 阅读 · 0 评论 -
echarts 根据选择时段来动态渲染折线图和统计
接口返回数据:[{"TypeName":"费用1","x_data":[0,0,0,0,0.0100,0,0],"total":0.0100},{"TypeName":"费用2","x_data":[0,0,0,0,0,0,0],"total":0},{"TypeName":"费用3","x_data":[0,0,0,0,0,0,0],"total":0},{"y_time":["2021-07-02","2021-07-03","2021-07-04","2021-07-05","2021-07-06"原创 2021-07-09 11:36:07 · 3117 阅读 · 2 评论 -
返回按钮悬浮(类似手机的悬浮按钮)
效果图废话不多说,看代码<div id="container" style="height: 100px;"> <!-- 返回按钮 --> <div @click="onBack" @touchstart="han_down($event)" @touchmove="han_move($event)" @touchend="han_up($event)" ref="actionMgr" class="Click_back" style="width原创 2021-07-09 11:13:18 · 629 阅读 · 0 评论 -
解决element 表单验证不通过的俩大坑
本文章解决本人项目中遇到的俩大坑(希望对遇到同样问题的你们有帮助)问题场景:在封装的表单组件中实现非空验证问题描述:1、修改时失去焦点时验证有作用 然后点击表单提交验证没作用,不管有没有内容,验证都通过2、添加时输入了内容,检查了 :model,prop,ref等都没有问题,但是始终验证不通过提示不能为空3、添加表单验证通过了后,点击提交时对象中的属性全部为空值了解决问题:1、第一个问题导致提交验证失效的原因是因为我嵌套了两层el-form标签导致的(我觉得应该是因为有两层el-form 导原创 2021-06-25 17:07:43 · 3820 阅读 · 0 评论 -
解决:npm run dev 报错`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`????
看下图报错是不是专注去找红色框起来的错误解决方法了,反正我是这样1、换webpack的版本2、 删node_modules重新install3、build里面的这个webpack.dev.conf.js的devServer里面加一句inline:false,都整了,还是报错然后突然看见了蓝色框的那句 然后我给这句代码注释了再npm run dev可以了 嗯。。。...原创 2021-04-28 10:46:01 · 1392 阅读 · 2 评论 -
想在原有的基础上,再次添加一些阿里图标的进坑
1、首先去阿里巴巴图库找你喜欢的图标——添加入库2、选择完所有需要的图标后,添加倒项目中3、找到你的项目 点击下载到本地4、下载完成进行解压,是这样色儿的!!因为在此次添加图标之前我们项目中是有图标的,所以我们只需要以下四个文件就可以了注意:上图这四个文件的名字不要跟项目中本身iconfont的文件名字重复了哦,得修改成不一样名称哦把文件拷进项目中这一步就可以了哦别急还没完!!!别急还没完!!!5、把刚下载的哪个图标文件里面的json文件打开把这一串儿放到之前项目iconfon原创 2021-04-12 14:51:29 · 1753 阅读 · 7 评论