- 博客(16)
- 收藏
- 关注
原创 vue前端根据url批量下载图片
安装依赖npm install jszipnpm install file-saver代码// importimport JSZip from'jszip'import FileSaver from'file-saver'// html<el-button type="primary" :loading="download" @click="down">批量下载</el-button><span v-if="download">{{ title }
2021-05-11 10:56:30
1021
2
原创 IIS搭建http服务
搭建IIS-HTTP服务器1.搜索iis打开 Internet Information Services(IIS)管理器2.网站 右键添加网站3.填写对应信息网站名称:物理路径:端口号:4.找到目录浏览 启动5.浏览网站 点击查看6.其他电脑访问本机外网ip加设置的端口号7.遇到的问题1.找不到目录浏览2.其他电脑无法访问,本机打开可以找不到目录浏览打开控制面板 – 打开程序和功能 – 打开启动或关闭window功能找到Internet Informat
2021-04-27 17:14:34
1746
原创 vue 项目 web端如何实现天气预报1
自动定位天气信息1.拿到当前电脑ip2.高德接口获取ip的地址3.通过和风天气获取城市id4.通过id获取实时天气高德API:https://lbs.amap.com/api/webservice/guide/api/ipconfig和风天气:https://dev.qweather.com/docs/api/weather/weather-now/拿到当前IP一、在index.js里引入<script src="http://pv.sohu.com/cityjson
2021-04-26 09:59:27
729
3
原创 html格式的图片数据处理展示
截取a标签的href值请求数据拿到后端返回html模板this.$axios.get('/static/xxxxxx/', { baseURL: ''}).then(res => { console.log(res)})对拿到的html模板a标签的href值截取const b = /<a([\s]+|[\s]+[^<>]+[\s]+)href=(\"([^<>"\']*)\"|\'([^<>"\']*)\')[^<>]*>/
2021-04-12 09:50:27
216
原创 element ui 表格如何实现高度自适应,并且随窗口动态更改
element ui 文档高度都是设置的 height=“50” 没有给出动态适应的办法el-table 绑定属性 :height=“Height”<el-table :height="Height" style="width:100%;">。。。。</el-tale>data() { return { Height: '' }}初始化时获取< el-table >< /el-table >的父元素 的高度,并赋值给变量 Heig.
2021-01-07 10:43:03
1606
1
原创 supermap超图选取起点终点添加折线显示路线
思路1.拿到地图起点终点的笛卡尔坐标2.将起点和终点的笛卡尔坐标转成经纬度,调用高德接口拿到路线geojson坐标3.使用geojson绘制线路高德接口文档https://lbs.amap.com/api/webservice/guide/api/direction超图文档http://support.supermap.com.cn:8090/webgl/docs/Documentation/Polyline.html?classFilter=polyhttp://support.s
2020-12-17 17:33:12
766
原创 vue+supermap超图实现点击地图添加点
点击地图加点并添加图标(已规划导航路线选取终点起点为例)首先是点击获取坐标getPosition(item) { this.point = item // item 接受两个字符串 'start', 'end' 用来区分起点和终点 const that = this that.pickState = true // 加点时开关,为true时点击地图调用加点方法加点, const handler = new Cesium.ScreenSpaceEventHandler(view
2020-12-17 16:30:57
2371
原创 echarts 在 vue项目中使用及立体柱状图的实现
vue 项目中使用echarts首先安装echarts依赖cnpm install echarts -S / yarn add echarts在需要使用echarts图表的组件内引入import echarts from ‘echarts’通过ref进行标记<div ref="echarts" style="width:100%;height:100%" class="echarts"></div>在mounted内进行实例化mounted() { thi
2020-11-23 17:04:25
1616
2
原创 vue 项目 web端如何实现天气预报2
在web段实现天气展示首先我们要获取到天气信息,我们可以请求下面的接口访问上面的接口后,可以看到返回值,拿到返回值后对数据进行处理和渲染就可以了注意:通过返回值我们可以看到,wea_img的属性值是汉语拼音’yu’,我们如果想要展示气象图片的话就需要将各种天气的图片放在public文件夹下在使用图片的时候通过绑定src属性拼接路径拿到展示的图片,具体代码在下面 有注释。下面是请求数据js代码export function getSevenDaysWeather(query) {
2020-11-21 16:41:27
1851
1
原创 vue项目中 EasyPlayer 的封装与使用
vue中如何集成EasyPlay播放器安装EsayPlay依赖(npm慢可以使用cnpm或者yarn)npm install @easydarwin/easywasmplayer --save安装完成后找到下面两个文件 拷贝到public文件下(必须)node_modules >> @easydarwin >> easywasmplayer >> EasyWasmPlayer.jsnode_modules >> @easydarwin >&
2020-11-17 16:53:30
6591
19
原创 vue 项目中使用Swiper
如何在vue项目中使用Swiper首先安装Swiper插件 yarn add swiper@5.2.0 cnpm install swiper@5.2.0 -save然后在src下面的main.js中引入import 'swiper/css/swiper.min.css'新建vue组件 SwiperCom.vue 写入一下代码<template> <div class="swiper-container" :class="name"> <div c
2020-11-17 10:58:48
574
原创 vue 前端将Excel表格导入 ,并解析成Json数据发送给后端
首先我们通过input框的file进行上传<span class="file-box"> Excel上传 <input type="file" accept=".xls,.xlsx" class="upload-file" @change="Excel($event)" /></span>修改样式让其变得漂亮一些,添加完下面的样式,就会变成这个的样子:.file-box { position: relative; di
2020-11-09 12:51:54
4857
14
原创 使用deep穿透更改 Element ui 样式在 谷歌浏览器生效,而在火狐浏览器不生效问题
使用/deep/穿透更改组件库样式在火狐浏览器不生效原因/deep/ 穿透如果只是添加在父级的话,那么在火狐浏览器和谷歌浏览器都是生效的/deep/ .father { width: 100%; height: 100%; .el-select .el-input .el-input__icon { line-height: 26px; color: #000000; } .avatar-uploader .el-upload { bor
2020-11-09 10:59:32
1574
原创 vue实现列表的导出excel表格的功能
vue在做后台管理系统,会有导出excel表格的功能。首先,通过npm或者yarn安装插件xlsx和file-savernpm i xlsl -S // 用于导出Excel表npm i file-saver -S // 用于文件的下载然后,话不多说复制就完事了,创建一个js文件ExportExcel.js,将下面所有代码ctrl + c,ctrl + v 到里面。这段代码为封装的导出表格的功能。/* eslint-disable */require('file-saver');impor
2020-10-22 23:53:26
790
1
原创 vue实现列表的复选框,单选,多选
不适用组件库的方式,实现列表的单选,多选。一,在获取到列表数据赋值给parkList后,动态的添加checked属性为false// 将列表parkList进行遍历动态添加checked为false this.parkList.map(item => { this.$set(item, 'checked', false) })二,将复选框绑定checked属性,属性值为动态添加checked。<-- 通过v-for生成的,每一行前面的复选框,item为v-for的每一项
2020-10-22 23:13:57
6460
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人