- 博客(16)
- 收藏
- 关注
RSS订阅原创 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
918
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
1651
原创 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
660
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
195
原创 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
1504
原创 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
716
原创 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
2240
原创 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
1440
2
原创 vue 项目 web端如何实现天气预报2
在web段实现天气展示首先我们要获取到天气信息，我们可以请求下面的接口访问上面的接口后，可以看到返回值，拿到返回值后对数据进行处理和渲染就可以了注意：通过返回值我们可以看到，wea_img的属性值是汉语拼音’yu’,我们如果想要展示气象图片的话就需要将各种天气的图片放在public文件夹下在使用图片的时候通过绑定src属性拼接路径拿到展示的图片，具体代码在下面 有注释。下面是请求数据js代码export function getSevenDaysWeather(query) {
2020-11-21 16:41:27
1726
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
6353
19
原创 vue 项目中使用Swiper
如何在vue项目中使用Swiper首先安装Swiper插件 yarn add [email protected] cnpm install [email protected] -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
556
原创 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
4532
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
1489
原创 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
749
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
6150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人