vue2项目开发中,需要实现轮播,并且轮播的效果类似3d效果。
效果截图
动态效果
演示地址
vue2 实现走马灯3d轮播效果
使用插件
这里使用到了vue-carousel-3d插件,vue-carousel-3d介绍
安装插件
pnpm i vue-carousel-3d...
yekong
2天前 305℃
2喜欢
vue实现导出word文档功能,导出数据表格,结合html2canvas实现导出图片
演示地址
vue实现导出word文档功能
代码
/**
* @Author: 858834013@qq.com
* @Name: exportDocument
* @Date: 2024...
yekong
6天前 568℃
0喜欢
vue3 数据可视化大屏 开发中,需要渲染高德地图实现轨迹回放。
我们可以通过Polyline来实现一条轨迹线,通过marker.moveAlong实现移动动画效果。
动态效果
演示地址
vue3 高德地图实现轨迹回放
引入高德地图
使用前需要引入高德
<scr...
yekong
6天前 557℃
0喜欢
11 vue3 高德地图多个轨迹回放
实例代码:vue3高德地图多个轨迹回放
10 vue3 自定义图标点击放大地图显示子图标移入后显示弹窗
vue 高德地图显示一级数据的图标,鼠标移入一级图标,显示标题,单击一级图标放大地图,双击一级图标显示弹窗。
当一级图标放大后显示二级图...
yekong
6天前 648℃
0喜欢
vue 数据可视化大屏 项目中要求列表可以自动滚动,当前使用的是vue2实现的效果,如果要使用vue3的话,可以通过vue3 使用vue3-seamless-scroll实现列表无缝滚动插件实现.
安装依赖
npm i vue-seamless-scroll --save
实...
yekong
2周前 (03-05) 1214℃
0喜欢
数据可视化大屏项目开发中,如果菜单太多的话,我们就需要滚动显示。
这里我们要实现菜单可以鼠标拖动滚动,左右箭头点击滚动,点击菜单对应的菜单居中,如果左侧或者右侧没有多余的菜单了则不再滚动。
动态效果
使用到的插件
"@better-scroll/core"...
yekong
4周前 (02-21) 1787℃
5喜欢
vue2项目开发中,轮播时,会需要一些类似3d的效果,今天整理的插件:vue-carousel-3d一个3d轮播插件。如果是在vue3项目中运行的话可以使用:vue3 3d轮播插件 - vue3-carousel-3d介绍
插件效果截图
动态效果
api文档
vue2 3d轮...
yekong
4个月前 (11-30) 361℃
0喜欢
vue2 element ui table表格渲染数据时,需要渲染两级表格,先渲染一级表格,然后展开下拉后,再渲染二级表格。
<el-table
ref="singleTable"
:data="list"
b...
yekong
4个月前 (11-28) 165℃
0喜欢
vue2项目需要使用element ui table的功能,但是需要修改样式,这里将实现方式记录下来。
<div class="table-container-case">
<el-table
ref="...
yekong
4个月前 (11-28) 110℃
0喜欢
数据大屏开发中,需要监听实时消息,消息是使用的,最新的项目中获取ws数据的方法:vue项目中请求WebSocket获取数据
公共方法
function getSocket(url, params, callback) {
let socket;
if (typeof (...
yekong
5个月前 (10-17) 1693℃
0喜欢
数据可视化大屏 项目开发中,会添加动画来点缀页面,有些可以通过css来实现动画,有些图片序列帧动画,序列帧动画可以通过css+雪碧图的方式来实现,也可以通过js的方式来实现,今天是使用canvas+js来实现。
组件使用
/**
* @Author: 858834013@qq.c...
yekong
6个月前 (09-26) 985℃
0喜欢
数据可视化大屏项目开发中,登录页需要一个验证码发送功能,这里我们来实现这个功能。
使用
<captcha :phone="phone"></captcha>
创建组件captcha
组件接收电话号码,使用label来显示获取验证码,...
yekong
6个月前 (09-22) 273℃
0喜欢
vue3数据可视化大屏项目开发中,需要一个24小时时间段,时间段可以点击选择,可以多选以用来记录时间段。
通过鼠标可以选择时间点,点击保存后可以将数据通过localStorage缓存到本地。
效果截图
演示地址
vue3实现时间段布防时间效果
项目应用
视频监控智能分析系统
部...
yekong
6个月前 (09-11) 238℃
0喜欢
vue3 可视化数据大屏 项目开发中,会遇到各种各样的头部,今天整理的是 vue3数据可视化大屏顶部组件 - 医疗体检健康可视化数据。
效果截图
帧动画效果
通过ae实现从两侧到中间的扫光动画,使用帧动画生成。帧动画虽然增加了效果同时也增加了文件大小。
动画持续时间
动画持续...
yekong
7个月前 (08-29) 301℃
0喜欢
vue3 数据可视化大屏 中,经常会需要各种效果的表格,这里将各种表格效果整理在一块,方便复用。
10 斑马线装饰表格
9 表格效果
表头和表列表两侧各有两个三角装饰图标。
8 仿3d表格效果
组件代码
vue3 仿3d表格效果
由背景图片进行装饰,让表格看起来有3d的感觉。...
yekong
7个月前 (08-29) 1648℃
3喜欢
vue3 数据可视化大屏 开发中,需要展示一些表格效果,今天整理 vue3 仿3d表格效果。
通过使用flex控制宽度,通过Vue3SeamlessScroll实现列表滚动,根据状态字段显示不同的label样式。
部分代码
<template>
<div...
yekong
7个月前 (08-29) 418℃
0喜欢
vue 数据可视化大屏 项目中,按照效果图,需要实现一组气泡效果,气泡内有数字以及标题。
这里我们需要实现这里出气泡的大小,位置以及气泡的颜色等信息。将气泡渲染出来后,为了让页面看起来更生动,我们使用gsap来给组件添加一个上下轻微晃动的效果。
效果截图
效果动画
组件代码
...
yekong
8个月前 (07-14) 627℃
1喜欢
vue 数据可视化大屏 开发中,需要实现横向滚动的效果,除了可以使用鼠标拖动滚动外,还需要可以通过点击按钮实现左右滚动。
效果截图
动态效果
实现代码
/**
* @Author: 858834013@qq.com
* @Name: scrollbar
* @Date: 20...
yekong
8个月前 (07-14) 347℃
0喜欢
vue 数据可视化大屏 项目开发过程中,需要实现一个按钮,按钮要可以点击,点击后,对应的图标需要有一个旋转的动画效果。
实现代码
<template>
<div class="refresh" @click="getRefr...
yekong
9个月前 (07-01) 281℃
0喜欢
vue3 两级树列表,父节点可以展开收缩 可以全选和取消全选 子节点可以选中 子节点全部选择后父节点自动选择
可以按照以下步骤进行操作:
在Vue组件中,创建一个包含树的数据的数组,每个节点包含id、label、selected、expanded和children属性。
在模板...
yekong
9个月前 (06-28) 252℃
0喜欢