![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端相关的配套使用
文章平均质量分 51
Echarts、Animate.css、swiper、elementUI接入高德地图等各类前端周边涉及的使用
美酒没故事°
苟有恒,何必三更眠五更起;最无益,莫过一日曝十日寒
展开
-
axios 封装下载功能
封装axios接口请求下载二进制文件原创 2022-04-07 11:12:29 · 736 阅读 · 0 评论 -
axios取消上一页面的请求
使用axios CancelToken方法取消请求原创 2023-09-18 14:24:37 · 141 阅读 · 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 · 775 阅读 · 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 · 372 阅读 · 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 · 487 阅读 · 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 · 1672 阅读 · 0 评论 -
js 实现导入excel文件转json
超级简单的xlsx插件的使用案例原创 2020-07-27 18:08:41 · 1605 阅读 · 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 · 494 阅读 · 2 评论 -
前端使用printJS插件 执行浏览器打印
一个很小的javascript库,帮助从网络打印。原创 2022-12-06 12:05:53 · 1502 阅读 · 2 评论 -
前端xlsx插件简单说明
xlsx是一个强大的JS处理Excel文件的前端框架。使用xlsx我们可以在JS里做Excel的各种导出导入操作原创 2022-11-22 11:14:52 · 1660 阅读 · 1 评论 -
前端图片裁剪 cropperjs的简单使用
cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用。原创 2022-11-03 11:05:34 · 396 阅读 · 1 评论 -
前端js压缩图片:compressionjs的使用
avaScript图像压缩。使用浏览器的本机画布。toBlob API来完成压缩工作,这意味着它是有损压缩、异步的,并且在不同的浏览器中具有不同的压缩效果。一般在上传客户端映像文件前使用此功能预压缩。原创 2022-10-31 14:44:52 · 1028 阅读 · 0 评论 -
前端快速生成二维码
/第二步:获取DOM元素 并 进行处理。//第三步:生成分享二维码。原创 2022-10-13 13:38:38 · 1382 阅读 · 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 · 6195 阅读 · 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 · 2663 阅读 · 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 · 1842 阅读 · 0 评论 -
高德地图鼠标经过点标记显示信息窗体
创建点标记:实例化信息窗体放入鼠标移入/移出事件原创 2021-04-21 11:29:36 · 3287 阅读 · 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 · 178 阅读 · 0 评论 -
使用xlsx插件实现json导出excel表格
安装xlsx插件原创 2020-07-10 16:30:38 · 1316 阅读 · 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 · 2486 阅读 · 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 · 2927 阅读 · 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 · 671 阅读 · 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 · 14243 阅读 · 7 评论 -
echarts折线图有两条虚线
itemStyle: { normal: { lineStyle: { //系列级个性化折线样式 width: 2, type: 'dashed' // 虚线 } }}原创 2020-09-18 09:57:45 · 1695 阅读 · 0 评论 -
echarts柱状图,每根柱子颜色不一样
itemStyle: { normal: { color: function(params) { let colors = ['#23b2ff', '#6de5b7', '#f1af5a']; return colors[params.dataIndex]; } } }原创 2020-09-18 09:48:38 · 1246 阅读 · 0 评论 -
解决vue项目中i18n data里切换翻译不生效
原创 2020-08-12 13:22:15 · 3178 阅读 · 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 · 845 阅读 · 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 · 2598 阅读 · 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 · 939 阅读 · 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 · 1159 阅读 · 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 · 908 阅读 · 0 评论 -
echarts 纵坐标的数字位为整数
minInterval: 1原创 2019-09-29 10:03:18 · 3725 阅读 · 0 评论 -
echarts 鼠标经过时改变折线拐点的小圆圈样式
series: [{type: ‘line’,// symbol:‘circle’, // 折线点设定为实心点symbolSize: 9, // 设定折线点的大小label: {normal: {// show: true, // 折线上的文字是否显示position: ‘top’}},// 折线条的样式lineStyle: {color: “#3aa7ff...原创 2019-09-26 15:31:11 · 10220 阅读 · 2 评论 -
echarts 自定义鼠标经过图时的悬浮框内容 formatter
使用formatterreturn的内容就是悬浮框显示的内容如图:原创 2019-09-26 11:23:31 · 2144 阅读 · 0 评论 -
echarts图表的横轴文字分两行显示
在X轴的数据那块追加个map()函数,往里面写个功能:data: ['09/19 周一', '09/20 周二', '09/21 周三', '09/22 周四', '09/23 周五', '09/24 周六', '09/25 周日'].map(function (str) { return str.replace(' ', '\n')})如下:那么就实现横坐标的数据分两行显示了:...原创 2019-09-19 15:34:29 · 9048 阅读 · 4 评论 -
在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 · 2916 阅读 · 0 评论 -
echarts 折线图背景色渐变
<template> <div class="mydisposes"> <p style="text-align: right;"><Icon type="ios-radio-button-on" style="color: #55C926 ;" /> 我的累计处理量: <b style="font-size: 20px;">...原创 2019-09-16 14:58:57 · 2815 阅读 · 0 评论