PoPo丶K-CSDN博客

原创 vue + elementui：分页查询，el-pagination，纯前端分页

效果：新建pages.js文件，文件内容：// 数据分页function pageData (total, pageRow, currentPage, allTableDataList) { var dealData = [] var onePageList = [] var i = 1 allTableDataList.forEach((val, index) => { onePageList.push(val) i++ if (i > page

2022-05-25 10:02:02 315

原创 vue + 高德地图 + 标记点（变大变小闪烁动画、多标记点、同一位置标记点显示个数）

高德地图引入及使用可参考：vue + 高德地图 + 图例vue + 高德地图 + 普通标记点可参考：vue + 高德地图 + 标记点先上效果图： //绘制地图 this.map = new AMap.Map('map', { resizeEnable: true, center: center, zoom: 12 }) // 标记点的数据 this.deviceList = [ { lon

2022-04-08 14:41:12 6012 11

原创 vue + 高德地图 + 标记点

高德地图引入及使用可参考：vue + 高德地图 + 图例增加标记点： // 绘制地图 this.map = new AMap.Map('map', { resizeEnable: true, center: [120, 35], // 经纬度 zoom: 12 // 远近 }) // 绘制标记点点 var markerPoint = new AMap.Marker({ position: [120, 35], // 经纬度 offset: ne

2022-04-08 14:13:45 3732

原创 vue + 高德地图 + 图例

效果图：npm install vue-amap --save在main.js中：import VueAMap from 'vue-amap'Vue.use(VueAMap)VueAMap.initAMapApiLoader({ key: '你的key值', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'A

2022-04-08 14:03:25 2315 4

原创 vue + websocket

websocket.jsimport { store } from '../store'/** 长链接，用于接收推送 */class WsKeepAlive { _isConnected =false /** *长链接，用于接收推送 */ constructor (sendData) { this.ws = new WebSocket('ws://192.168.17.69:8080/websocket/' + sendData.deviceCode) //建立连接时的

2022-04-08 13:37:33 356

原创 vue+element el-tree 树形控件选项中加图片展示图片（el-tree增加图片后行高增高，小三角位置上移，不再让其上下居中）

效果图：（小三角上移与文字对齐，而非在标红位置）<template> <div> <el-tree ref="paperDataTree" :data="paperData" :props="defaultProps" class="filter-tree picTree" @node-click="changeTriangleArea"> <div class="cust

2021-11-25 10:52:58 2346 2

原创 vue+element：el-table导出(excel\txt) 整理5种方法

1.前端dom导出，展示啥导出啥 import FileSaver from 'file-saver' import XLSX from 'xlsx' setTimeout(() => { var lastName = 'xlsx' // txt var wb = XLSX.utils.book_new() var table = document.getElementById('exportTankTable')

2021-10-25 13:41:23 865

原创通过图片url获取file对象

// 选择默认图片 chooseStaticImg(imageUrl) { this.getImageFileFromUrl(imageUrl, '图片.png', function(file) { this.file = file //获取file对象 }) }, // 根据路径返回file getImageFileFromUrl(url, imageName, callback) { // imageName一定要带上后

2021-10-20 16:40:53 1735

原创 vue + element 树形选择框（多选框）实现

<template> <div class="main-container"> <span style="font-size: 16px">类型:</span> <el-popover v-model="popover.

2021-09-28 11:34:53 4991 6

原创 vue + element 树形选择框（单选框）实现

<template> <div class="main-container"> <span style="font-size: 16px">类型:</span> <el-popover v-model="popoverV

2021-09-28 10:48:45 1801

原创 vue+element实现滚动公告栏效果

（自己小练习，欢迎批评指正）思路：1.将需要滚动的“公告内容”重复两遍，中间加空格，即：“公告内容公告内容”2.利用margin-left递减使公告左移3.当第二遍公告内容移动到第一遍公告内容初始位置时，即左移动了“公告内容 ”的长度，此时margin-left恢复到初始值，即公告回到初始位置，因为第二遍目前在第一遍的初始位置，所以视觉上没有停顿4.margin-left继续递减使公告左移，回到3（公告长度并没有超出范围时不滚动）<template> <.

2021-09-18 17:01:53 6394

原创＜audio＞播放音频Chrome浏览器禁止自动播放问题 play() failed because the user didn‘t interact with the document first

2018年一月份开始 Chrome浏览器不会再自动播放音频文件用户必须对网页进行主动触发后才可自动播放<audioid="audio"autoplay="autoplay"><sourcesrc="test.ogg"/></audio>////////////////////////////////////////////////////<audioid="audio"preload="auto">...

2021-04-25 16:37:14 4386 6

qq_39417037的博客