v_loading-CSDN博客

原创 vue-router的菜单换成二级目录访问

问题需将vue-router的菜单从一级目录换成二级目录访问实现只需在vue.config.js中配置就行了效果

2022-01-08 10:58:57 729

js控制复选框和父容器样式效果点击复选框和父容器，都会出现边框选中效果。实现因为点击复选框，冒泡会触发父容器事件，且复选框会自动切换checked，所以需判断是由谁触发的。<script type="text/javascript"> $(function() { //身份选择 var ck1 = $('#ck1') var ck2 = $('#ck2') var ck3 = $('#ck3') var ib1 = $('#ib1')

2022-01-04 14:17:12 378

原创 application/x-www-form-urlencoded方式对post请求传参

application/x-www-form-urlencoded方式对post请求传参问题vue项目中，axios用application/x-www-form-urlencoded方式对post请求传参，但是按正常的data方式传一直获取不到参数。实现 async setToken() { /* let data = { grant_type: 'client_credentials', client_id: '62vwjyr7tdeizy0dx4',

2021-12-31 16:54:19 3837

原创 vue项目用echarts画折线区域图，并进行相关参数配置。

#要求显示一条折线图表示河堤数据，两条区域图分别显示水流和河底数据。#效果#实现 <div id="charts1" class="ct1"></div>//获取数据getData() { getDataApi().then((res) => { if (res.status == 200) { let data = res.data.data; let arr = {

2021-09-07 14:43:29 108

原创 openLayers画轨迹图，引用jeojson文件数据

#要求项目要求画出地图上河流的流向。#实现geoserver发布了河流的图层，描出了河流的点位。导出geojson文件，拿到各个点的位置。在地图上画出各个点。#静态轨迹先画出地图，本项目采用的是天地图。再叠加河流图层，绘制出各个点。代码//获取geojson文件的数据axios.get('/json/bmskline.geojson').then(res => { let arr = res.data.features[0].geometry.coordi

2021-09-03 16:06:17 1128 1

原创 openlayers天地图叠加geoserver图层，并对包含多个图层的图层进行过滤

#一个个叠加图层先筛选后端接口返回的图层，在一个个叠加显示。要求geoserver发布多个图层，在根据数据进行筛选。//一个个叠加图层this.addView=[{addTime: "2021-08-23 17:12:50"expression: "$>0.5"id: "1"lableId: "87"layerUrl: "http://dataflow.bxzscloud.com:30009/geoserver/sz/wms?a=b"name: "sz:nlwmx"prefix:

2021-08-27 10:37:01 1729

原创 vue动态获取路由，动态添加路由

后端返回路由数组，前端生成router。#登录时获取路由，或者接口返回路由。login.indexasync handleLogin() { let res = await postUserLogin(this.loginForm); // console.log(res); if (res.status == 200) { localStorage.setItem("token", res.token); localSt

2021-08-09 14:42:30 1707

原创微信小程序缩小radio样式

#问题微信小程序缩小radio，设置宽高无效，要使用transform:scale(0.7)。#解决 <radio value="{{item.value}}" checked="{{item.checked}}" style="transform:scale(0.8);"/>

2021-07-15 17:54:09 367

原创小程序scroll-view跳转到底部

#效果实现跳转到scroll-view的底部#实现使用scroll-into-view，跳转到对应view的id<scroll-view class="container" style="height:{{scrollViewHeight}}px" scroll-y="true" scroll-into-view="{{recognitionnow}}"> <view id="recognition{{index+1}}" wx:for="{{list}}" wx:key=

2021-06-25 17:12:58 273

原创小程序gb2312编码转utf-8,arryBuffer转字符串，含汉字字符串一直乱码

#问题小程序接收蓝牙设备发送的信息，但是蓝牙设备发送的是gb2312编码的arryBuffe，将发送的含中文编码转码成字符串，一直乱码。#原因乱码的原因是编码方式不同，小程序显示的是utf-8编码，而蓝牙设备发送的是gb2312编码。#解决按gbk对照表查出对应的utf-8编码// 导入gbk转utf-8对照表import Decoder from "../../utils/Decoder.js"// ArrayBuffer转16进度字符串function ab2hex(buffer)

2021-06-23 16:02:20 2351 4

原创 openlayers天地图叠加geoserver发布的图层

#叠加效果#实现##在geoserver发布画好的图层地址：http://localhost:8080/geoserver/workspace/wms##vue项目中调用 //叠加geoserver发布的wms图层 //workspace:test001 为图层name var geoserverUrl = "http://localhost:8080/geoserver/workspace/wms"; var wmsSource = new TileWMS(

2021-06-17 15:11:43 414

原创 flex布局元素一行会压缩宽度无效

#问题使用flex之后，多个div放在一行，设置了宽度，但是无效，div会压缩在一行。#解决为不想被压缩的元素上加上样式 flex-shrink: 0; <view class="scoll"> <view class="sitem {{cindex==index? 'sborder':''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="changeInd

2021-06-07 16:04:02 322

原创小程序动态改变样式class

#问题小程序中动态改变样式class#解决直接在{{}}里做判断，{{cindex==index? ‘sborder’:’’}}<view class="sitem {{cindex==index? 'sborder':''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="changeIndex"> {{item.name}}</view>...

2021-06-07 15:59:23 907

原创小程序echarts循环显示折线图

#下载组件官网地址：微信小程序中使用 ECharts1、将下载的 ecomfe/echarts-for-weixin 项目的 ec-canvas 目录拷贝到自己的项目下#实现循环显示折线图##wxml<view class='echart_wrap' wx:for="{{ecLine}}" wx:key="index"> <ec-canvas ec="{{ ecLine[index] }}"></ec-canvas> </view>

2021-05-28 17:21:22 669

原创浮点数值精度丢失浮点运算不正确

#问题26.66022+10结果：36.660199999计算的数值不正确#原因计算机中把数字转换成二进制进行存储，小数点后面的数值装换成二进制值时就不准确了。#解决let max = this.FloatAdd(+this.lon, '10.00000'); let min = this.FloatDel(+this.lon, '10.00000');//n1,n2的位数要相同FloatAdd(n1, n2) { console.log(n1.toStrin

2021-05-28 14:35:38 101

原创 vue项目自定义指令控制按钮权限

#自定义指令判断方法permission.js// permission.jsimport Vue from 'vue';// 是否有权限const hasPermission = btnRoleList => { // 当前用户的权限列表 let role = localStorage.getItem("role"); return btnRoleList.some(e => role.includes(e));};// 指令const has =V

2021-05-27 16:31:40 298

原创封装查询字典接口

#main.js引入#接口文件#使用 <el-form-item label="标签规则" prop="direction"> <el-select v-model="label.direction" placeholder="请选择标签规则" :clearable="true" > <el-option

2021-05-25 11:11:43 191

原创 vue页面中数组改变，页面数据不改变

#问题数组改变了，页面数据没有动态变化，没有双向绑定的效果。#原因原因是vue监听不到数据类型特别复杂的属性。若data中数据类型较为复杂，方法methods中改变对象的属性，页面并不会改变。#解决可以使用this.$set()来进行强制更新，进而解决问题。#使用对象操作：　三个参数：this.set("改变的对象"，"改变的对象属性"，"值")数组操作：　三个参数：this.set("改变的对象"，"改变的对象属性"，"值")数组操作：　三个参数：this.set("改变的对象"，"

2021-05-21 10:22:20 1236

原创 element-ui修改表单数据后，表格数据也会改变

#问题将表格行数据赋值给表单，修改表单数据后，表格数据也会改。点击取消，选择下一行数据，再点击表单的取消，表格数据改变。#原因表单的数据是表格数据直接赋值，属于浅克隆。浅克隆：被复制对象的所有变量都含有与原来的对象相同的值，而所有的对其他对象的引用仍然指向原来的对象。深克隆：被复制对象的所有变量都含有与原来的对象相同的值，除去那些引用其他对象的变量。那些引用其他对象的变量将指向被复制过的新对象，而不再是原有的那些被引用的对象。##解决使用简单的深克隆```htmlthis.form =

2021-05-21 10:16:15 1132

原创先获取中心点再加载天地图OpenLayer

#问题加载地图的时候，中心点还没从接口返回，于是地图渲染不出来。#解决##使用v-if来控制地图的渲染##详情

2021-05-21 10:04:51 129

原创微信小程序使用echarts显示折线图

#下载组件官网地址：微信小程序中使用 ECharts1、将下载的 ecomfe/echarts-for-weixin 项目的 ec-canvas 目录拷贝到自己的项目下2、若体积过大，可自己定制echarts.js文件地址：在线定制将下载的echarts.min.js文件改名为echarts.js文件并替换#使用##wxml```html<view class='echart_wrap'> <ec-canvas id="mychart4" canvas-id=

2021-05-08 18:02:39 757

原创 vue项目表单验证，防重名

#设置rules//调用接口验证设备IDlet validateRepeatVerCode = async (rule, value, callback) => { await getRepeatStationDevId(value) .then((res) => { console.log("获取重复版本号数量", res); if (res.code === 200) { if (res.data

2021-04-26 15:26:26 785

原创页面全屏显示

#样式<div class="fullScreen"> <el-tooltip class="item" effect="dark" :content="isFullScreen ? '退出全屏' : '进入全屏'" placement="top" > <i class="el-icon-f

2021-04-22 17:20:49 151

原创 uni-app导入文档文件

#准备##下载插件插件地址 https://ext.dcloud.net.cn/plugin?id=1015选择版本导入插件##引入##使用

2021-04-21 14:14:14 1330 1

原创 el-upload手动上传多张图片

#使用el-upload配置:http-request=“modeUpload” <el-form-item label="设备图片" prop="file"> <el-upload ref="upload" action="" list-type="picture-card"

2021-04-21 14:06:23 2334 2

原创地址转经纬度

#准备百度接口地址：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding#应用##jsonp跨越问题##将地址转经纬度this.$jsonp("http://api.map.baidu.com/geocoding/v3/", { address: this.form.workAddress, output: "json",

2021-04-19 14:13:15 117

原创 vue项目formdata格式上传文件

#按钮 <el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :limit="1" accept=".docx, .pdf, .doc" :on-exceed="handleExceed" :http-request="modeUpload"&gt

2021-04-19 10:33:08 745

原创 vue项目xlsx导入导出

#准备##安装npm install xlsx --s##引入import xlsx from "xlsx";#导入 <el-upload action="" :auto-upload="false" accept=".xlsx, .xls" :show-file-list="false" :on-ch

2021-04-19 10:13:29 272

v_loading的博客