Vue
小胖砸~
一切皆小白
展开
-
vant-list使用,请求接口之后会多几次load加页面
5页(极端假设)的情况下,如果你的内容小于了可是窗口,第一导致load不能触发,第二侥幸可视窗口高度本来就小,能滚到底load触发了,你可能在tab0的时候成功获取了page=2的内容了,但在切换tab时候就开始不受控值乱掉接口了。是因为产品在设置时候是会考虑到,触底加载事件的触发的。那上面描述这种情况,tab切换了,又进行自动加载数据的情况前端就不要想着制止了(更全面的来说,可控但是真没必要前端增加额外参数来控制了),因为van-list 也是害怕你填不满页面,实现不了下一步滚动在帮你加载充足数据上来。原创 2023-03-01 15:41:14 · 2431 阅读 · 1 评论 -
vue里面实现字母搜索栏,左侧浏览到那个首字母处,右侧首字母高亮
功能描述:左侧内容滚动的时候,右侧首字母会变换选中,右侧选中指定首字母,左侧内容滚到指定位置。原创 2022-11-09 16:11:25 · 1055 阅读 · 0 评论 -
element upload 自定义上传时候会多一个请求
解决办法:action字段,auto-upload按如下方式定义。这个多余请求路径是当前页面的页面地址。原创 2022-09-02 17:04:45 · 715 阅读 · 0 评论 -
elementui中根据单选按钮决定from表单提交的内容
v-if对元素的控制显示给内部ruleForm.xxx赋值,这个赋值的含义会让表单执行清空方法clearValidate时候产生错误,他会觉得每次使用v-if切换之后付的值就是初始化,所以在你离开表单的时候执行清空,返回回来还存在上次的数据。js切换方法中做的处理,改变校验数据内容,切换了上上一个类型控制的字段的校验错误清除掉,产品给的需求就是,不希望切来切去的时候看见上一次填写出现的校验问题,那就去掉,也咩关系,在提交时候validate还是会根据现有的rules数据再次进行校验的。原创 2022-09-02 16:43:54 · 1010 阅读 · 0 评论 -
vue项目引入rem
vue中rem使用原创 2022-08-11 09:55:20 · 733 阅读 · 0 评论 -
vue项目跨域处理
vue项目跨域问题解决,包含前后端方案原创 2022-07-14 18:12:39 · 777 阅读 · 0 评论 -
js-前端-1.下载文件ppt,word,xls,txt时候可以改名字2.下载图片-(全部代码)
参考文章页面效果:html<a v-if="isPicture(record.extension)" href="javascript:;"@click="dowload(urls + record.filePath, record.name, 1)"><a-icon type="download" /> <span class="icon-addmargin">下载</span></a> <a v-e原创 2022-05-18 14:22:12 · 395 阅读 · 0 评论 -
ant design vue tree授权,子项不必全部选中,父级也被选中
实现效果注意tree原生是,如果子集只选中了一个,父级是方块样式选中,而不是对号方式选中。最终获取的checkedKeys列表中是不会包含方块选中的父级id的,但是这对后端数据授权处理是不友好的。那么怎么然传到后端的checkedKeys包含上面所说的父级id呢。我想出了两个方案:1.就是tree是关联状态,即:checkStrictly="false"(tree默认就是这个可以不写),有关联时候我们可以通过check方法获得关联的方块选中的父级有哪些,这个数组在info.halfCheck原创 2022-05-17 11:58:03 · 3699 阅读 · 0 评论 -
利用 ant design vue里面checkbox组件写一个横向的授权组件。
说明:这个菜单授权的代码目前只实现了一、二级菜单授权。实现效果代码分成两部分:1.vue页面<template> <div class="container"> <a-card :bordered="false"> <span class="back-box" @click="backPage"><a-icon type="left" />返回</span> <p class.原创 2022-05-12 10:35:21 · 905 阅读 · 0 评论 -
有关vue项目布局,如何实现左右内容各自滚动自己的,table为空时候撑满高度
布局就是使用了ant design vue里面常用的布局ant design vue布局,1.想要实现左右侧各自滚动自己的,首先就应该让最大的盒子#app的overflow为hidden,这一步是防止页面内容超出后,浏览器页先出现了滚动条。再给左侧的菜单设置单独滚动菜单的设置很简单。主要难点在右侧,内容上。2.在右侧内容的包裹布局上利用监测浏览器窗口变化,来影响内容区域的宽窄变化。(我有尝试过不监听,但是页面总是,扩大页面宽度时候,内容随之撑开,但是缩小的时候没有...原创 2022-05-03 17:21:08 · 4200 阅读 · 0 评论 -
antv x6沿边运动的动画
实现效果要实现什么时候开始有运动小圆球的出现:1.在graph添加了内容之后,也就是可以看到图之后,让小圆球流动起来。2.再点击node的时候增加一个圆球。需求 1实现原理是,graph.fromJSON(this.graphData);添加之后,使用getNodes()获取所有节点,可根据节点存入的标识字段,找出默认开始的节点,代码如下:(这里可以看到一个自定义方法的使用graph.on("signal")),其中会利用getTargetCell找到节点的下一个连接点,继续添加动画小球。)..原创 2022-04-18 17:54:14 · 2778 阅读 · 5 评论 -
ant design vue table单元格编辑,点击全部显示可编辑单元
以及表格中使用select数据刷新页面不更新问题原创 2022-02-11 16:17:03 · 5581 阅读 · 2 评论 -
管理后台布局-左菜单-右侧内容宽度控制(使用ant design vue)
项目结构如下:布局实现的代码段<template> <a-layout> <a-layout-sider v-model="collapsed" :trigger="null" collapsible class="app-sider" > <div class="logo-box"></div> <SideMenu :openCurr.原创 2022-02-08 15:09:27 · 3777 阅读 · 1 评论 -
vue-cli3.0搭建项目IE浏览器白屏问题
1.安装相关依赖npm install --save babel-polyfill / yarn add -Sbabel-polyfillnpm install es6-promise --save /yarn add es6-promise -S2.查看依赖安装情况3.在main.js文件中引入import "@babel/polyfill";import Es6Promise from "es6-promise";require("es6-promis...原创 2022-01-08 17:24:24 · 525 阅读 · 0 评论 -
Ant design vue table 合并写法(详细代码-行合并)
ant design vue table 列合并 含有详细实现代码原创 2022-01-05 16:24:44 · 4523 阅读 · 5 评论 -
有关vue项目页面的结构问题使用flex,控制菜单和内容不一起滚动
今天遇到一个特别头大大问题。就是代码改着改着,账号过期后退出了登录页看不见了。我修改了项目左右的滚动情况(菜单和内容个滚个的)如图所示就是去控制大的app大盒子不滚动再分别去控制左右的小盒子们去实现自己的滚动 。所以我去操作了,入口模板文件app.vue 我把样式里面的flex给删除了,写了一个overflow:hidden进去,到这里我只是想让外层的大盒子默认撑开,然后内部子盒子多了就隐藏不显示滚动就好,结果我忘了flex去了,整个页面的宽度是没有了。就是在编写进入页面后代码时候为什么原创 2021-12-29 11:24:26 · 1044 阅读 · 0 评论 -
向添加前端静态页面之后,菜单栏显示正常,但是点击的时候报错main.js:978 Error: Cannot find module ‘./function (resolve) {。。。。。。
找了好长时间到底是咋回事,疯狂百度。最后还是根据报错提示找到原因了。完整的报错状态这是点击添加菜单按钮时报错的,说是找不到什么模板,又提到了webpack,尝试在动态添加的的时候打印了一个log。结果通过filter之后他就错了。可以看出13行的位置我就是想看一下各个路由对应的模板是啥。找到问题了。解决问题,我在考虑是什么影响了。首先这里用到了vuex 从后台获得一部分菜单项,其中后三个是前端写的静态数据插入。会不会是在action和mutations里面拼接的问题,仔细研究了.原创 2021-12-21 17:12:26 · 2458 阅读 · 0 评论 -
实现vue项目登录后全刷新,又遇到菜单栏点击后选中但是合上了的问题
菜单点击合上了是因为在app.vue页面错用了刷新:key="$route.fullPath",网上推荐这个写法是页面刷新的,但最终并没有实现。在登陆后,获取了后端返回的值,获取了新的菜单。打印的时候发现Storage中的值已经变化了,但是抓狂的是,打印的时候,还是之前的值并没有改变。发现点击页面刷新的时候,菜单栏就重新渲染了。找了半天的vue带的刷新页面方法,没有实现。目前解决就是在登录成功后跳转到首页后,又进行刷新使用了window.location.reload()进行刷新的。...原创 2021-12-08 17:06:04 · 766 阅读 · 0 评论 -
ant design vue 组件中的自定图片上传,上传时候要求传upload_token(除了文件信息之外第二个参数)
经过两个vue项目,分享一下图片上传这里的写法和注意点1.只传一个文件信息过去时//HTML<!-- 上传按钮 --> <div class="file-upload fl-r"> <span class="upload-desc">大小不能超过2M</span> <a-upload name="iFile"原创 2021-12-02 15:17:27 · 2858 阅读 · 0 评论 -
vue项目打包上线后,调用百度地图服务API后,该接口We‘re sorry but XXX doesn‘t work properly without JavaScript enabled
打包线上出现这个问题,但是本地并没有出现。查阅了多方资料,提出以下解决方法。在本地可以正常进行跨域访问,可以确定vue项目的代理配置的没有问题,返回结果。具体代理的写法大家可以看一下我上一篇文章我们可以看到...原创 2021-10-08 15:46:05 · 745 阅读 · 0 评论 -
vue项目使用百度地图经验,怎么引入JavaScript API和使用,以及访问web服务端API遇跨域问题
适用于中级使用者:对百度地图的使用和应用创建有了解过的。主要是说明在vue中如何使用,怎么引入JavaScript API和使用,以及访问web服务端API遇跨域问题。实现效果:页面里面获得天气信息思路:就是获得城市定位后->根据城市编码获得天气。申请账号咱们不赘述,在控制台应用管理里面创建应用,主要是为了获取AK一、JavaScript API的使用,与项目的结合度较高,需要通过yarn或者npm导入依赖包1.在vue里面引入百度地图yarn add vue..原创 2021-09-30 15:00:07 · 1717 阅读 · 0 评论 -
ant design vue 日历汉化失败
有关汉化处理,项目原来是在App.vue页面做处理的主要是借鉴了官方的全局国际化的写法,但并不管用后来借鉴网上的写法,亲测有效,项目已更新到服务器上,日历汉化显示正常main.js文件import zh_CN from 'antd/lib/locale-provider/zh_CN';import moment from 'moment';import 'moment/locale/zh-cn';moment.locale('zh-cn');Vue.prototype.$zhCN =原创 2021-09-17 12:01:09 · 809 阅读 · 1 评论 -
后端传给xml格式文件前端要求导出xslx,表格文件
借助a标签 ,去实现,定义按钮触发exportBook方法 funDownload(content, filename) { // 创建隐藏的可下载链接 var eleLink = document.createElement("a"); eleLink.download = filename; eleLink.style.display = "none"; // 字符内容转变成blob地址 var blob = new Blo原创 2021-09-14 10:27:27 · 398 阅读 · 1 评论 -
系统消息查看,路由跳转到相应页面,菜单栏并展开相对菜单
如下图所示,点击全局消息后跳转到左下角绿框下的一个子菜单。结构分析一下,项目用了ant design vue布局功能。布局内容是编辑再Hom里面的,右侧菜单使用了组件形式引入,所以存在了父级和子集传值的问题。(不方便展示全部代码)演示部分内容现在就是需要在Home页面里面去给左侧菜单传值控制路由,并展开对应菜单选项。Home.vue里面// 跳转到告警页面 handleClick(e) { //openCurrent 是在data里面定义好的 this...原创 2021-09-11 14:53:57 · 623 阅读 · 0 评论 -
vue方法里面调用了两个异步函数,因此会不执行的问题。
正好做到角色管理这部分。对角色列表增删改之后,都应该让当前列表刷新一下。同时因为角色会在用户管理里面用到,所以也需要对状态管理里面的内容进行刷新。下图是删除接口和获得列表的方法,看红色部分就是写错位置了,应该把状态刷新的代码放到获取角色列表方法中,就是图中标红两处只要上面那一处的。可以看到我把获取全部角色的接口写到了状态中若在删除方法中同时执行了this.$store.dispatch("addRoles");和this.getRoles(); 那么不论写法的先后,都是状态中的方法先..原创 2021-09-08 11:04:28 · 1019 阅读 · 0 评论 -
ant design vue 年份选择器
因为ant design vue 里面没有原生的年份选择器,需要使用date-picker去改造html:<a-date-picker mode="year" v-decorator="['year']" placeholder="请输入年份" format="YYYY" style="width: 200px" :open="yearShowOne"@openChange="openChangeOne" @panelChange="panelChangeOne"/>原创 2021-09-01 16:29:31 · 6008 阅读 · 5 评论 -
ant design vue 使用upload自定义方法实现图片文件上传
定义方法使用封装好的接口去上传图片,不是官方那样直接写道标签里面上传地址。应为上传接口需要token验证。我也不知道标签里面怎么写可以将token传过去过去,所以在方法里面写了。html:<a-upload name="avatar" list-type="picture-card" :before-upload="beforeUpload" :c.原创 2021-09-01 09:58:49 · 6006 阅读 · 0 评论 -
echarts彩色半环状图
效果图option = { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color:'#008FF5' // 0% 处的颜色 }, { offset: 1, color: '#00FCFF' // 100% 处的颜色 }], global: false // 缺省为 fals..原创 2021-08-27 20:34:15 · 274 阅读 · 0 评论 -
vue项目开发中遇到点击浏览器页面刷新,页面生命周期没有重新开始的问题
页面产生的具体问题是,在浏览器里面点击刷新,页面不会重新执行生命周期。并且原有调用的数据会消失不见。控制台会有这样的提示。不明确原因的前提下只能检查代码。发现是该页面引入组件时候使用了懒加载的书写方式,改成正常的import引入就可以了。问题写法:调整后:原理上还不太理解为什么会影响到整个页面刷新,如果有知道的,欢迎评论。...原创 2021-08-26 17:37:04 · 1324 阅读 · 0 评论 -
vue项目里面状态闪烁
思路就是使用:style,时时改变透明度opacity,最后形成闪烁效果。此处共两种状态,绿色状态呼吸效果,红色状态快速闪烁。html:<span>状态</span> <span class="point-state" :class="item.state == 'online' ? 'outline' : 'online'" .原创 2021-08-26 17:03:45 · 2867 阅读 · 1 评论 -
vue项目中处理表格过长超出屏幕宽度有滚动问题
项目使用了ant design vue ,在使用到表格时候出现表格内容过长问题,由于嵌套表格的容器使用card并没有给他固定宽度。所以要做一下监听解决表格过长但表格没有滚动而是屏幕滚动问题解决代码//html控制宽度部分写上:style="'width:' + (fullWidth - 200) + 'px'"//js监听位置,注意钩子函数的使用,要mounted才有效。 mounted() { //监听屏幕宽度 const that = this; windo.原创 2021-08-25 10:26:51 · 3351 阅读 · 0 评论 -
ant design vue中使用table 固定列遇到覆盖问题
看图就是第一列总是被压在下面解决:<a-table:scroll="{ x: 'max-content' }"></a-table>使用列固定还需要注意的就是一定要控制外部的宽度。不然固定列的效果展示不出来。推荐文章:转载 2021-08-13 12:04:18 · 1605 阅读 · 0 评论 -
vue项目中使用less
项目说明,本机node环境14.17.3,npm 6.14.13,yarn 1.22.11,vue-cli@vue/cli 4.5.13使用vue create 语法搭建的2.0项目安装 less 和less-loader,提示:less-loader版本过高会导致编译错误,我这里使用的这两个版本号试运行后没有问题的,何以借鉴yarn add less@4.1.1 less-loader@7.0.0安装成功后在style添加一下内容 scope lang="less"总结:大家搭.原创 2021-07-30 11:38:07 · 759 阅读 · 0 评论 -
vue路由使用方法
路由跳转是vue项目里面最常见的页面跳转方式今天是记录一下router传递值的用法最后说明:关于使用标签router-link 跳转后,再点击回退会多一页的空白页。感觉还是在方法里面写router跳转效果干净利落一些。以上亲试有效,如有错误请指正。...原创 2021-05-14 23:51:52 · 60 阅读 · 0 评论 -
vue+SpringBoot项目前后端传参
作为一个刚入行的纯正前端,对于后端编程是有恐惧感的,当初为什么会走上前端这条路,我听很多人说过,“因为学不会后端”现在我承认不是学不会,而是没有认真学啊因为写到了,自己记录一下,前端传参的方式和后端接参数的写法 。首先请求方法无非是get或者post两种,那么vue前端使用其中的方法有什么规则呢,如果你使用的是axios中的post方法那,传值得时候应该是data值,data会被添加到请求体(body)中的, 紧接着咱们来到后端如何去接参数,通常data传过来的是对象(可能我这个描述不太专业),会定义原创 2021-05-09 16:04:11 · 3829 阅读 · 0 评论 -
vue(uni-app)中动态绑定属性的写法
我们常用需要动态来绑定的属性有哪些1.class2.style3.v-text/v-html所为动态绑定,就是因情况而定,不同的条件下可能要求显示不同的效果和数据,通常使用的方法有三目运算,有的也可以接住对象写判断因情况而定三目运算的v-text/v-html <view class="title" v-text="parma.type=='1'?'上传作业':'上传考试'"></view>这里面的 v-text不能加“:”了,因为它本身不加的时候的用法里面就可以传原创 2021-04-27 10:35:38 · 3720 阅读 · 0 评论 -
小程序里面点击控制改变背景颜色
思路一:通过ref找到特定的元素去改变思路二:通过改变值控制样式的显示(符合vue设计思路)上代码:<view class="stags"><view id="1" :class="{'active':btn==1,'nostyle':btn==2}" @click="changB">作业作品</view><view id="2" :class="{'active':btn==2,'nostyle':btn==1}" @click="changB">原创 2021-04-25 17:58:54 · 534 阅读 · 0 评论 -
vite的启动链路以及原理
点击跳转文章 老板写的很nice,但是我只能看懂一部分。呜呜呜,我是个菜鸡转载 2021-04-08 10:23:58 · 143 阅读 · 0 评论 -
运行网上下载的vue项目
记录VUE技巧:运行网上下载的vue项目+2.0和2.0的区别+webpack的使用网上下载运行项目下载后用vscode打开,我这是个2.0的项目npm installnpm run devvue2.0和3.0的区别创建语法发生变化:2.0的是 vue init webpack projectnamenpm run dev3.0的是 vue create projectnamenpm run serve默认项目目录结构也发生了变化:移除了配置文件目录,config原创 2021-03-24 11:32:04 · 556 阅读 · 0 评论 -
Axios的安装与使用
Axios的安装与使用使用前进行安装npm install axios -s最简单的使用:不封装,哪个文件里面用在哪个文件里面写默认是get请求还可以这样写:axios.post({url:‘http:///ndfdsdsjfds’}).then(res=>{console.log(res)})有参数时候的写法对于get请求的参数拼接需要使用params,对于post请求要使用data{key:‘aaa’}3 .并发请求axios.all4.发送并发请求,原创 2021-03-18 20:52:48 · 1802 阅读 · 0 评论