自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(84)
  • 收藏
  • 关注

原创 vue2点击菜单跳转对应页面(路由应用)

vue2点击菜单跳转对应页面(路由应用)

2022-08-10 13:49:27 4365 1

原创 echarts通过dataZoom,实现x轴和y轴放大缩小(亲测可用)

为满足项目需求,要求echarts图表实现和示波器曲线图一样的效果,x轴和y轴的数值可放大缩小,且x轴下方还要进度条,可以进行拖动显示。1.x轴放大缩小:效果图1:2.Y轴放大缩小:2.效果图: 3.x轴和y轴都可以缩放3.效果图:4.实现x轴下方滚动条拖拽(图例效果不好,是因为数值太少) 效果图:...

2022-06-23 15:34:41 14658 1

转载 Vue3实现弹窗拖拽(亲测有效)

取消遮罩层::modal="false"点击弹窗外其它地方,不关闭弹窗::close-on-click-modal="false"效果:(实际上没有这些灰色块块的,是录制工具的原因)

2022-06-21 14:06:26 2356

原创 vue,按钮控制div显示与隐藏

不懂语法,写法粗糙,用作个人小记。需求原因,展示的按钮分开,会更利于操作。测试效果: 项目效果:

2022-06-10 13:53:59 4911

原创 HTML页面引入ElementUI库时样式失效的解决方法(亲测可行)

HTML页面引入ElementUI库时样式失效的解决方法(亲测可行)

2022-06-07 10:44:20 5442

转载 vue中设置echarts单个或多个宽度自适应(亲测有效)

转载:https://juejin.cn/post/6976483868689825805

2022-05-17 17:23:20 1625

转载 VSCode搭建Vue项目

转载:VSCode搭建Vue项目 - 停车坐爱枫林晚 - 博客园

2021-10-11 14:00:43 119

原创 VUE引入图片

勿喷:这个网上教程很多,但是上次找的教程前几个的内容都一样,但是方法没有写全导致使用的时候一直报错,自己记录一下常用的<template> <div class="sched_content"> <img :src="imgU1"> </div></template><script>import imgU1 from '@/assets/imag

2021-09-29 15:33:57 61

原创 vue的v-if实现静态布局的循环出现

最近写页面,设计里面有很多模块布局一样,利用v-if实现循环效果。需要注意的是:每个模块里面有一个小图片不一样。核心代码:<template> <div class="sched_content"> <div class="app-alarm"> <el-date-picker v-model="value1" type="week" format="yyyy 第 WW 周" placehold.

2021-09-29 15:15:08 443

原创 勿喷:thinkphp项目怎么跑起来

只是记录自己的囧事,路过的家人们别喷。一个新开的小公司用什么框架,往往取决于招到的第一批程序员。3年前公司官网用的thinkphp,现在用的java,因为语言不一样,现任后台并不愿意动前任后台的代码。最近换电脑了,官网的项目跑不起来,当忘了当年怎么跑的,找了很多教程,拼拼凑凑,磕磕绊绊才成功,下面是教程;1.安装phpStudy的程序集成包2.打开该软件所在的www位置,把项目拖进去;3.打开mysql管理器,导入数据库,记得配置要和项目中的config.ph...

2021-08-26 15:33:08 4035

原创 ps图片导svg,并上传到阿里图标库

之前一直用的Inksacpe转的,但是在删除背景时,图片极其容易虚化变形。最近发现ps导出的svg,也可以上传到阿里,最关键的一步是先把图片“形状化”。教程如下:1.打开ps,导入需要转换的图片;2.用快速选择工具,选中图片形状;3.在图片上单击右键,选择“建立工作路径”;4.点击左侧“钢笔”工具,并在图片上单击右键,选择“自定义形状”;5.点击左侧“矩形”工具,选择“自定义形状工具”,会发现顶部导航的“形状”处,会出现和图片一样的形状,如果没...

2021-07-16 15:36:44 2441 5

转载 亲测有效:用手机扫描HBuilderX 内置浏览器的二维码,电脑web浏览器可以显示,但在手机预览打不开。

原文网址:https://ask.dcloud.net.cn/question/71971解决办法:(1)打开CMD,,输入ipconfig /renew ,查看ipv4的地址复制下来(2)然后打开hbuilderX的浏览器,把里面的ip地址替换为刚刚查找到的ipv4的地址,把这个新的地址发给手机,手机和电脑同一个wifi,这样就可以打开了替换前:替换后:此时再点击二维码访问,手机上就能够预览了...

2021-06-22 09:52:21 3865 4

原创 vant-picker下拉选择器内添加图标

原因:根据设计需要实现带下拉标志的选择器,事实:但vant现有的单级下拉选择框,并没有带图标的。结果:网上没找到合适的案例,但发现框架的这个属性:right-icon="arrow",left-icon="arrow",用法如下:<van-field readonly clickable label="城市" :value="value" placeholder="选择城市" @click="showPicker = true" right-icon="arrow"/><v

2021-05-13 16:27:33 1315

转载 VUE写原生表格样式

转载网址:https://www.jb51.net/article/167065.htm

2021-04-09 09:26:28 1172

原创 解决:安装html-loder后,运行报错Error: Failed to compile with 1 error

项目创建过程中,因为vue.config.js的配置里引用了html-loder,且项目运行时,也提示需要安装html-loder,但安装后,再次运行,就报错Error: Failed to compile with 1 error,网上尝试了几种方案,没起效,但偶然发现降了一下版本,就好了。htnl-loder降版本语句:npm install [email protected] --save-dev安装之前:安装后,运行报错:降版本后,在运行:降版本语句:npm inst

2021-03-25 18:57:59 6893

转载 解决vue中安装postcss-pxtorem插件,报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”

过程:创建vue新项目,安装Vant组件库后,需要使用rem单位,所以接着安装postcss-pxtorem 插件,但是项目运行就报错“Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”了,找了多种解决方案未起效,最终通过这位大佬的方法,成功解决,该大佬的文章地址https://www.cnblogs.com/liangziaha/p/14492288.html运行后的测试页面如下:...

2021-03-11 19:50:00 26016 16

原创 解决vue创建新项目与版本查看,都报错“internal/modules/cjs/loader.js:1032 throw err;”

废话有点多,请忽略:今天创建vue新项目时,出现一个奇怪的报错“internal/modules/cjs/loader.js:1032 throw err;”,接下来的现象刷新了我的认知,不论是查看vue版本,还是重装vue,都会报错。在网上找了各种方案,折腾好久,最后还是求助了我的大佬同事。我的报错如下:卸载vue后,重装vue,安装失败并报错如下:解决方案:注意:电脑用户名,请记得改成自己的,如图所示:1.删除残留文件,命名语句:del /s /q C:\Users.

2021-03-10 10:08:57 5532 1

原创 vue实现tab切换时,echarts宽度自适应

<template> <div class="FillFluidReal-subject"> <el-card class="box-card"> <div slot="header" class="clearfix"> <i v-show="switchBtnTab == 0" class="iconfont iconshijian1"></i> <i v-sho.

2021-01-26 18:02:19 642

原创 亲测很实用:v-show实现tab切换

项目需求:实现内容切换的同时,按钮样式,模块对应的图标和标题都要跟着变化。我的样式是之前写好的,请看效果即可,具体样式根据自己的需求去写。对应代码如下:<template> <div class="FillFluidReal-subject"> <el-card class="box-card"> <div slot="header" class="clearfix"> <i v-sh

2021-01-26 17:41:10 1892

原创 亲测可用:VUE实现图标按钮单选效果

图标显示参考:https://blog.csdn.net/weixin_42040328/article/details/106260267目标:按钮带图标,实现单选功能。注:我的图标用的是阿里图标。 <div class="container"> <div class="btn" v-for="(item,index) in info" v-bind:key="item.id"> <!-- 循环内容 --> &.

2020-12-23 17:28:51 1006

原创 vue实现单击选中效果

<button type="button" class="changeBtn" :class="{'activeBtn':isLife}" @click="isLife = !isLife">抬动</button><style>.formText .changeBtn{ margin-left: 1.2rem; color: #aeaeae; border-color: #939393; background: #fff;}.f.

2020-12-22 16:23:58 1249

转载 前端练习:免费开放的API接口

转载于知乎:推荐gayhub上得一个项目,https://github.com/fangzesheng/free-api,上面有很多免费的API;为了方便广大的开发者,特此统计了网上诸多的免费API,为您收集免费的接口服务,做一个api的搬运工,以后会每月定时更新新的接口。有些接口来自第三方,在第三方注册就可以成为他们的会员,免费使用他们的部分接口。百度AccessToken:针对HTTP API调用者,百度AIP开...——接口地址语音识别:通过场景识别优化,为车载导航,智能家居和....

2020-11-24 17:52:40 7283 2

转载 免登陆:利用JS模拟POST方式提交请求的方法

转载自:https://blog.csdn.net/qq_33858250/article/details/84168841?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduend~default-1-84168841.nonecase&utm_term=js%E6%A8%A1%E6%8B%9Fpost%E6%8F%90%E4%BA%A4%E8%A1%A8%E5%8D%95&spm=1000

2020-11-09 16:24:34 874

原创 修改element-ui tree树结构前的图标,及树形结构的样式

因项目需求,需修改tree树结构的图标,以及树形的字体样式等;代码如下:<template> <div class="FormMaintain"> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"> <span class="custom-tree-node" :class="data.class" slot-s

2020-11-06 15:11:19 4315

原创 亲测有效:echarts柱状图,更改指定柱子颜色

问题:项目要求柱状图最后三个柱子给指定颜色,话不多说,直接贴代码了var data1 = ['800', '1200', '1000', '840', '1320', '960', '750','800', '900', '1000', '1200', '1102', '1003', '1014','1015', '856', '917', '818', '919', '920', '821', '822', '923', '924','825', '926', '827', '82

2020-08-15 17:09:23 9771 2

转载 vscode: Visual Studio Code 常用快捷键

转载vs code快捷方式大全:https://lzw.me/a/vscode-visual-studio-code-shortcut.html目录[隐藏]主命令框 常用快捷键 编辑器与窗口管理 代码编辑 格式调整 光标相关 重构代码 查找替换 显示相关 其他 修改默认快捷键 更多参考主命令框F1 或 Ctrl+Shift+P : 打开命令面板。在打开的输入框内,可以输入任何命令,例如:按一下 Backspace 会进入到 Ctr

2020-06-23 15:42:21 832

原创 VUE菜鸟视频:2018妙味vue.js(vue-router vuex vue-axios)部分

妙味课堂链接(我自己看的是这个):https://pan.baidu.com/s/1gFF8jL_APUWabf6PRKTIrA 提取码:zinc本人搜集的Vue教学视频:https://pan.baidu.com/s/1moaCO9AA62rfZtXEF3wx3w提取码:ls2q菜鸟贴上自己练习的路由效果图:...

2020-06-19 11:44:33 192

转载 vue-cli脚手架目录介绍

转载静静是小花:https://www.cnblogs.com/hongdiandian/p/8311645.html再看看build文件夹下相关文件及目录:config文件夹下目录和文件:接下来说说vue-cli项目中页面相关的主要文件^o^首先是index.html:说明:一般只定义一个空的根节点,在main.js里面定义的实例将挂载在#app节点下,内容通过vue组件填充。App.vue文件:说明:app.vue是项目的主组件,所有页面都是在...

2020-06-18 15:18:19 150

原创 echarts4.8.0最新版本下载,亲测可用

echarts4.8.0最新版本下载:百度网盘: https://pan.baidu.com/s/1UTw6mHwXzuBWT5lnYfMLAg 提取码:9vqv

2020-06-12 16:47:34 4966 1

原创 亲测有效:解决inkscape转换的svg图标,上传到阿里图标库不显示问题

近期项目需求,需要把UI设计的图片转为图标,且合并到阿里现有的项目图标中。踩坑:试了好多次,SVG上传到阿里图标的都是空白的;注意:别用网上在线转SVG的图标,试了好多上传时都是空白实现方案:1.准备好图片转换工具inkscape;2.登录阿里图标;1.inkscape 0.92.3的中文版安装教程如下:百度网盘: https://pan.baidu.com/s/1sVzQiKcrXZf1SO93rU9Jmg提取码:swxf2.inkscape 0.92.3使用教程如

2020-06-03 17:10:26 2528 2

原创 亲测有效:layui实现同页面多个弹出框,且弹框间互不影响

起因:因项目需求,用layui写静态页面时,发现页面中有多个弹框效果,且每个弹出框内容各不相同,粘了框架的“居中弹出”方法,但发现不管点击哪一个按钮,出现的都是第一个弹出框内容。解决方案:无奈下,找了公司的前端大佬,她修改后的小deom如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=

2020-05-19 11:23:57 6323 2

原创 亲测有效:点击button按钮时,禁止刷新页面

事件描述:在点击按钮时,页面总会刷新。解决前:<button class="layui-btn">查询</button>解决后:方案:加入 type="button",其实框架自带的有这么一句,只是自己不小心删除了<button class="layui-btn" type="button">查询</button>效果:没加前:加了之后:...

2020-05-13 14:58:59 3805 3

转载 解决滚动条挤压页面宽度

转载:https://blog.csdn.net/weixin_34112208/article/details/88731678解决办法如下:html { overflow-y: scroll; //这是为了兼容ie8,不支持:root, vw} :root { overflow-y: auto; overflow-x: hidden;} :root body ...

2020-01-02 15:20:14 743 1

转载 亲测有效: element的经过导航栏时变成一片灰白色

转载:https://blog.csdn.net/Beam007/article/details/91047291

2020-01-02 10:34:20 1061

原创 vue中echarts图表宽度自适应,亲测有效

实现宽度自适应语句://实现自适应部分window.onresize = () => { this.$echarts.init(document.getElementById('newEcharts')).resize();}代码使用如下:<template> <el-row> <el-col :xs="24" :sm...

2019-12-06 16:07:41 5212 6

原创 在vue中使用echarts图表教程

勿喷:作为非开发人员,我真的不懂vue的生命周期和钩子函数,我只关心怎么样达到目的,但正因为不懂,所以及其容易走弯路,易入坑。问题:我想在vue项目中使用echarts图表,第一步就是去官网找教程,官网教程看起来很容易的样子,没有多想,先按着来。 <div id="newEcharts" style="width:500px;height:220px;"></div&g...

2019-12-06 15:46:00 1868

原创 vue中使用dialog弹框,echarts图表不显示的解决方案

通过 npm 安装 ECharts后,开始使用出现问题:在dialog中弹框中,echarts图表一直显示为空,使用了网上教程的nextTick方法,但控制台报错“Error in nextTick: "TypeError: Cannot read property 'getAttribute' of null”解决方法:(1)在HTML的dialog中使用“@open="open()...

2019-12-06 15:22:53 9962 14

原创 响应式之被蠢哭系列(致自己):为了兼顾个设备,所以css样式需要用到@media screen and (max-width:768px){ }等分辨率

但是在使用中却不小心写成@media screen and(max-width:768px){ }本来就是菜鸟,因为一个空格,浪费了大量时间//正确的@media screen and (max-width:768px){ }//错误的@media screen and(max-width:768px){ }...

2019-12-03 17:50:48 284

转载 vue项目中图片路径显示object的解决办法,亲测:十分有效

今天遇到了一件奇怪的事,作为游走在前端边缘的非专业人员,特意记录一下以下现象,及解决办法:1.运行项目,突然出现:“Error: Cannot find module 'webpack/bin/config-yargs'”报错,之前还好好的,经过网上教程解决了这一问题;参考博客:https://blog.csdn.net/longzhoufeng/article/details/81...

2019-12-03 17:49:28 4075

原创 在线测试接口请求属于哪种类型,亲测有效

在线HTTP POST/GET接口测试工具 - aTool在线工具(亲测有效):http://www.atool9.com/httptest.php前因:作为一个不专业的行政,兼职着半吊子前端,前两天得到了一个webservice的接口文档,文档上只有url和请求参数,返回的json数据类型及内容,无请求方式的说明,和对方沟通后说可以用ajax的post请求,这个因为之前用过,所以...

2019-09-02 15:22:04 521

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除