vue
我在学习呢
这个作者很懒,什么都没留下…
展开
-
动态class
class里用‘ [ ] ’包着就会被当做变量解析。选中div就加粗文字且加上背景色。原创 2023-08-15 11:24:36 · 107 阅读 · 0 评论 -
父组件往子组件之间传参,赋值两次,子组件获取不到数据变化
在父组件中需要调用两个接口,放入一个list,然后传给子组件渲染页面但是在子组件中用深度监听都没有监听到数据变化,控制台输出如下:子组件已经渲染加载,但是父组件中的接口在这之后才查出来。原创 2023-04-14 10:28:25 · 551 阅读 · 1 评论 -
若依框架,页面设置了keepAlive=true,v-if和v-hasPermi作用在统一个按钮上时v-hasPermi失效
的数据状态改变,由 ==1 变成 ==2 的时候,后面的v-hasPermi判断失效。判断前两行为 true , 后两行没有在页面渲染元素,所以只校验了前两行的。不会移除元素,只是修改了css的样式为隐藏,这样进入当前列表页就会触发这四行的。当前列表页设置了缓存keepAlive=true,同时,在同一个按钮上使用。方法(v-if和v-show的区别),当后面修改了数据状态,后两行为 true,由于页面设置了缓存,根本没有加载。是因为一开始页面初始化时,原创 2023-04-13 16:21:47 · 1439 阅读 · 0 评论 -
vue前端获取项目下的静态资源文件夹中的文件并下载
前端项目/public/static/image文件夹下。项目中获取这两张图片。原创 2023-04-07 16:16:34 · 3286 阅读 · 0 评论 -
vant表单van-field中用van-stepper的坑
今天用van-field里面包着van-stepper进步器,页面渲染上老是出现奇怪的情况。原创 2023-04-04 16:05:17 · 1123 阅读 · 0 评论 -
vant动态校验表单和红色星号
待修复时,修复时间不校验已修复时,检验修复时间并显示星号坑:1.上的 :required=“requiredRepairTime"只能动态控制红星,但能动态校验2.:rules=”[ { required: faultForm.repairCompleted==‘1’ }], 写法不起作用也无法动态控制校验,必须用变量控制,并且用this.$nextTick(()=>{})更新视图<van-field required name="repairCompleted" label=原创 2022-05-16 17:39:06 · 7757 阅读 · 1 评论 -
若依Ruoyi前后端分离项目,pdfjs预览pdf,实现$download对象调用
我用的是若依版本v3.8.1(分离版)实现预览pdf,使用$download对象调用先看下若依v3.8.1版代码中$download对象是啥说明文档在这里 http://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html#download%E5%AF%B9%E8%B1%A11.下载pdfjs放到前端项目public文件夹下2.准备好后端接口 查询pdf二进制流3.上代码在/src/plugins/download.js中const baseURL = p原创 2022-04-15 17:41:55 · 7434 阅读 · 8 评论 -
vantui一个输入框验证两个条件
需求超过字数限制要有明显的提示不能只用maxlength<van-field v-if="editable" required v-model="faultForm.lineId" name="lineId" maxlength="30" label="线路" placeholder="请填写线路名称" :rules="[ {required:true,message:'线路不能为空'}, {required:true,validator:textMaxLength,m原创 2021-12-14 17:16:34 · 1485 阅读 · 0 评论 -
vant uploader组件,回显文件、文件名
效果:刚开始的时候不回显文件名称,new了一个File,传入文件名就可以了父组件<van-field v-else name="gzsmwjys" label="故障说明文件(原始)" :required="gzsmwjysRequired"> <template #input> <!--把vant uploader封装成组件--> <VantUploader type="gzsmwjys"原创 2021-11-29 17:36:31 · 11456 阅读 · 18 评论 -
监听window.onhashchange
<script> window.onhashchange = function(event) { console.log('ceshi',event.oldURL, event.newURL); let hash = window.location.hash //通过location对象来获取hash地址 console.log('#hash',hash) // "#/notebooks/260827/list" 从#号开始 }原创 2021-11-18 09:18:47 · 1096 阅读 · 0 评论 -
vue插值表达式——渲染复杂对象
arr=[{id:‘1’,name:‘张三’,obj:{id:‘101’}},{id:‘2’,name:‘李四’,obj:{id:‘102’}}]在{{}}表达式加 if 判断 ,避免页面报错<div v-for="(item,index) in arr" :key="index"> <div v-if="item.obj">{{item.obj.id}}</div></div>...原创 2021-11-15 14:20:08 · 842 阅读 · 0 评论 -
elementui form表单 动态绑定prop
表单中的数据是循环tasks动态展示的form:{ tasks:[],},<el-form :model="nextTaskForm" ref="nextTaskForm" :inline="true"> <el-row :gutter="10" v-for="(item,index) in nextTaskForm.nextTasks" :key="index"> <el-form-item label="下个节点名称:" :prop="'nex原创 2021-09-27 11:18:09 · 3423 阅读 · 0 评论 -
elementui表格type=“index“时,翻页自增
原创 2021-09-17 16:38:59 · 1278 阅读 · 0 评论 -
CSS自适应postcss.config.js,过滤特殊类selectorBlackList
selectorBlackList:[’.el’]过滤掉.el开头的类,这样在移动端也可以使用element-ui的样式原创 2021-08-11 15:38:47 · 1848 阅读 · 0 评论 -
js文本换行
vant宫格组件,文字过长换行会把上面的图片挤上去解决方法:给文本留两行 ,js里处理文本换行<div class="productName" v-html="getProductName(name)"></div>getProductName(name){ if(name.length<8){ name+"<br> " //后面一定要加个空格才有效果 }else if(name=="这个字数好长好长好长"){ name="这原创 2021-07-18 14:12:15 · 2864 阅读 · 0 评论 -
动态取data1和data2变量名称
记录下这种写法一个页面有两个table,我就简单命名tableData1和tableData2(当然一般大家都不推荐这样命名变量,主要是这两张表格信息处理的方式一摸一样)之后改为下面这种写法代码比较简洁,前提就是两个变量处理方法都是一样的this["tableData"+type] //或者 this[`tableData${type}`]...原创 2021-07-15 08:20:04 · 392 阅读 · 0 评论 -
elementUI表格的数据动态渲染,表格数据有修改后及时更新展示
业务是做个打勾的表格遇到的问题:点击全选后代码里把表里的数据全部改为选中,但是页面上并没有立刻改变,要在页面上停留一会到处点点才会出现选中的状态像这样:watch监听table的值已经改变了,就是渲染不及时,重新阅读api文档加了一句话记就好了...原创 2021-07-14 17:45:00 · 2140 阅读 · 0 评论 -
elementui获取<select>选中标签的所有数据
一个记录信息的表格需要用选择器在选择一个人名后想要获取这个人的所有信息<el-select v-model="prodForm.duty_spare_user_name" value-key="user_id" filterable placeholder="请选择值班人" @change="selectUser"> <el-option v-for="item in dutyUserList" :key="ite原创 2021-06-29 14:27:05 · 1480 阅读 · 0 评论 -
mock模板数据
mock中的可以动态随机生成名字@cname()生成0~10的随机数@natural(0,10)export const QueryWorkItemQty = { url: kingdee.QueryWorkItemQty, type: "post", data:{ "type": true, "msg": "Success", "models": [ {原创 2021-06-08 10:13:43 · 189 阅读 · 0 评论 -
vue打包后遇到报错Uncaught SyntaxError:Unexpected token ‘<‘
检查config文件的这里 publicPath属性我之前写的 publicPath:’./’改成了 publicPath:’’ 就好了原创 2021-04-27 20:17:36 · 142 阅读 · 0 评论 -
el-upload手动上传图片的坑
需求:选取需要上传的图片后,回显,可删除,每次只允许上传一张图片,点击上传按钮在上传到服务器。elementUI的坑:想让选图片和上传动作分开的话设置:auto-upload="false" ,但是:before-upload="beforePictureUpload" 上传文件前的钩子就会无效,且图片也不会回显出来,如果我去掉这个:auto-upload="false" 则会出现图片我的代码:我添加了:auto-upload="false"属性在上传前的钩子函数中,创建一个临时的图片地址te原创 2021-01-15 17:13:56 · 4195 阅读 · 3 评论 -
记录vue项目 前端解决跨域问题
前后端分离模式下的跨域问题,那种请求其他公司的后端接口config.js文件中PS:这里secure:true是在官网看的,请求https需要开启安全证书,结果请求时发现不需要证书……请求报错信息:Proxy error: Could not proxy request……并且提示UNABLE_TO_VERIFY_LEAF_SIGNATURE,应该是证书问题查了一下这个问题,之前用postman测试时也遇到了不需要证书的问题,postman只要关掉这个选项即可,设置为OFF。代码中 只要加原创 2021-01-05 09:59:47 · 921 阅读 · 1 评论 -
vue多次跳转同一页面不触发created和mounted,没有初始化
问题:从gtiHub上拉的后台管理系统的代码 vue-admin-template模板,从列表页跳转进详情页,只在第一次跳转时加载created和mounted,第二次直接使用页面缓存了,查了半天,发现原因就在开发者的“手摸手”系列的官方文档中…真是对自己的大无语事件上代码:解决方法:一般大家应该都是这样实现页面跳转,但会发现id=001和id=002的在页面上的数据时一样的,然后控制台打印几条信息就会发现是因为第二次进页面时不会触发vue的created或者mounted钩子,官方说你可以通过w原创 2020-12-24 14:00:36 · 4982 阅读 · 2 评论