分类:vue

vue开发笔记

vue element ui 走马灯组件Carousel手动切换

vue element ui 走马灯组件Carousel手动切换
vue2项目开发中,需要一个功能,tab切换后,走马灯也要同步切换,查看官方文档后,发现有一个方法setActiveItem我们通过这个方法来实现切换。 tab操作 这边使用的是sync来更新active的,所以我们添加一个监听,监听到active的变化后,触发方法就可以了。...

yekong 2年前 (2023-04-05) 喜欢

vue3 环形底座效果实例

vue3 环形底座效果实例
vue3 可视化数据大屏项目开发中,数据大屏ui界面会设置一些底座效果用来衬托数据,今天整理一下自己开发过的数据大屏实例。以便于后期会遇到类似效果可以直接复用。 组件使用到了数字滚动效果以及wowjs入场动画效果 。让页面看起来更灵动。 演示地址 vue3 底座效果实例 项目应...

yekong 2年前 (2023-04-03) 喜欢

vue3 element-plus Menu使用

vue3 element-plus Menu使用
element-plus Menu在使用的时候,我们需要点击菜单后跳转到对应的路由页面,并且默认展开当前路由所在的分组,以及记过当前所在的菜单 element-plus menu说明文档 激活路由模式 将:router="true"后,点击菜单就可以实现路由...

yekong 2年前 (2023-04-01) 喜欢

vue3 六棱形底座效果

vue3 六棱形底座效果
vue3 可视化数据大屏项目开发 中,数据大屏ui界面会设置一些底座效果用来衬托数据,今天整理一下自己开发过的数据大屏实例。以便于后期会遇到类似效果可以直接复用。 组件使用到了数字滚动效果以及wowjs入场动画效果 。让页面看起来更灵动。 更多底座效果 vue3 底座效果实例集...

yekong 2年前 (2023-04-01) 喜欢

vue项目echarts效果实例整理

vue项目echarts效果实例整理
vue数据可视化大屏项目中会遇到各种各样的需求,随着项目的积累,效果也越来越多,为了提升开发效率,也会不断的积累效果代码,让其能够快速应用到新的项目用。 下面整理出最近在做项目时,所积累下来的一些效果实例。 echarts echarts是数据可视化大屏项目用用的最多的插件之一,...

yekong 2年前 (2023-03-31) 喜欢

vue3 数据可视化大屏循环请求接口

vue3 数据可视化大屏循环请求接口
vue3 数据可视化大屏项目中,因为数据需要,我们需要先通过接口获取到列表数据,然后再通过列表数据中指定的字段来获取下一级数据,这时候我们需要进行循环请求接口。 请求接口获取列表 首先请求接口获取列表,然后for循环,获取指定字段的值,通过这个值再次请求接口。 getData()...

yekong 2年前 (2023-03-31) 喜欢

vue transition结合gsap实现动画效果实例

vue transition结合gsap实现动画效果实例
vue项目开发中,为了让大屏更酷炫,会添加很多动画元素,今天来讲一下vue下transition结合gsap补间动画插件实现动画效果。 安装依赖 npm install gsap 引入组件 import gsap from 'gsap'; 使用JavaScript来执行过渡动...

yekong 2年前 (2023-03-31) 喜欢

vue 占比动画进度条实例效果

vue 占比动画进度条实例效果
vue 数据可视化大屏中,有时会需要显示一个占比进度条,两种类型根据数量显示占比,但是直接把样式写出来,又感觉单调了一点,于是想着能不能增加一个动画效果呢?让这个占比有一个推进的效果。 因为在之前已经写过一个类似的进度条占比效果,所以我们直接拿过来在之前的基础上微调一下就可以...

yekong 2年前 (2023-03-30) 喜欢

vue3 vite使用echarts绘制饼状图

vue3 vite使用echarts绘制饼状图
上一节,我们实现了使用echarts绘制柱状图,这一节我们来完成第二个区域的功能,使用echarts绘制环形饼状图. 设计图的效果图如下: 看效果比较眼熟,和自己之前做过的项目数据可视化大屏 - 固废全过程一个效果很相似,我们拿过来改一下应该就可以用了。当我们效果积累到多了,就...

yekong 2年前 (2023-03-30) 喜欢

vue3 vite 使用echarts绘制柱状图

vue3 vite 使用echarts绘制柱状图
上一节,我们实现了数据可视化大屏入场动画教程,这一节我们来完成第一个区域的功能,使用echarts绘制柱状图. 根据数据大屏设计图来看,我们一共有10个区域,所以我们创建10个item,来对应这10个区域. 为什么用编号不用名称呢?一开始的项目中,用过拼音用过英文,但是实际开发的...

yekong 2年前 (2023-03-30) 喜欢