![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
天空之枫
这个作者很懒,什么都没留下…
展开
-
highchart 的蜘蛛图(雷达图)将图例样式改
针对第一种情况,修改plotOptions.series下的宽高属性,以及圆角弧度,然后在legend下设置symbolWidth宽度。一,在不改变蜘蛛图数据点样式的情况下,修改图例样式。二,在去除蜘蛛图数据点样式的情况下,修改图例样式。针对第二种情况,需先隐藏数据点不可见,在修改对应的css样式。原创 2023-06-06 22:39:39 · 421 阅读 · 0 评论 -
vue-router 的两种模式
history interface是浏览器历史栈提供的接口,可以通过go,forward,replace等方法获取浏览器历史栈信息,通过pushState()和replaceState()方式修改浏览器历史栈。hash:有#,url不会发送到服务器,刷新不会404,不用服务器配置,#和锚点是同一个意思,所以使用锚点可能会失败,不利于SEO搜索引擎优化。history:没有#,会发送到服务器,发生请求,刷新会404,需要服务器配置一个回调路由,保持域名部分,前端也做的事对对应域名下的路由控制。原创 2023-01-02 20:56:29 · 234 阅读 · 0 评论 -
vue 滚动缩放反转图片功能
核心代码,创建image对象,获取图片的大小,设置高宽比,监听滚轮控制图片比原创 2022-12-05 09:05:15 · 360 阅读 · 0 评论 -
Vue路由钩子在生命周期函数的体现
非重用组件,开始组件实例的生命周期:beforeCreate&created,beforeMount&mounted。deactivated:离开缓存组件a,或者触发a的beforeDestroy和destroyed组件销毁钩子。路由导航,keep-alive,和组件生命周期钩子结合起来,触发顺序,假设是从a组件离开,第一次进入b组件;beforeRouteLeave:路由组件的组件离开路由前的钩子,可取消路由离开。beforeRouteEnter:路由组件的组件进入路由前钩子。原创 2022-11-28 15:51:50 · 749 阅读 · 0 评论 -
vue-router的懒加载
3.使用webpack的require.ensure技术,也可以实现按需加载,这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件.1.常用:使用箭头函数+import动态加载。2.使用箭头函数+require动态加载。原创 2022-11-03 16:28:26 · 227 阅读 · 0 评论 -
vue的性能优化
1.尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher。3.还可以使用缓存(客户端缓存,服务端缓存)优化,服务端开启gzip压缩等。3.如果需要使用v-for给每项元素绑定事件代理。4.SPA页面采用keep-alive缓存组件。5.splitChunks抽离公共文件。2.v-if和v-for不能一起用。9.长列表滚动到可视区域动态加载。6.使用路由懒加载,异步组件。3.使用cdn加载第三方模块。6.sourceMap优化。8.第三方模块按需导入。原创 2022-10-21 11:16:45 · 230 阅读 · 0 评论 -
iview select 远程搜索,选择选项后,失焦搜索框内容被清空
我怀疑select 多次执行chang事情,可以使用计时器延迟尝试一下,但我没去深究,使用了另一种方法。原创 2022-09-05 09:33:41 · 1280 阅读 · 0 评论 -
vue ivew的input type=“number” 只能输入数字,解决输入法问题导致输入字母且去右侧上下箭头按钮完美解决方法
input type="number"很重要,防止中文输入法输入出现错误问题,如果右侧上下箭头没有去掉,请试着加下/deep/如果获取不到event,请试下$event。原创 2020-04-07 16:21:41 · 4310 阅读 · 0 评论 -
export ‘OrbitControls‘ was not found in ‘three‘
在使用three时导入遇到问题,vue3正确引入OrbitControls:import * as THREE from "three"; //引入Threejsimport { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; //事实证明有用使用:new OrbitControls(camera,renderer.domElement);//创建控件对象中文网那个 new THREE.OrbitControls(came原创 2022-07-05 17:21:40 · 760 阅读 · 0 评论 -
window.requestAnimationFrame 封装与使用
优点:requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态(不观测页面时不运行)下的话,动画会自动暂停,有效节省了CPU开销总而言之,性能好原创 2022-04-07 22:37:38 · 1076 阅读 · 0 评论 -
根据下标进行滚动
非常简陋的写了一串代码,在线编译了测试下,能用,哈哈哈哈哈<template> <div> <Input v-model="baseInfoscurrent" placeholder="Enter something..." /> <Button @click="getallposition"> 点击 </Button> </div> <div class="perso.原创 2022-04-05 21:38:35 · 324 阅读 · 0 评论 -
vue v-html内增加过滤器filters,对关键字标红
<div class="carno-base carno-green" v-html="$options.filters.keywords(text)"></div> filters: { keywords: function (str, key) { //对带有警字车牌加红 key = '警'; let regExp = new RegExp(key, "g"); let newStr = ""; newStr = s.原创 2022-02-24 13:41:03 · 536 阅读 · 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 评论 -
vue watch监听
data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象、数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c); ..原创 2021-11-17 13:47:58 · 72 阅读 · 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 评论 -
生成树结构对象
/** * 创建一个排序函数,包含三个参数 * * @param Array arr: 需要处理的数据 * @param Array newArr: 用于存放处理后的数据 * @param Sting parentId: 当前的需要处理的父亲 parentId * * @param Sting fId: 当前需要处理的孩子 fId * 生成树结构数组 */util.sortArr = function(arr,parentId,fId){ // 创建一个临时数据用于存放数据 var.原创 2021-09-22 09:18:46 · 119 阅读 · 0 评论 -
发现一个滚动属性scrollBy
_this.$refs.flowContainer.scrollBy({ left:0, top:(_this.$refs.flowContainer.scrollHeight - this.$refs.flowContainer.clientHeight)/2})//_this.$refs.flowContainer 滚动容器原创 2021-09-02 17:28:07 · 145 阅读 · 0 评论 -
树型结构拖拽
开发功能时恰好需要一个既可以从列表里拖拽到树,又可以树托到列表的功能,后来发现我的需求和我开发的不太一样,因为是二次开发再增加开发不太好搞,所以暂时不要了,但功能开发的还完备.我这里是使用VueDragTreeOrg插件二次开发要求://main.js文件增加//使用插件"vuedraggable": "^2.16.0",npm insatll 安装 或yarn 安装还有什么 stuly等什么报错 是因为版本不对参考:"stylus": "^0.54.8","sty..原创 2021-08-31 17:48:34 · 1365 阅读 · 1 评论 -
浅入vue,什么是MVVM
在我们刚开始学习vue的时候,我们常常看到MVVM这个词。那么这个MVVM到底是什么意思呢? 看到MVVM我们就会下意识地想起MVC这个词,没错这两个不仅在字母上相似,在意义上也有共同点:MVC: MCV是一种使用MVC(Model View Controller 模型-视图-控制器)设计创建web应用程序的模式: Model(模型):表示应用程序核心(如数据库)。 View(视图):显示效果(HTML) co...原创 2021-07-02 10:22:07 · 455 阅读 · 0 评论 -
js 通过图片链接获取file对象
直接看代码imgUrlToFile(url) { var self = this; var imgLink = url; var tempImage = new Image(); //如果图片url是网络url,要加下一句代码 tempImage.crossOrigin = "*"; tempImage.onload = function() { var base64 = self.getBase64Image(tempImage);原创 2021-06-17 09:01:10 · 4116 阅读 · 0 评论 -
横向滑动----鼠标事件
直接上源码吧,还需优化,总感觉不是很流畅<style scoped> * { margin: 0; padding: 0; list-style: none; } .box { width: 400px; height: 200px; margin: 100px auto; position: relative; overflow: h.原创 2021-04-19 21:55:35 · 213 阅读 · 0 评论 -
mint ui 移动端下拉刷新和向下滚动冲突
//父组件<mt-loadmore:top-method="istoresh?loadTop:null":bottom-method="loadBottom":bottom-all-loaded="allLoaded"ref="loadmore":autoFill="isAutoFill"><keep-alive> <router-viewclass="page"ref="childcontent"@isrefurbish="isrefurbi...原创 2021-02-04 10:56:06 · 279 阅读 · 0 评论 -
vue 封装tab横向滚动菜单
效果如图:子组件:HeaderTab.vue<template> <div class="header"> <div class="header_search-left"> <!-- <slot name="header_tab_img"></slot> --> </div> <div class="header_tab" ref="headertab">原创 2021-01-20 09:42:10 · 1495 阅读 · 1 评论 -
突然发现一个有意思的东西,!与!!
//今天看到代码突然看到别人的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为什么要使用template
在使用v-if 与 v-else-if 与 v-else时候,我们可以使用template,来代替div如<div v-if="isshow"> <div>11</div> <div>222</div></div><script> data:{ isshow:true }</script>//使用template<template v-i原创 2020-10-09 20:27:53 · 2408 阅读 · 0 评论 -
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 评论 -
vue中render函数阅读性比较好的写法推荐
推荐写法一:{ title:'操作', align: 'center', render: (h ,params) =>{ let row = params.row; let status = row.status; let that = this; let editButtonStyle = { props: { type: 'success', size: 'small', ghost: true }, on: { c转载 2020-07-23 16:30:51 · 308 阅读 · 0 评论 -
this.$router.push、replace、go的区别
this.$router.push说明:跳转到URL,向history栈添加一个新的记录,点击后退会返回到上个页面使用:this.$router.push('./index')this.$router.push({path:'/index'})this.$router.push({path:'/index',query:{name:'123'}})this.$router.push({name:'index',param:{name:'123'}})this.$router.rep转载 2020-07-20 09:22:44 · 261 阅读 · 0 评论 -
关于引导页制作
我在vue-element-admin上发现它的引导页是基于driver.js制作的,感觉还好,可以尝试下点击这里原创 2020-06-28 14:10:11 · 569 阅读 · 0 评论 -
iview resetFields()报错
Cannot read property "indexOf" of undefined at a.resetFields();产生这个错误的原因我遇到了有两种情况一 , this.$refs[name]取不到,返回undefined. so 我们需加this.$nextTick方式获取,当然你得确保name是对的.二,还有一种情况,就是当编辑页和详情页是写在一块时,先打开编辑页,取消触发resetFields();再打开详情页,就会报错,可能是因为Form 中绑定了几个 prop ,但再详情中使原创 2020-06-18 17:23:26 · 1129 阅读 · 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 评论 -
VUE 页面包含多个upload组件时,获取当前使用upload的index
之前网上看到有这样的一个标题,但是没有具体说出解决的方案,昨天捣腾了半天 终于在配合接口的情况下解决了这个问题。1、问题描叙场景设定:在图片图片的管理后台,需要对每个投票都上传图片,且投票的选项是可以增加和删除的,这个时候使用vue的上传就没法再on-success 回调的时候知道是哪个选项的图片了。类似的场景还有很多,最近我在做的一个项目就是如此,一个广告位的默认展示图片,产品需要能够上...转载 2020-03-16 08:58:30 · 2366 阅读 · 1 评论 -
vue(iview)没有图片时默认图片设置
<template> <Avatar style="background-color: #87d068" shape="square" size="large" icon="person" :src="url"/></template><style><...原创 2019-12-27 16:18:03 · 808 阅读 · 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 评论 -
vue scoped问题
在vue中我们想要css只在当前组件中生效,只需要加scroped,但有时候我们发现加了scroped时,有部分css无法生效,后来我找寻了下办法------ /deep/和>>>我们只需要在css 前加/deep/和>>>//当lang 为less、scss中的样式穿透.container /deep/ .el-input__inner {...原创 2019-11-07 09:52:54 · 300 阅读 · 0 评论