Vue
文章平均质量分 69
Hi梅
bug不见!
展开
-
Vant的List组件列表 滑动后不触底也发送请求的Bug
Vant的List组件列表+PullRefresh 组件实现下拉刷新和List列表滑动屏幕到底部时发送请求效果。把van-list和van-pull-refresh添加成组件,由于改需求在许多页面都可以使用到,组件名称提取为,list是传递的商品集合,在通过插槽的显示由父页面来定义渲染的样式这个插槽是使用for把商品集合遍历,并且每个div一个商品我们可以使用把div转为行内块这样我们也可以完成需求,只要不出问题的方案就是好方案。原创 2022-11-15 21:18:25 · 1618 阅读 · 0 评论 -
Vant组件库 引入 阿里矢量图 添加自己喜欢的 ICON
网址内容如下,其中src:url内的网址是阿里矢量图CDN的地址,为了稳定我们可以自己把文件下载下来保存到项目中。内容复制进去,这个时候url提示报错我们需要引入相关文件,引入的文件都在下载的文件夹中。当然你也可以使用官方的CDN镜像,只要把链接内容复制到保存成。文件,当然你们也可以保存成.css文件由于我系统文件使用的是。使用因为图标是自定义的所以要看官网自定义要如何修改。在main.js文件导入我们的文件。并且设置相对路径把导入的文件引入。在项目中创建文件,并且把。如我要使用阿里矢量图中的。原创 2022-11-12 22:00:00 · 3273 阅读 · 0 评论 -
Docker已存在Nginx容器对宿主机映射容器的目录进行修改,完成不同前端项目的部署
由于项目需求,需要重新部署一个Vue前端程序,现在的问题是之前部署的前端项目是利用Docker中的Nginx容器,在创建初期使用的宿主机的dist绑定容器的目录,现在要在搞个前端应用部署有三种方式:1.重新部署Nginx并且在绑定前对宿主机目录用一个全称来表示目录下的文件都是vue前端项目2.使用原来的dist目录,然后以后部署时需要在目录下创建a项目名称然后里面存放a项目的dist文件,接着我们需要进入docker容器修改nginx的配置3.直接修改已经存在的容器配置,把之前绑定宿主机的。原创 2022-09-18 16:35:00 · 1250 阅读 · 0 评论 -
前端【文本超过多少行】后省略
今天写前端H5页面时,由于文本我只想让他显示一行或者二行文本,后端返回的商品描述信息有时候很长就会出现三四行的情况,这样就会造成div高度被拉长了,导致后面的信息就显示不出来了。原创 2022-09-13 23:43:56 · 277 阅读 · 0 评论 -
Vue父组件 和 子组件 相互调用修改参数的问题-解决
1.Vue父组件属性更改子组件值不变2.子组件通过`$emit`修改父属性值不成功3.子组件使用$emit调用父组件方法并且传值我们按照正常流程走一遍:当我点击页面的显示窗口会弹出子界面的弹窗,然后当我点击关闭图标或者点击遮罩层都会调用子组件中的方法,然后更改父组件的为false时子组件的弹窗会消失使用到了Vant的Popup 弹出层界面样式:父组件代码:子组件代码:测试效果是不是预期想的那样:点击按钮,可以看出点击后的状态已经变成true了,那么子组件应该跳出弹窗展示才对原创 2022-08-20 08:00:00 · 2860 阅读 · 0 评论 -
Vue把常用 【组件提取】 出来后使用【插槽把父元素】传入【组件中】
通常我们会把比较重复的标签提取到组件中使用,这样的好处是我们不需要编写重复代码,只需要引入对应组件即可,还有就是如果对通用的组件进行添加新元素,引用的组件也会有相同效果,如果是每个页面都写了重复的代码,哪天产品提新需求添加效果时,那你只能一个一个页面进行更改。...原创 2022-08-14 16:55:22 · 1081 阅读 · 0 评论 -
el-input限制只能输入规定的数
el-input限制只能输入正整数。原创 2022-07-26 15:16:28 · 2865 阅读 · 0 评论 -
Vue项目如何请求服务器,获取动态数据,并且升级模块
使用npm方式安装,在项目路径运行以下命令axios就会被添加进依赖在main.js中添加以下代码我们写个Post请求,用于获取用户id的商品信息,请求路径是本地ip:端口+路径在浏览器中刷新页面查看请求是否发出并且也携带了我们请求的参数我们也可以通过浏览器查看请求结果请求参数这个时候你会发现如果光设置请求路径,是远远不够的,我们的服务接口可能就不是我们项目的ip或端口,这样发送请求显然不能达到要求。我们访问服务器获取数据无非就是通过域名+端口或者ip+端口服务后端服务,所以我们需要原创 2022-07-03 11:04:56 · 2024 阅读 · 0 评论 -
Vue中process.env关键字怎么使用,以及前后端不在同一台服务器怎么访问?
可以在命令行输入命令查看环境信息有以下三种运行模式 我们查看配置信息,当运行Vue CLI命令,开发环境运行,要部署服务器发布生产环境时运行,他们正好对应Vue CLI中的模式和模式,就会把该模式下的NODE_ENV载入其中了 那既然知道项目运行的是那个模式,是不是我们就可以在不同模式下运行不同的变量信息,如开发环境使用端口8080,线上(生产)环境的端口是80,这个时候你会想,我知道不同模式配置不同信息,那信息配置在那个文件呢?会有先后顺序一个环境文件只包含环境变量的“键=值”原创 2022-07-09 15:43:55 · 5354 阅读 · 1 评论 -
Vue引入依赖实现文本复制·剪切板
项目路径输入以下命令使用npm方式安装,可以在项目的查看依赖是否引入在需要使用的页面中引入然后需要在中把自己定义好的组件名称填写进去3.演示效果点击按钮,控制台输出复制成功然后再看剪切板是否已经复制成功了,快捷键win+v查看,第一次使用快捷键需要激活一下,然后下次使用快捷键就可以看之前复制的信息...原创 2022-06-29 00:30:44 · 677 阅读 · 0 评论 -
结合项目带你了解,Vue组件重复利用,及父组件传递数据给子组件
对于路由的创建我这边就进行讲解了,有需要的可以看官网由于有4个界面想要Tabbar组件,而且我又不想每个页面都添加Vant的Tabbar标签信息和方法于是我们就可以把最完整的Tabbar信息搞个页面当成组件,这样需要的时候我们就引入我们自己定义好的Tabbar组件只需三步骤:1 . 引入自定义组件位置并且取名称2 . 添加我们自己取的组件名称3 . 在需要的地方引入自己取名的标签步骤一和二都是在内定义的演示效果:这里就引入出父组件传递数据给子组件的概念为什么会出现上面这个情况,因为我们自己原创 2022-06-12 16:26:10 · 633 阅读 · 1 评论 -
Vue+DataV+Echarts组件创建炫酷科技大屏~(注释多多)
DataV介绍:组件库基于Vue 开发,主要用于构建大屏,数据展示页面即数据可视化边框:带有不同边框的容器装饰:增加视觉效果图表:图表组件基于Charts封装,轻量,易用其他:飞线图/水位图/轮播表等1.入门开始1.创建Vue项目1.安装Vue/Cli查看更多npm i -g @vue/cli2.使用命令,创建Vue项目vue create datav-demo创建成功3.打开项目进入终端,在项目目录下,运行命令npm install @jiaminghi/data-原创 2022-04-30 09:45:00 · 10346 阅读 · 15 评论 -
Vue+Echarts完成数据大屏-新手入门篇
📣文章目录1.安装echarts.js2.新建vue界面3.引入 ECharts4.创建Vue方法和图表信息5.效果样式6.通过官网查找自己喜欢的样式1.安装echarts.jsnpm install echarts --save2.新建vue界面<template><!-- 定义echarts需要控制的dom元素 --> <div :style="{height:height,width:width}" /></template>3原创 2022-04-23 13:02:13 · 8883 阅读 · 4 评论 -
Vue中使用Video标签播放 <解析后的短视频>去水印视频无响应
📣文章目录问题:情景复现:链接在Video标签打不开链接浏览器正常打开出现的原理解决方式前端解决全局添加标签Vue单页面添加标签完美解决:问题:发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url情景复现:前端发送请求到后端接口我们前端打印获取后端解析后的对原创 2022-04-15 16:35:24 · 2189 阅读 · 0 评论 -
WMS仓库商品预警需求分析(附代码解析)
预警需求预警需求分析前端界面需要设置商品的预警天数后端保存预警天数数据库有字段存放商品需要预警的天数通过定时器运行指点方法算出对应那些商品的批次存低于设置的预警天数查询出来在wms首页展出代码实现对于前端界面的开发不做过多的代码分析,本次重点展示商品预警实现思路!!数据库用到到字段会截取出来,便于理解!商品表数据:预警表数据:批次商品表:批次商品表中添加预警字段:后续查询对应的预警信息作为标志Mysql使用到的函数//查询当前时间select now();//获原创 2022-04-14 19:30:00 · 2957 阅读 · 6 评论 -
前端:集合对象中如何获取对象中某个属性的计算值
通过浏览器控制台添加对象集合,可以看出里面有三个对象,现在我想对他们的num属性进行相加应该怎么操作var names=[{name:"zs",num:12},{name:"ww",num:12},{name:"ls",num:23}]通过reduce方法进行操作names.reduce((n1,n2)=>n1+n2.num,0)Vue中的用法:在vue的computed计算属性中定义一个方法通过集合的reduce方法进行计算返回数据.其中括号里面的(c1,c2)是集合的对象,原创 2022-03-26 17:38:20 · 1997 阅读 · 0 评论 -
npm如何提速下载
默认情况下npm的镜像是在国外,所以下载比较慢,该成国内就好了 npm set registry https://registry.npm.taobao.org/如果某天我们身处国外,可能又要删掉配置 npm config rm registry使用Nrm管理可以让我们在 npm 的各个源间快速的切换。 接下来我们看nrm如何安装和使用…安装node之后,在命令行输入命令: npm install nrm -g ,回车。使用 nrm ls 查看当前可使用的所有源,带*原创 2021-12-20 22:07:17 · 495 阅读 · 0 评论 -
VUE定时器请求后端数据
mounted:function(){ this.timer = setInterval(this.autoPrintBtnClicked, 60100);//60秒后运行 autoPrintBtnClicked方法 }, methods:{ autoPrintBtnClicked() { console.log("定时器进来了......") return this.api({ url: "/pickGuida..原创 2021-11-03 21:06:34 · 2772 阅读 · 0 评论 -
前端常见的问题
1.把字符串转成int类型进行比较、parseInt()方法 if (parseInt(this.mydata[i].transfersValue)>parseInt(this.mydata[i].realityNumber)){ this.$message.warning("批次:"+this.mydata[i].id+"调拨数量超出库存数量!"); return }没经过方法时是字符串类型经过方法时是原创 2021-10-28 16:30:46 · 234 阅读 · 0 评论 -
Vue的查询数据并且通过bootstarp-table把数据渲染
需求:把页面进行改造把apptoken,appkey列隐藏,并且更改该列为企业秘钥,列下显示查看公司秘钥如图:点击按钮显示当前的企业秘钥:1.首先改造JS代码:首先把数据要渲染的visible设置为true需要的设置false,主要的formatter: actionFormatter这个用于:格式化输出函数及其他 //操作栏的格式化 function actionFormatter(value, row, index) { console.log("列"+row,原创 2021-02-09 17:53:46 · 464 阅读 · 0 评论