element-plus table自带的筛选功能不能够满足客户的需要,客户要求筛选过功能可以支持搜索,这里我们实现这个功能。
筛选组件
<template>
<div class="filter-container">
...
yekong
16小时前
喜欢
横向滚动动态宽度时无法滚动问题
项目开发中需要实现横向滚动,但是客户的图片宽高并不是固定的,要求图片高度固定,宽度自适应,但是在使用@better-scroll/core实现横向滚动时,如果图片设置为动态宽度后,却无法正常滚动了,这里我们需要使用另外一个插件进行辅助Observe...
yekong
5天前
喜欢
vue项目开发中,客户要使用天地图开发,并且要卫星图,这里记录一下卫星图的实现代码。
官方示例
官方示例
html引入api
<script type="text/javascript" src="https://api.tianditu.g...
yekong
3周前 (02-05)
喜欢
最近有个项目要求可以多图拖动裁剪,这里基础功能都满足的插件是vue-cropper但是这个插件只支持一张图操作,当前项目需要多图在一个画板里拖动拼接,所以只能二次调整vue-cropper,我们将vue-cropper插件从github上下载下来,然后调整。
使用组件
impo...
yekong
1个月前 (01-22)
喜欢
vue数据大屏项目开发中,需要实现词云效果,这里使用的是插件js-tag-cloud,但是这款插件不能根据数值显示不同大小的文字,所以只能进行二次修改了。
修改后的代码
class JsTagCloud {
/* 构造函数 */
constructor(containe...
yekong
5个月前 (10-12)
喜欢
数据大屏项目开发中,客户要求其中一个模块要点击后弹窗展示项目进度,使用甘特图来实现,今天我们来实现使用vue3实现甘特图的效果。
插件
"dhtmlx-gantt": "^8.0.10",
实例代码
<template>
...
yekong
5个月前 (09-27)
喜欢
开发了很多数据大屏了,今天突发奇想有没有办法给这些项目中的图标增加一些动画效果呢?让这些图标活起来,接下来我们来实现效果。
动态效果
动画实现原理
动画实现的主要原理:
SVG路径属性:
stroke-dasharray:定义路径的虚线模式。
strokeDashoff...
yekong
5个月前 (09-26)
喜欢
数据大屏项目开发完成上线后,为了尽可能的保护我们的代码不被调试,我们可能会需要禁用浏览器的调试工具,今天我们来推荐一款插件:
disable-devtool
disable-devtool是一个开源的JavaScript库,通过禁用开发者工具来防止代码被篡改或查看。这个库提供了一...
yekong
5个月前 (09-26)
喜欢
最近有一个项目,客户要求根据经纬度将一些标注渲染在图片上,但是客户没有提供geoJson数据,如果没有geoJson那么就没办法将标注渲染到图片准确的位置上。为了能够准确的将标注渲染到坐标上,我们需要根据图片来想办法获取到geoJson数据。
因为这是一个小区域的坐标范围,并不是...
yekong
5个月前 (09-23)
喜欢
之前我们通过图片获取了图片的四角坐标
vue项目通过图片获取geoJson数据(图片配准),接下来我们通过四角坐标配置图片,然后勾勒数据。
我们通过四角坐标将图片渲染到地图上,这里我们使用的是地图不是高德地图而是leaflet,之所以不使用高德,是因为高德地图渲染图片的时候是通过...
yekong
5个月前 (09-23)
喜欢