前端相关的配套使用
关注
分享
扫一扫
文章平均质量分 54
Echarts、Animate.css、swiper、elementUI接入高德地图等各类前端周边涉及的使用
超级码吏
苟有恒，何必三更眠五更起；最无益，莫过一日曝十日寒
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
sharp-image开源免费的图片压缩工具
本文介绍了sharp-image图片压缩工具的安装和使用方法。通过npm全局安装后，使用sharp-image命令即可快速压缩图片，支持批量处理当前目录下的图片文件。操作简单高效，只需一行命令即可完成图片优化，适合开发者快速集成到工作流程中。原创 2025-07-25 09:20:07 · 233 阅读 · 0 评论 -
echarts实现企业大事记时间轴
该代码实现了一个企业大事记时间轴展示，使用ECharts库创建动态可视化图表。主要特点包括： 采用平滑曲线展示2005-2024年间企业关键发展节点 每个时间节点通过圆形标记点标注，显示年份和对应事件 支持交互功能：悬停显示详细信息、支持缩放和自适应窗口大小 可视化呈现企业发展历程，包括成立、业务拓展、业绩增长等里程碑事件 采用瀑布流式布局，标记点根据数值位置自动调整标签显示方向 该时间轴清晰展示了企业从成立到年服务门店突破12000家的发展轨迹，销售额从0增长到1.35亿的全过程。原创 2025-07-23 15:17:06 · 643 阅读 · 0 评论 -
swiper无停顿自动匀速轮播
本文介绍了一个基于Swiper.js实现的匀速无停顿自动轮播效果。通过设置CSS的transition-timing-function为linear，使轮播动画保持匀速运动。代码配置了响应式布局，在不同屏幕宽度下展示不同数量的幻灯片（1-9张不等），并设置了5000ms的滚动速度、10ms自动切换间隔和循环播放功能。关键点在于强制使用线性过渡函数，消除了默认的缓动效果，实现平滑不间断的轮播体验。原创 2025-07-02 14:02:47 · 432 阅读 · 0 评论 -
Swiper.slideTo 点击定位到slide item
摘要：该代码实现了一个基于Swiper轮播组件构建的三屏切换效果。通过HTML结构定义三个不同背景色的幻灯片，使用JavaScript监听按钮点击事件，调用Swiper的slideTo()方法实现按钮与幻灯片的联动。页面包含800×500px的轮播容器，每个幻灯片显示编号和不同背景色（绿色、蓝色、黄色），底部按钮可分别跳转到对应幻灯片。代码简洁地展示了Swiper插件的锚点跳转功能实现方式。原创 2025-06-06 10:15:31 · 280 阅读 · 0 评论 -
非常强大的图片预览灯箱效果demo
本文展示了一个使用Fancybox插件实现的图片画廊网页。通过HTML代码创建了8个缩略图链接，每个链接都指向不同的大尺寸自然风景图片。当用户点击缩略图时，Fancybox会以弹窗形式展示高清大图，并提供画廊浏览功能。实现方法简单，只需引入Fancybox的CSS和JS文件，并为图片添加data-fancybox属性即可自动激活灯箱效果。该演示展示了Fancybox轻量级、易集成的特点，适合快速构建响应式图片展示页面。原创 2025-05-27 10:22:53 · 253 阅读 · 0 评论 -
swiper实现3D立体轮播
本文展示了一个使用Swiper库实现的3D轮播图效果。通过HTML、CSS和JavaScript代码，创建了一个具有封面流效果的轮播图。轮播图包含多张自然风景图片，支持自动循环播放、分页器导航以及3D旋转效果。代码中使用了Swiper库的coverflow效果，配置了旋转、拉伸、深度等参数，使图片在切换时呈现出立体感。此外，轮播图还支持自适应显示和抓手光标，提升了用户体验。整体实现简洁高效，适合用于展示图片或内容的网页设计。原创 2025-05-23 16:39:32 · 422 阅读 · 0 评论 -
前端签名插件 smooth-signature
示例简单案例原创 2025-01-09 09:40:39 · 519 阅读 · 0 评论 -
使用tesseract.js插件实现前端js识别提取图片的文字
tesseract.js 的 demo原创 2024-09-09 10:21:49 · 1236 阅读 · 1 评论 -
axios 封装下载功能
封装axios接口请求下载二进制文件原创 2022-04-07 11:12:29 · 828 阅读 · 0 评论 -
axios取消上一页面的请求
使用axios CancelToken方法取消请求原创 2023-09-18 14:24:37 · 207 阅读 · 0 评论 -
vue-cli中 使用axios调接口数据交互
首先要安装了axiosnpm install axios --save如下图：然后再main.js里配置下axiosimport Axios from 'axios'Vue.prototype.$axios=Axios如下图：至此请求插件安装配置完毕下面获取下数据看看因为原生的样式太丑，我就用element了，那这样就需要安装和配置下element了，如下：npm...原创 2019-07-05 10:21:31 · 864 阅读 · 0 评论 -
vue2 vueX 状态管理器的基础配置与使用
介绍简单的VueX使用安装在项目目录执行命令npm install vuex --save配置import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) const store = new Vuex.Store({ //初始的常量集 state: {} //触发改变参数 mutations: {} //异步触发...原创 2020-01-19 17:54:42 · 429 阅读 · 0 评论 -
vue2 element封装表格拖动列顺序、增减列
三个组件表格可拖动：<template> <div class="drag-table" :class="{ 'table-moving': dragState.dragging }"> <el-table ref="table" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading".原创 2021-04-16 16:00:19 · 697 阅读 · 0 评论 -
vue2 elementUI递归渲染多级菜单栏
需要将组件拆分为两个：菜单栏容器一个，菜单栏列表一个菜单栏列表<template> <div class="menu-list"> <template v-for="item in data"> <el-submenu v-if="item.children.length > 0" :key="item.menuIdStr" :index="item.menuIdStr"原创 2021-04-26 09:59:18 · 2035 阅读 · 0 评论 -
js 实现导入excel文件转json
超级简单的xlsx插件的使用案例原创 2020-07-27 18:08:41 · 1843 阅读 · 2 评论 -
vue做SEO网络优化【prerender-spa-plugin】
一、安装插件：npm install --save prerender-spa-pluginnpm install --save vue-meta-info二、webpack.prod.conf.js文件中配置两个：const PrerenderSPAPlugin = require('prerender-spa-plugin')const Renderer = PrerenderSPAPlugin.PuppeteerRenderernew PrerenderSPAPlugin(原创 2020-07-15 11:47:25 · 567 阅读 · 2 评论 -
前端使用printJS插件 执行浏览器打印
一个很小的javascript库，帮助从网络打印。原创 2022-12-06 12:05:53 · 1844 阅读 · 2 评论 -
前端xlsx插件简单说明
xlsx是一个强大的JS处理Excel文件的前端框架。使用xlsx我们可以在JS里做Excel的各种导出导入操作原创 2022-11-22 11:14:52 · 1833 阅读 · 1 评论 -
前端图片裁剪 cropperjs的简单使用
cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持鼠标滚轮操作，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。原创 2022-11-03 11:05:34 · 490 阅读 · 1 评论 -
前端js压缩图片：compressionjs的使用
avaScript图像压缩。使用浏览器的本机画布。toBlob API来完成压缩工作，这意味着它是有损压缩、异步的，并且在不同的浏览器中具有不同的压缩效果。一般在上传客户端映像文件前使用此功能预压缩。原创 2022-10-31 14:44:52 · 1157 阅读 · 0 评论 -
前端快速生成二维码
/第二步：获取DOM元素 并 进行处理。//第三步：生成分享二维码。原创 2022-10-13 13:38:38 · 1860 阅读 · 0 评论 -
海康威视WEB3.0控件开发包提供的demo 调试
设备概览：网线 ×3录像机 ×1交换机 ×1摄像头 ×1设备间连接方式：一根网线连接电脑到交换机一根网线连接摄像头到交换机一根网线连接录像机到交换机下载官方demo我这设备支持websocket取流，所以需要下载WEB3.0控件开发包 V3.0配置电脑环境需要保证设备与电脑之间在一个网段查看录像机的ip：那么你的电脑也必须在192.168.1.啥啥啥：启动demo安装插件：启动环境：在IE浏览器预览demoWEB无插件开发原创 2022-02-27 11:49:53 · 6502 阅读 · 5 评论 -
前端使用vue-video-player做直播流视频
安装：npm install vue-video-player --savenpm install videojs-contrib-hls --save引入：import VideoPlayer from 'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')import "videojs-contrib-hls"Vue.use(Vi原创 2022-01-19 17:39:05 · 2764 阅读 · 3 评论 -
超好用的前端全屏插件：vue-fullscreen
官网：添加链接描述安装npm install vue-fullscreen引入import VueFullscreen from ‘vue-fullscreen’Vue.use(VueFullscreen)使用<template> <fullscreen fullscreen-class="big-view bg-white" :page-only="true" :exit-on-click-wrapper="false" v-mo原创 2022-01-14 13:18:37 · 2116 阅读 · 0 评论 -
高德地图鼠标经过点标记显示信息窗体
创建点标记：实例化信息窗体放入鼠标移入/移出事件原创 2021-04-21 11:29:36 · 3817 阅读 · 5 评论 -
浏览器引入腾讯QQ的登陆
使用文档：https://wiki.connect.qq.com/js_sdk%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e引入QQ提供的依赖：https://connect.qq.com/qc_jssdk.js代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=devi.原创 2021-04-06 10:12:31 · 228 阅读 · 0 评论 -
使用xlsx插件实现json导出excel表格
安装xlsx插件原创 2020-07-10 16:30:38 · 1456 阅读 · 1 评论 -
vue-draggable-resizable 自定义多组件的拖动、缩放功能
安装：npm install --save vue-draggable-resizable-gorkys使用：index.vue<template> <div class="home content"> <el-button-group class="animate__animated animate__backInDown edit-layout-btns" v-show="$store.state.editLayout"原创 2021-02-08 13:17:16 · 3017 阅读 · 1 评论 -
vue echarts引入中国地图使用散点地图
要使用4.1.0版本的echarts！！！ 否则报Map china not exists. The GeoJSON of the map must be provided安装：npm install echarts@4.1.0 --save引入：import * as echarts from 'echarts'import 'echarts/map/js/china'Vue.prototype.$echarts = echarts;使用：<template>原创 2020-12-31 13:46:42 · 3177 阅读 · 3 评论 -
vue引入高德地图
1. 官方获取key：https://console.amap.com/dev/key/app2. index.html引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script> 3.配置build/webpack.base.conf.js：externals: { 'AMap': 'AMap' },重启项目原创 2020-12-20 13:21:52 · 845 阅读 · 2 评论 -
前端使用sm2、sm3加密解密 案例
安装：npm install --save sm-crypto引入：const sm2 = require('sm-crypto').sm2const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1加密：let encryptData = sm2.doEncrypt(msgString, publicKey, cipherMode) // 加密结果conso.log("加密结果：",encryptData);解密：let decryptData原创 2020-11-23 13:50:06 · 14567 阅读 · 7 评论 -
echarts折线图有两条虚线
itemStyle: { normal: { lineStyle: { //系列级个性化折线样式 width: 2, type: 'dashed' // 虚线 } }}原创 2020-09-18 09:57:45 · 1811 阅读 · 0 评论 -
echarts柱状图，每根柱子颜色不一样
itemStyle: { normal: { color: function(params) { let colors = ['#23b2ff', '#6de5b7', '#f1af5a']; return colors[params.dataIndex]; } } }原创 2020-09-18 09:48:38 · 1354 阅读 · 0 评论 -
解决vue项目中i18n data里切换翻译不生效
原创 2020-08-12 13:22:15 · 3484 阅读 · 3 评论 -
vue项目引入i18n国际化切换语言翻译功能
安装：npm install vue-i18n --save 建立语言资源： src/assets/languages例如中文和英文文件：英文文件：export default { menu: { home: "home", msg: "this is an about page" }, content: { main: "this is content" }}中文文件：export default { menu: { hom原创 2020-08-12 12:02:45 · 928 阅读 · 0 评论 -
vue div模块位置拖动、宽高调整插件【vue-grid-layout】
github：https://github.com/jbaysolutions/vue-grid-layout安装：npm install vue-grid-layout --save引入：import VueGridLayout from 'vue-grid-layout';使用： data() { return { elements: [ { x: 0, y: 0, w: 2, h: 2, i: "0" }, { x: 2, y: 0, w: 2, h:原创 2020-08-05 13:40:32 · 2818 阅读 · 3 评论 -
基于js的原生插件：canvas绚丽的动态气泡背景
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js</title></head><body> <script src="https://cdn.jsdelivr.net/npm/bu...原创 2019-12-05 17:12:43 · 1010 阅读 · 0 评论 -
前端插件Animate.css的调用
引入：<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></head>或者：npm install animate.css --save调用：为元素设置动画需要添加anima...原创 2019-11-08 12:12:26 · 1226 阅读 · 0 评论 -
原生开发引入高德地图
高德地图：应用到哪里就点哪个，有应用到安卓端的、IOS端的、WEB端等…举个例子：WEB端注册账号：申请Key：拿到Key之后就是1. 开始引入高德地图： <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的Key粘到这里"></scrip...原创 2019-10-14 17:13:02 · 1015 阅读 · 0 评论 -
在vue-cli中写echarts （子父组件：echarts图表怎么设置响应式 自适应大小）
是用子父组件式写的：父组件：<template> <div class="index2"> <p slot="title" class="title">我的处理量</p> <Mydisposes ref="myChange" /> </div></template><...原创 2019-09-19 14:18:11 · 3006 阅读 · 0 评论