![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
iview
天空之枫
这个作者很懒,什么都没留下…
展开
-
vue 滚动缩放反转图片功能
核心代码,创建image对象,获取图片的大小,设置高宽比,监听滚轮控制图片比原创 2022-12-05 09:05:15 · 360 阅读 · 0 评论 -
vue ivew的input type=“number” 只能输入数字,解决输入法问题导致输入字母且去右侧上下箭头按钮完美解决方法
input type="number"很重要,防止中文输入法输入出现错误问题,如果右侧上下箭头没有去掉,请试着加下/deep/如果获取不到event,请试下$event。原创 2020-04-07 16:21:41 · 4310 阅读 · 0 评论 -
Cascader 重写搜索查询
因为功能需求,需要两种查询组合, <Cascader placeholder="请选择采集点位" ref="Cascader" @on-visible-change="opencader" transfer-class-name="Cascader" :data="allQXList" not-found-text="暂无数据" @on-change="getcode" :load-data="loadData" style="width: 280px" v-model="areacod原创 2022-02-23 16:16:23 · 578 阅读 · 0 评论 -
iview Cascader 使用外部按钮控制展开下拉
<Cascader v-model="value3" :data="data" ref="Cascader"></Cascader><Button @click="openselect"></Button>openselect:function(){ let _this = this; setTimeout(()=>{ //需要计时器,因为和本身自带的事件冲突,需要延迟执行 _this.$re.原创 2022-02-23 15:36:50 · 690 阅读 · 0 评论 -
iview 动态校验
<FormItem :label="index == 0?'身份证':''" v-for="(item,index) in formItem.fIdcardArr" :key="index" :prop="'fIdcardArr_'+index"> <div> <Input v-model="formItem.fIdcardArr[index]" style="width:90%;display:inline-block;" placeholder="请输入身份证" c.原创 2021-10-15 18:01:43 · 428 阅读 · 0 评论 -
突然发现一个有意思的东西,!与!!
//今天看到代码突然看到别人的js代码有一个用法if(!!val){ this.value = val}以前只看到!的使用,!null = true!undefined = false!!则用来做类型判断,在第一步!(变量)之后再做逻辑取反运算,在js 中新手(比如我)常常会写这样臃肿的代码:判断变量是否为空,未定义或者非空串var n;if(n != null && typeof(n) != undefined && n != ".原创 2021-01-15 14:06:03 · 101 阅读 · 1 评论 -
iview 的select组件拓展
效果如图上图对iview的select进行拓展代码如下<Row> <FormItem label="部门" prop="departments" style="position:relative;"> <!-- 修改 --> <Select placeholder="请输入部门" class="bandelete" v-if="!modal.isread" v-model="model.departments" ref...原创 2020-10-20 09:27:46 · 817 阅读 · 2 评论 -
vue vue-router 同一个页面地址栏参数改变,页面不刷新的问题
vue-router 同一个页面地址栏参数改变(比如文章的发布和编辑是同一个页面),不会触发vue的created或者mounted钩子,所以数据不会重新渲染。解决办法有两种:1:监听地址栏变化(watch),这是vue-router官方给出的解决办法。监听路由变化,把初始化的方法重新写到监听的方法里面执行watch: { '$route' (to, from) { this.getData(this.$route.query.id) }}metho.转载 2020-08-25 13:40:37 · 2791 阅读 · 0 评论 -
vue 请求数据错误避免
在项目中,axiso请求,出现几种错误显示问题1.超时请求时原始数据必须清空,否则会以为已经查询出来2.重复按钮点击问题,宁可第二次不给他点击,原因axiso请求是异步,如果两次请求时间第一次大于第二次,导致第一次数据覆盖第二次,显示数据错误.,解决:赋值时间戳,判断两次时间戳是否相同,只取最后一次数据.let sch = new Date().getTime();this.sch = sch;//请求(body=>{ if(sch == this.sch){原创 2020-08-17 14:58:03 · 1268 阅读 · 0 评论 -
iview tab选项卡拓展
在iview项目中遇到一个问题,当选项卡内的内容高度不同时,我们切换选项卡时页面显示的高度会被最高的选项卡顶高,导致其它选项卡底部多出多余的空间,页面不美观.我在这里改进了下tabs,原理就是在每个选项卡上套上一层高度且overflow:scroll,超出滚动,代码如下,<template> <Tabs value="name1" style="border:1px solid #00ff00"> <TabPane label="标签一" na原创 2020-08-14 16:59:47 · 618 阅读 · 0 评论 -
iview 循环校验
项目需要实现一个循环添加且校验相同的功能:form我就不写了,自己补充main.vue<FormItem label="用户"> <Row v-for="(item,i) of formdata.objectinfos"> <childObj :formData="item" :num="formdata.objectinfos.len...原创 2020-04-20 15:27:37 · 917 阅读 · 0 评论 -
vue iview 多form校验
项目需要点击按钮生成多人员表单,我这只取部分代码作为示例<Form :label-width="90" :ref="'form'+index" v-for="(form,index) in paersonInfos" :rules="ruleValidate" :key="index" :style="paersonInfos.length -1 != index?'border-bo...原创 2020-04-08 09:07:25 · 593 阅读 · 0 评论 -
vuex的使用
学习vuex,本文以token存储为例,有错误的地方请指正。在login.vue页,通过发送http请求获取tokenutil.post(url,{username:username,password:password}).then(body=>{if(body&&body.success){ this.$message....原创 2020-03-31 15:34:12 · 119 阅读 · 0 评论 -
iview的Upload组件进度条的坑
使用官方上传组件时,需要显示有进度条这是官方代码<template> <div class="demo-upload-list" v-for="item in uploadList"> <template v-if="item.status === 'finished'"> <img :src="item.url">...原创 2019-12-17 16:41:39 · 5884 阅读 · 4 评论 -
iview 的modal内form表单校验的坑
在开发iview-admin时,在modal内进行表单校验,发现一个问题,因为新增和编辑modal是共用一个modal,在点击编辑,打开modal进行校验没有问题,之后关闭modal,在点击新增按钮,然后发现明明没有还没有输入数据,但上次的校验提示还留在modal上,这真是非常糟糕的体验我通过查找找到了一个解决方法表单重置(this.$refs.formData.resetFields())可...原创 2019-10-08 15:33:19 · 4415 阅读 · 4 评论