Vue
文章平均质量分 68
lookingForw_4585
大龄青年,编程小白。
头发茂密的前端攻城狮~~~
展开
-
【2022-11-09】vue2实现简单的tag-input标签输入框
vue2实现tag-input原创 2022-11-09 11:12:45 · 3123 阅读 · 1 评论 -
【2022-8-24】vue2中使用箭头函数踩坑记录
vue2项目中使用箭头函数踩坑原创 2022-08-24 15:42:31 · 542 阅读 · 0 评论 -
[2022-7-25]vue3学习之简单hooks使用
vue3学习之简单hooks使用原创 2022-07-25 15:36:12 · 835 阅读 · 0 评论 -
2021-07-15 el-tree获取选中节点,节点全选时返回被全选的节点,未全选则正常返回被选中的节点
el-tree获取选中节点,节点全选时返回被全选的节点,未全选则正常返回被选中的节点相关描述实现代码实现思路:实现代码:感谢:相关描述 需要获取树组件选中的节点,假如父节点被选中(该节点全选),即只返回父节点的id,如父节点未被全选,则正常返回被选中节点的id。示例一:如上图,所以的节点都选中了,此时需要获取到一级 2 这个节点的id即可示例二:如上图,此时,除了三级 3-2-1 节点外,其余节点均选中,此时需要获取到三级 3-2-2 、二级 2-1 两个节点的id。即二级2-1节点是全选原创 2021-07-15 18:03:34 · 2264 阅读 · 1 评论 -
项目踩坑记录:require.js+jQuery等改造vue
require.js+jQuery等改造vue背景介绍问题描述解决方案反思及说明写在最后背景介绍改造require.js+jQuery+bootstrap实现的一个老项目。 原有项目使用require.js实现模块化,ui界面及操作主要是bootstrap配合jQuery,项目中部分实现代码嵌套在java代码中(大概就是这个意思),为方便后续维护,现将此项目计划改造为vue的项目。由于项目还会添加新的功能,原来的编码(实现)方式有点不合时宜——所有的页面都是通过前端发送数据请求后,后端返回的HTML原创 2021-05-25 17:01:08 · 322 阅读 · 0 评论 -
antv/G6使用记录,自定义简单的节点,实现流程图
antv/G6使用记录,自定义简单的节点,实现流程图效果展示实现代码说明效果展示作为一个简单的记录,包括自定义节点,边等实现代码完整代码如下:G6使用的版本为3.5.0<template> <div class="main-content-box"> <div id="container"></div> </div></template><script>import G6 from '@a原创 2021-04-07 17:22:40 · 3914 阅读 · 13 评论 -
el-collapse-transition 移植到项目中遇到的问题,及其解决方法。
el-collapse-transition 移植到项目中遇到的问题,及其解决方法问题描述思路解析解决方案方法一方法二:方法三:问题描述 自有项目中需要实现一个collapse折叠面板的功能,由于对饿了么使用较多,故打算将饿了么中的collapse组件移植到项目中,只需要对一些细节的样式进行修改即可。本着兢(混)兢(水)业(摸)业(鱼)的态度,开始移植collapse折叠面板。 但是在查看饿了么的源码,以及实现了collapse功能后,发现面板的动画效果失效了,打开折叠的操作感觉很生硬。影响使用体验。原创 2021-03-11 12:25:54 · 2405 阅读 · 0 评论 -
el-tree 饿了么树状控件自定义节点的显示图标
el-tree 饿了么树状控件自定义节点的显示图标效果展示实现代码替换小三角为图标效果展示el-tree组件默认显示时,节点是不带icon的,如需使用时,可以通过自定义插槽的方式来实现,实现方式在网络上也存在很多,本篇只简单记录个人如何实现。功能点:替换默认显示的小三角图标展开即关闭节点时图标切换子节点的默认显示图标实现代码<template> <div class="tree"> <el-tree :data="data5"原创 2021-03-01 12:00:22 · 3659 阅读 · 1 评论 -
vue2.x版本中使用summernote编辑器
vue2.x版本中使用summernote编辑器summernote的基本属性如何配置(工具栏)获取数据(HTML内容)summernote的基本属性 summernote是一款基于jQuery的编辑器,vue社区中关于类似的编辑器也有很多,但是原有的就项目中使用了summernote,为了保持统一,故使用summernote!显示效果如下,顶部的工具条为自定义配置的,后面讲到。使用summernote需要先安装依赖:npm install summernotenpm install jqu原创 2021-02-26 15:10:53 · 1435 阅读 · 2 评论 -
echarts踩坑记录---dataZoom显示问题,icon数目出错!
echarts踩坑记录---dataZoom显示问题,icon数目出错!问题描述:分析问题:解决方案:总结:问题描述: 由于是有echarts图表的数据较多,所以使用了dataZoom 组件,用户可以根据自身喜好选择要查看的时间段。 于是参照官方 example,代码如下:dataZoom: [ { show: true, start: 0, end: 15 }, {原创 2021-01-04 15:12:06 · 2317 阅读 · 2 评论 -
Typescript + Vue 2.x版本,使用element-ui中form表单验证的问题记录
Typescript + Vue 2.x版本,使用element-ui中form表单验证的问题记录报错:Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'validate' does not exist on type 'Vue'.错误分析:解决方法:错误:form的validate()方法不执行(不进入该方法)错误分析:注意:此处自定义的校验方法,使用官方示例中 的 箭头函数原创 2020-12-30 16:16:39 · 1359 阅读 · 0 评论 -
echarts踩坑记录---vue中使用echarts图表时数据绑定及tooltip自定义显示
echarts踩坑记录---vue中使用echarts图表时数据绑定及tooltip自定义显示echarts在vue项目中的使用(场景)数据绑定问题tooltip自定义显示echarts在vue项目中的使用(场景) 项目开发时使用echarts进行数据的展示,数据由后台获取。由于是根据不同的服务器来确定展示的内容,故需要选获取服务器的信息,将获取到的服务器信息作为echarts查询的参数进行数据查询。 步骤如下:方式请求,获取服务器信息服务器信息返回,将服务器的标识作为echarts数据请求原创 2020-11-20 13:11:41 · 2454 阅读 · 1 评论 -
Vue组件中使用canvas实现蜂巢效果的一些尝试
Vue组件中使用canvas实现蜂巢效果的一些尝试 前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效果图: 近期看到一篇在Vue组件中使用canvas实现蜂巢效果的文章,抱着试一试的想法,对文章中的实现进行了复现。虽然实现上和d3存在区别,但是条条大路通罗马,基本上实现了效果:实现过程:使用canvas,绘制效果。两个canvas元素,一个用于绘制图标,一个用于绘制蜂巢,并设置交互事件canv原创 2020-11-06 14:49:34 · 1749 阅读 · 1 评论 -
antv/G6使用记录,调用save方法,对数据model进行改造,并重新渲染
antv/G6使用记录,调用save方法,对数据model进行改造,并重新渲染 主要说明在使用antv/g6时,对于画布中的节点,做某种操作(例如改变节点的颜色等),保存数据,以供一个新的画布渲染的方法 例子比较简单,不涉及太复杂的操作,先看下效果: 左侧的容器中是初始的画布,使用自定义的方式对菱形节点进行了注册(此方法为官方示例),点击按钮时将左侧的画布中的元素的数据模型进行保存,然后在右侧新创建一个graph,将保存的值稍加修改,然后进行渲染,就得到了右侧容器中的内容 场景:例如点原创 2020-10-17 16:43:01 · 5079 阅读 · 2 评论 -
vue中,使用scss后,样式穿透失效的问题
vue中,使用scss后,样式穿透失效的问题 如题,vue项目中样式使用scss时,对于需要穿透的样式,使用 >>> 穿透可能会不生效,解决办法也很简单:将<style lang="scss" scoped>.a >>> .b { font-size: 24px;}</style>修改为:<style lang="scss" scoped>.a /deep/ .b { font-size: 24px;}原创 2020-09-27 16:47:54 · 10034 阅读 · 1 评论 -
适合悄咪咪看的vue组件间通信常用方式,附源码!
vue组件间通信常用的六种方式 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系: 如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。 针对不同的使用场景,如何选择行之有效的通信方式? 下面就介绍几种vue组件之间通信的方式:方法一 props/$emit 这种方式比较简单,也是最基本的传值方式。 父组件ParentView.原创 2020-08-14 19:37:28 · 203 阅读 · 0 评论