![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue前端
文章平均质量分 66
亭台烟雨中
路漫漫其修远兮,吾将上下而求索
展开
-
vue2+viewDesign实现tabs动态增减
vue2&viewDesign Tabs背景准备工作备用组件导航组件delete tab完背景上次写了个vue3+element-ui版本的,其实已经够用了,不过闲来无事就想琢磨一下,弄了一个vue2+viewDesign的实现,原理差不多。准备工作备用组件准备几个备用的用来切换的组件,如下:<!-- 第一个组件 --><template> <div>组件一</div></template><!-- 第二个组件 -原创 2021-11-29 16:28:41 · 1193 阅读 · 0 评论 -
Iview+Vue+Springboot上传文件到腾讯COS
上传文件前言前端上传组件后端附:腾讯COS专用工具类吐槽前言这个功能吧,我想了很久。以前用一个很蠢的方案实现过,但是不够优雅漂亮。哎,你猜怎么着,我最近琢磨出了一个比较靠谱的套路。走着前端上传组件<Upload ref="uploadImage" type="drag" :action="`${saveAction}`" :data="{filename: currentFileName}" accept="image/png, image/jpeg, image/jpg原创 2021-10-12 14:47:16 · 422 阅读 · 0 评论 -
vue页面内跳转到指定位置
handleJump(val) { // val想要跳往的dom的id const dom = document.querySelector(`#x${val}`) // 调用dom的scrollIntoView方法 if (dom) { dom.scrollIntoView(true) }},原创 2021-09-22 17:30:39 · 1139 阅读 · 0 评论 -
Vue3中关于自定义指令的一些经历
文章目录前言从一个需求开始第一阶段第二阶段第三阶段自定义指令的注册解决自适应高度的问题前言自定义指令真的蛮好用,尤其是一些繁琐的很多组件都通用的监控,直接扔到指令里面就行。但是从vue2到vue3的演进过程里,指令的使用方式发生了比较大的变化,而且有一些坑,在这里记录一下。Tips:本文默认你已经熟练使用vue2的自定义指令从一个需求开始需求:前端项目使用element-ui,其中el-table的表高在换不同显示屏的时候很难适配,需要一个统一的处理手段进行自适应,应该怎么做呢?第一阶段手原创 2021-09-16 15:30:26 · 300 阅读 · 0 评论 -
Vue3+element动态增减el-tabs
文章目录overview设计容器容器主体样式文件容器左侧overoverview这个问题我想了很久,怎么能优雅地实现点击左侧边栏,右边动态增减。现在有点眉目了设计容器容器主体主要思路:分为三个部分,容器整体,容器左侧,容器右侧。左侧是按钮组,右侧是待渲染部分。我把侧边栏单独抽出来做了个组件,不重要。然后重点是动态增减Tabs,最重要的就是用component的:is属性,根据按钮的callBack动态渲染每一个Tab的内容。代码如下:<div class="root-ele">原创 2021-09-11 17:55:02 · 1912 阅读 · 0 评论 -
Vue3的一丢丢使用心得
持续更新第一次更新2021-4-19一、main.js的变化二、定制化组件能力defineComponentsetup生命周期函数三、不再推荐使用Vuexprovide与inject第一次更新2021-4-19一、main.js的变化在Vue2中,常见的main.js形式如下:import Vue from 'vue'import xxx from 'XXX'Vue.use(xxx)new Vue({ el: '#app', router, store, components:原创 2021-04-19 11:12:34 · 383 阅读 · 0 评论 -
Element-UI中打开本地文件
Element-UI中打开本地文件一、问题二、html部分三、js部分四、上一个/下一个一、问题有时候我们要打开本地文件直接在页面上查看,怎么用Element-UI提供的功能实现?二、html部分<el-upload :auto-upload="false" :on-change="elInFile" multiple accept="audio/*"> <el-button siz原创 2020-10-13 09:32:13 · 4588 阅读 · 0 评论 -
el-dialog关闭再打开时滞留数据的问题
问题昨天碰到一个需求,需要开闭el-dialog。我在这个dialog里面放了一个el-tree。这个el-tree是根据传进el-dialog的不同主键动态生成的。其他功能都还好,就是这个el-tree,当我关闭el-dialog再打开的时候,上一个dialog的el-tree的值和状态都会带过来,这显然不是我要的效果解决1、分析为什么会发生这个情况?因为el-dialog的关闭不是真的关闭,而是隐藏。这就导致一个问题,点击关闭以后,该dialog的内存不会被清除,到下一次再次打开时,就会发生原创 2020-09-15 10:55:30 · 2719 阅读 · 0 评论 -
vue用el-scrollbar替换原生滚动条且不干扰其它style
1、用el-scrollbar包裹目标div2、为目标div设置class,如class=“test-class”3、全局样式: .test-class .el-scrollbar__wrap { overflow: scroll; width: 111%; height: 120%; }原创 2020-09-10 19:22:23 · 1064 阅读 · 0 评论 -
Element-UI中内置动效小记
1、前言为了避免页面各种组件进出太直白,我们常常会给组件加上动效。在element中,为我们提供了内置动画效果:<transition name="el-fade-in"> <div v-show="show" class="transition-box">.el-fade-in</div></transition>我们只需要控制显隐即可控制显示特效,非常方便。2、问题但是,默认动画效果有时候太快或者太慢,不符合我们的预期,如何调整?以渐隐原创 2020-08-31 16:57:59 · 2540 阅读 · 0 评论 -
Vue中使用懒加载El-Tree使用样例(前后端)
El-Tree使用一、后端1、树节点实体类2、控制器和相关服务3、dao层二、前端1、HTML部分:2、静态配置:3、函数一、后端1、树节点实体类@Datapublic class TreeNode { private long id; // 结点主键 private String code; // 结点编码 private String name; // 结点名 private Integer grade; // 结点等级 private Integer displayOrder; //原创 2020-08-29 15:02:25 · 1125 阅读 · 0 评论 -
Vue父子组件传值小记
Vue父子组件传值小记组件传值的几种比较实用常见的方式一、props父->子传值1、父组件向子组件传值思路:2、父组件向子组件传值实现:01、引入:02、注册:03、定义待传递的全局变量:04、使用:05、子组件使用:二、emit子->父传值1、思路:2、实现:01、子组件定义函数:02、父组件接收:001、父组件引入子组件:002、父组件使用子组件:三、bus同级传值1、思路2、实现01、在main.js中挂载02、在组件中使用——发送方03、在组件中使用——接收方四、记录在全局变量中保存组原创 2020-08-26 11:16:25 · 143 阅读 · 0 评论 -
结合el-table实现不确定列、行数的动态sql查询
el-table进阶使用一、前端1、标签部分2、解释二、输入sql三、后端1、实体类不可用2、获取列名/列值一、前端1、标签部分<el-table :height="tableHeight" ref="multipleTable" :data="tableData" v-loading="dataListLoading" highlight-current-row tooltip-effect="dark" :row-style="rowClass" style="f原创 2020-08-07 09:18:49 · 1719 阅读 · 1 评论 -
Element-UI:el-table比较细节的功能
如何格式化显示某字段1、问题2、官方提供的formatter01、定义选项02、绑定具体字段03、在绑定函数中处理1、问题可能经常有这种情况,某个字段只有是非、是否等较少的选项,为了后台使用便捷或者降低存储所需空间,我们只会存01或者YN,但是这样一来前端如果直接显示,就会暴露字典配置,既不美观也不安全。如何解决这个问题?2、官方提供的formatter这个描述实际上太过简略了,实际上要稍微复杂一些01、定义选项例如:options: [{ value: 'Y', label: '是原创 2020-08-04 15:47:17 · 522 阅读 · 0 评论 -
Vue进阶知识笔记
一、前端拦截与参数获取当我们写Java后台的时候,常常用到filter来进行一些过滤拦截。前端实际上也有类似的功能, 称为响应拦截。在Vue中怎么实现这种功能呢?第一步:进入router/index.js第二步:末尾添加/** * 拦截 */router.beforeEach((to, from, next) => { if(to.path='/login'){...} if(to.query.key === ?){...}})其中:to.path是来访Mapping,原创 2020-07-29 15:05:50 · 371 阅读 · 0 评论 -
Ehcarts+Vue+ElementUI进阶使用笔记
Ehcarts可以实现很多炫酷的数据可视化效果,但是当需求变得复杂时,例如需要结合Vue和Element的各种组件一起使用时,难度会指数上升。今天到了一个很有意思的案例:需求:使用Element的el-tabs标签页,但是具体会有多少标签页不确定,要根据后台传来的数据量动态渲染,在每一个标签页里,要渲染两个echarts树形图。难点:1、动态渲染出若干个el-tab-pane;2、为一个标签绑定一个点击事件,使得点击对应标签时,可以渲染出当前标签对应的echarts;3、由于直到数据传到之前都不确定有原创 2020-06-23 23:00:43 · 284 阅读 · 0 评论 -
Vue-Particles的重大问题
对于大部分现代浏览器而言,例如chrome,firefox,edge等,它们都极大的支持了ES5和ES6,这使得VUE及各类插件可以流畅地运行在其上但是,万恶地IE不会让我们好过当我们在项目中引入粒子特效的时候——整个页面会变成空白,这是重大的显示bug,对于前端工程师来说是决不能忍的最可怕之处在于这个问题很难检查,因为会导致IE白屏的有两种可能——vue-particles源码问题,以及...原创 2020-03-20 21:27:53 · 1474 阅读 · 0 评论 -
Vue前后端参数传递(重要)
一般来说,大部分情况下springboot中controller只要参数名可以一一对应,就可以很方便的传递参数,但是如果前台给后台的参数非常复杂,涉及到多种类型,那么controller就无法智能的自动注入了let ProdOBJ={ "productCode": "155", "productName": "产品-徐", "productList...原创 2020-03-16 20:15:20 · 7943 阅读 · 0 评论 -
Element-UI一些使用细节
1、input框样式修改.el-input__inner { height: 20px; font-size: 13px;}还可以调整字体、边框、背景色等等2、el-table的背景色调整.el-table, .el-table__expanded-cell { background-color: transparent;}el-table th, .el...原创 2020-03-10 15:25:24 · 117 阅读 · 0 评论 -
Vue中v-show的细节问题
依旧是在动态绑定时发生的问题例如: 后台传来n条数据,要根据这n条数据生成n个div,并且要在每个div对应的按钮上添加一个方法,来控制div的v-show属性如果使用一级数组的话,如isShow[false,false…]这种形式,vue是无法正常执行逻辑的,因为v-show没有深度绑定如果要实现这个功能,需要在数组中嵌套对象,利用对象属性读取和控制真值<div id=...原创 2020-03-10 10:50:45 · 1092 阅读 · 0 评论 -
Vue的几个常用难点
一、window,open()配合this.$router使用1、参数发送页// 待传递的参数var apiTemp = {}apiTemp.testName= row.testNameapiTemp.testClass = row.testClassapiTemp.testCode = row.testCode// 与地址绑定,生成对象const routeDate = this...原创 2020-03-02 08:50:56 · 4987 阅读 · 0 评论