- 博客(23)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 Echarts省份地图展示
效果图：文件中引入的咸阳json数据如下：xianyang.json/** Licensed to the Apache Software Foundation (ASF) under one* or more contributor license agreements. See the NOTICE file* distributed with this work for additional information* regarding copyright owners
2022-04-11 10:55:17
2856
2
原创 Echarts双向柱形图
样式图：代码：<template> <div id="lineChart" style="width:100%;height:100%;"></div></template><script>export default { name: "LineChart", data() { return {}; }, mounted() { this.drawChart(); }, methods
2022-04-11 10:44:32
3760
原创 Echarts饼图
样式图：代码：<template> <div class="echartsPie"> <div id="networkChart" style="width:100%;height:100%;"></div> </div></template><script>export default { name: "echartsPie", data() { return {};
2022-04-11 10:39:47
1796
原创 前端使用AES(ECB)加解密、国密算法SM2加解密、base64加解密、RSA加解密总结
1. AES(ECB)加解密AES加密在前端项目中的使用方法本人使用的框架 React 进行的SAE前端加密（不管是React，Vue，还是引入的JQuery库一样）1) 引用在public>index.html文件中引入<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>...
2021-11-15 15:22:46
10655
2
原创 Vue 3D轮播插件vue-carousel-3d
效果图：安装npm install -S vue-carousel-3d引入在main.js全局引入：import Carousel3d from 'vue-carousel-3d';Vue.use(Carousel3d);使用<template> <div> <div class="box"> <carousel-3d> <slide v-for="(item, i) in sli.
2021-11-01 14:34:22
11328
6
原创 Vue封装公告信息无缝滚动展示
效果如图所示：代码如下：<template> <div class="container"> <div id="box" ref="box"> <div class="marquee-box" ref="marquee" @mouseover="menter" @mouseleave="mleave" > <p ref="c.
2021-09-28 14:23:10
476
1
原创 Vue封装文字超出一行，省略号显示，鼠标悬浮展示全部
效果图：为大家提供了两个版本，一个是Vue+iview，一个是Vue+elementui，代码如下：一、 Vue+iview1）NormalTextTooltipol.vue组件代码<template> <div class="tooltip-wrap"> <Tooltip ref="tlp" :content="text" effect="dark" :disabled="!tooltipFl.
2021-09-10 16:02:06
6391
原创 vue实现换肤功能
elementui+less实现换肤功能效果图iview+scss实现换肤功能效果图一：用elementui+less实现换肤功能1.新建color.less文件和theme.less文件，放置到assets/less文件夹中2.color.less文件文件代码如下：@import url('./theme.less');.themea { .theme();//默认的样式}.t...
2021-09-10 09:09:23
1523
原创 vue日历插件vue-calendar
原始效果：修改后的效果：接下来，我们使用它～1.安装npm i vue-calendar-component --savecnpm i vue-calendar-component --save //国内镜像2.在使用到日历插件的文件中引入import Calendar from 'vue-calendar-component';3.原始效果代码<template> <div class="con"> <Calen.
2021-09-09 17:07:33
32502
31
原创 Vue进度条
<template> <div> <div class="Progress"> <div class="jindu" :style="{ width: jindu + '%' }"></div> </div> <div class="Progress-button"> <el-button @click="start()" type="primary" plai...
2021-09-06 11:38:28
436
原创 Vue导出复杂excel表格（适用于ElementUI、Iview）
示图：1.安装依赖npm install --save xlsx file-saver2.引入依赖到当前文件中import FileSaver from "file-saver";import XLSX from "xlsx";3.导出事件代码exportExcel(excelName) { try { const $e = this.$refs['tabel'].$el let $table = $e.querySe.
2021-08-26 17:18:40
2437
1
原创 Mac使用新版本Google浏览器，前端访问后台接口跨域，无法携带cookie问题
解决方法：1.关闭谷歌浏览器（一定要彻底退出谷歌浏览器）2.打开终端3.在终端中输入：open -a "Google Chrome" --args --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure4.此时再次访问后台接口就可以成功传递cookie并且访问接口了～...
2021-08-25 17:34:50
873
1
原创 合并两个数组一个作为key值，一个作为value值
created() { var a =['beijng','shanghai','jinan']; var b =['北京','上海','济南']; console.log(this.getnewarr(a,b));},methods: { getnewarr(keyArr,valueArr) { const arr = []; keyArr.map( (v,i) => { const obj = {}; ...
2021-08-25 16:51:17
1425
原创 Vue封装Tabs标签页
示例一组件Tabs：<template> <div class="my-tabs"> <div class="tabs-bar"> <div class="tabs-bar-nav"> <div class="tabs-tab" v-for="(tab, index) in tabList" :class="[tabIndex == tab.
2021-08-25 16:36:25
4947
1
原创 css实现8个div两行布局
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> ...
2021-08-25 15:51:03
3625
原创 Vue+OpenLayers热力图【五】
<template> <div id="app"> <div id="Map" ref="map"></div> </div></template><script>import "ol/ol.css";import VectorSource from "ol/source/Vector";import { Tile as TileLayer, Heatmap as Heatma...
2021-08-02 15:17:30
921
1
原创 Vue+OpenLayers天地图【四】
<template> <div id="map" ref="rootmap"></div></template><script>import "ol/ol.css";import { get as getProjection } from "ol/proj";import { getWidth, getTopLeft } from "ol/extent";import View from "ol/View";impor...
2021-08-02 14:44:17
373
1
原创 Vue+OpenLayers省份高亮【三】
点击下载数据： <a title="areaGeo数据" href="http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4" target="_blank"><br><template> <div id="map" ref="map"></div></template...
2021-08-02 14:30:16
861
2
原创 Vue+OpenLayers地图控件controls【二】
1.fullscreen全屏控件写法一：import { FullScreen } from "ol/control";this.map.addControl(new FullScreen());写法二：import { defaults as defaultControls, FullScreen } from "ol/control";controls: defaultControls({ zoom: false, rotate: false, a
2021-07-29 09:49:16
1594
1
原创 Vue中使用OpenLayers【一】
安装npm i -s ol地图组件 <template> <div id="map" ref="map"></div></template><script>import "ol/ol.css";import TileLayer from "ol/layer/Tile";import OSM from "ol/source/OSM";import { Map, View } from "ol";expor..
2021-07-28 09:09:04
373
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人