- 博客(60)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 vue2+amis初阶使用+获取表单值
功能：通过后台数据json实时更换表格，确实amis是不错的选择，但是基于react…yarn add amis@1.9.0同时需要安装typescript react vuera react-dom copy-to-clipboard (后两个好像后续没用到了，但是之前测试的时候我安装了，react安装17.0.0版本)vue需要使用的文件中： <div ref="box" style="text-align: center; font-size: 24px; fo
2022-05-13 17:51:55
9216
13
原创 echarts气泡图（scatter和graph两种）
1.graphgraph相对scatter不会出现重叠的问题，自己写的scatter相对而言比较失败（出现重叠问题）所以决定写graph图<template> <div class="chart" ref="buble"></div></template><script>export default { name: 'bubleChart', props: { chartData: {
2022-04-20 17:01:00
7287
2
原创 echarts仪表盘Multi Title Gauge 的max属性导致重叠问题
写这个表盘的时候，因为要设置max，不然默认100（如果数值大的话不便于观看） const max = Math.max.apply( Math, level.map((item) => { return item.value }), )获取数组里面的对象的最大的元素值max，传值给子组件max会发生重叠问题：.
2022-04-20 10:16:39
645
原创 720yun全景图+vue
网上没有，所以希望自己的方法能给别人带去便利720yun相对于krpona更加正版（krpona因为是德国的），而且可以直接修改我们需要的效果比如加logo，而不是直接一群js文件中找怎么改颜色怎么旋转速度。其实720yun使用非常简单：1.开通会员2.设计好自己的图这里右边有一个作品地址，复制下来 <iframe class="item" src="https://720yun.com/xxxxxxxxxx" frameborder="0
2022-03-24 16:36:12
1433
1
原创 vue局部页面路由跳转
比如一个页面里面有两个甚至多个div，要求其中一个div显示某个路由页面：在路由index.jse里面配置，写子路由children:<div class="design-right"> <router-view /> </div>然后在你得div里面写入router-view或者可以this.$router.push({ path: “/add” });触发部分跳转显示...
2021-06-28 16:00:48
4447
原创 vue element树形控件 展开全部 收起全部
真的是百度看各种博文各种坑，不忍直视，经过本博主不断地钻研，终于成功了，先看图：数据是接口来的一个整体数据，并非点一下请求一下懒加载，如果有类似功能的也可以私聊，有源码。button:<el-button icon="el-icon-plus" @click="setAllExpand(true)" type="info" plain >展开 &l
2021-06-16 14:26:47
1366
2
原创 vue中实现滚动条加载更多加载表格数据
时隔3个月 终于要更新了 我发现网上写的很多都不尽人意或者比较散，这里更新我自己在项目中实现的滚动条到底部开始加载数据： mounted() { window.addEventListener("scroll", this.handleScroll, true); }, handleScroll(e) { //变量scrollTop是滚动条滚动时，距离顶部的距离 var scrollTop = e.target.scrollTop; //变量wi
2021-06-09 09:58:16
849
原创 前端动态路由实现（reat/vue/link)
有时候我们从后端获取路由，就会碰见登录后根据接口路径添加路由的情况，那么根据react,vue和link我们来列举一下。vue使用this.router.addRoute方法因为没用接口，我们写死了数据，如果用接口，只需要将component中改成import(‘@/page/router.addRoute方法因为没用接口，我们写死了数据，如果用接口，只需要将component中改成import(`@/page/router.addRoute方法因为没用接口，我们写死了数据，如果用接口，只需要将com
2021-02-02 14:05:23
2020
原创 移动端/PC端适用 在vue中使用 antv g2 实现竖向折线图 上下xy值
实现效果如图，上面X值，下面Y值，并且可滚动首先我们父组件传过来是这样一个对象：temData中我们需要这两个值，因为根据胶囊按钮选择了源码：<template> <div id="temChart" ref="chartRef" :style="{ height: '244px',width:'1203px', display: chartShow }"></div></template><script>import {
2021-01-18 17:55:06
758
原创 map循环遍历返回dom节点中存在逗号解决方案
在``中遍历的return比如一个字符串，会发现有些后面带了逗号data.map(item=>{return ${item.name}}).join()因为map遍历返回的数组因为拼接+=调用了toString方法，会返回数组中的逗号join可以切割数组
2021-01-15 16:10:55
1196
原创 uni-app支付宝小程序map地图组件基础操作+画多边形+打点连线
显示气泡标注和多边形 <map v-if="longitude && latitude" style="width: 100%; height: 100%;" id="myMap" ref="myMap" :latitude="latitude" :longitude="longitude" :scale="16" :show-location="true" :enable-satellite="true"
2021-01-11 15:06:02
3905
12
原创 oss支付宝小程序上传文件（本例为图片）
let ossData = await request.get(`/xxxx/xxxxx`,{params}).then(res=>{ // res return res; })//oss接口 uni.chooseImage({ count: 1, //默认9 ...
2020-12-24 10:06:22
1209
原创 支付宝小程序uni-app的map多边形polygons不显示问题解决
测试了很多次，一直不显示，最后发现问题所在：(1) :polygon=“polygons” ，不要写成:polygons=“polygons”，支付宝小程序官方文档中是polygon而不是polygons(2)fillColor,官文档中明确标识需要8位16进制颜色代码，如果你写6位的或者red之类的，就不会显示<template> <view> <view class="page-body"> <view cla
2020-12-10 18:00:29
3322
原创 webpack学习笔记
安装webpacknpm i webpack webpack-cli -gnpm i webpack webpack-cli -D如果安装指定版本npm install webpack@4.44.2 -gwebpack.config.js刚开始项目是并不会有这个文件的，需要自己创建，并且在期中配置webpack命令如需要package.json 运行命令 npm init打包指定文件到指定目录下这里我们将src下面的index.js打包到build文件夹下build.js中，如果不设置输出
2020-11-27 16:57:54
102
原创 webpack TypeError: The ‘compilation‘ argument must be an instance of Compilation解决方案
我们在webpack.config.js使用HtmlWebpackPlugin时，webpack打包会碰见TypeError: The ‘compilation’ argument must be an instance of Compilation弹错，并且无法打包经过资料查询，大概率和版本有关系，这里给一个全套得解决方案：首先我们要先写在原先的webpack:npm uninstall webpack -g 然后我们需要重新安装指定版本webpack，这里引用了百度解决方案上的版本：百度解
2020-11-27 16:11:17
10657
4
原创 阿里云＜Error＞ ＜Code＞NoSuchKey＜/Code＞ ＜Message＞The specified key does not exist.＜/Message＞ ＜RequestId＞5F
公司使用的是阿里云的oss存储项目，但是在存储后，发现会出现：NoSuchKeyThe specified key does not exist.5FBC64DF22FE3E3035E682B2leadinsight-web.oss-cn-hangzhou.aliyuncs.comsx/Survey。场景为刷新的时候，就会出现这个问题，那么解决方案：原因为我们在某个页面刷新后，oss无法查询到下一个路由或者当前路由，他只有在Index.html，这个时候，我们写一个指定重定向，包括出现状态
2020-11-24 09:46:51
128313
原创 根据数字显示对应的标签
后端传过来一个2，这时候我们需要显示2个img标签render: (text, record) => { let array = [] array.length = record.inspectCount for(var i = 0;i<array.length;i++){ array[i] = i } return( <div>
2020-11-17 13:59:15
184
原创 antd Carousel遍历后台数据 不显示问题解决
在用到antd Carousel走马灯的时候，有时候我们是根据后台数据区遍历显示的，但是在本项目中，是获取了一串[[],[],[]]二层数据去遍历，这个时候，走马灯没内容了，去查看dom节点，发现有内容，但是没高度，怎么设置都无法解决，最后发现问题可能出在一开始他就加载好了，但是你数据那会还没加载出来，这个时候，我们设置一个数据有的时候才显示走马灯：就可以正常显示了。...
2020-10-23 10:33:24
1822
1
原创 react更改host，更改本地开发映射
首先这里我们要将本地更替成我公司这边的地址，我们需要用到工具switchhost，并且在其中这样修改：左边19是我的本地ipv4首选地址，右边是我需要更替成的地址。然后我们一开始创建的react项目默认端口是3000，我们找到这个文件：然后找到如下代码：这里我们已经将3000改成了80然后我们保存启动项目他就会变成：这里我们只需要将Localhost变成我们web.le…所需要替换的地址就可以了，如果还是不能运行，检测一下全url是否是http:开头而不是https...
2020-10-19 15:51:51
2146
原创 vue使用全景图（krpano）
关于网上很少有使用krpano在vue的方法，这里我们会介绍基础的方法和一些配置。（因为自己使用的是破解版，不进行软件的分享，只进行技术分享，博主也仅用作自己实验用途）首先我们需要准备一张图片，然后拖入krpano中的bat:他就会自动转换出一个对应的文件tour,大致配置如下：然后我们在vue项目中创建一个static文件下，再创建一个krpano文件夹专门用于存放我们转换出来的文件：在vue的index.html下引入：(在这里引入主要是为了子页面的embedpano方法)在子页面
2020-10-10 15:44:52
3149
原创 antd 分页一些css修改
.ant-pagination-item-active{ border-color: #12BF55; a{ color: #12BF55; } } .ant-pagination-item:hover{ border-color: #12BF55; a{ color: #12BF55; } } .ant-...
2020-09-15 11:39:56
1680
原创 antd table更改表格行被选中时候的颜色
网上查了挺多方法的什么.clickRowStyl更改都挺麻烦的，其实css你看dom节点属性就会知道，其实改css一步到位： .ant-table tbody > tr.ant-table-row-selected > td{ background: linear-gradient(360deg, rgba(46, 185, 100, 0.09) 0%, rgba(31, 134, 71, 0.02) 100%) ; }效果：...
2020-09-11 15:29:22
3561
2
原创 antd table的默认选择（Do not set ‘checked‘ or ‘defalutChecked‘ in ‘getCheckboxProps’...解决方法）
其实估计你能查这个怎么写应该是碰见了和我一样的问题：明明getCheckboxProps这个就是默认的多选框的配置，怎么checked或者defaultChecked就不行呢，而selectedRowKeys在这里面又不会使用。百度查询的各种方案都是类似的比如：自己研究半天结果还是错，包括那么解决方案来了： const nongRowSelection = { selectedRowKeys:nongId, onChange: (selectedRowKeys, select
2020-09-03 16:13:10
3917
7
原创 mapbox之点击图斑更换图斑图片
我们所需要实现的效果的是这样的，刚开始是一个不高亮的图片：当点击这个图片后，图片变成：代码：我们点击这这个图片能获取到数据中的fid 根据fid进行过滤 （本代码中因为页面功能需求还要过滤一层type值，因为有不同的图斑） map.setLayoutProperty( `pest_address-layer`, 'icon-image', ['match',['get','type'], 1,['match',['get',
2020-08-20 16:31:39
884
原创 mapbox两个图层叠加，点击重合部分都触发事件解决方案
大概我们的layer两个图层是这样重合的，当你点击的时候你会发现，两个layer的popup都进行了触发：我们所需要的就是如果重合 上面的图层才能触发popup 下面的不会弹框首先我们理出我们打印顺序，我们必须将上层的打印触发事件写在上面：（这里我们上层显示的是spot-layer）在上层的spot-layer中写入： e.preventDefault()阻止默认事件在下面的project-layer中我们可以打印他的e，可以看到_defaultPrevented: false，在pr.
2020-08-19 10:53:18
2357
原创 react hooks子给父传值
子给父传值需要通过事件方法来传值，这里我们子组件是触发了一个点击事件传值：<Button onClick={()=>setshowregister(false)}>注册</Button>然后我们需要把props解构：const {setshowregister} = props;父组件中的子组件：<Register show = {showRegister} setshowregister = {setShowRegister}></Regist
2020-07-20 17:27:29
9392
原创 react hooks中echarts-for-react实时更新解决方法
问题来源是 功能需要点击不同的地方传入不同的echarts x,y数据，但是这个时候你会发现如果正常的写它并不会实时更新，要么停留在第一次数据，要么直接数据无法显示。原因是echarts里面的option没有重新运行解决方案1： <BaseChart notMerge={true} style={{ width: "100%", height: "82%" }} option={
2020-07-06 10:51:53
3272
原创 echarts柱状图轮播 （datazoom方法）
在网上看到的挺多方法都踩坑，于是自己写的分享出来，技术为react hooks我们先定义一下起点和终点数值let zoomstartlet zoomend
2020-07-03 10:15:56
9105
5
原创 mapbox移入地点图标显示对应行政区域高亮
实现功能为移入黄坦这个地点后对应行政区域高亮，这里我们后端在黄坦坐标给了字段region_id，为一个数组，我们需要根据这个region_id在行政区域切片中过滤对应的fid，从而实现高亮（说白了主要运用filter)添加好source后：let areaOption = { id: `Aregion-layer`, source: 'Aregion', "source-layer": 'region' ..
2020-06-29 15:37:09
2500
原创 mapbox 地点图标下显示地名
大约就是实现这样一个效果，图标数据为后端提供切片数据首先我们需要了解到每个数据里有什么字段： Amap.mapbox.on("click", "livestock-layer", (e) => { console.log('66666666',e.features[0].properties) });（正常直接获取map进行on即可，本代码处理可同时进行mapbox和l7）打印里面发现存在name:在addlayer中添加：layout: { .
2020-06-29 10:57:35
3107
原创 echarts地图默认区域高亮 和无法显示geo数据问题解决
这是最后实现效果过程中我碰见了这样一个问题，数据格式是这样的：基本上只需要将接口获得的数据echarts.registerMap(‘town’,res,{});地图数据就出来了，但是我们出来的效果是这样的：就数据呢？？？？最后看了features里面的properties知道了，缺少了name字段，无法匹配，加上后就能匹配了。然后我们将features（这里我们将features赋值给了mapData）提取出来进行遍历： mapData.forEach(ite.
2020-06-28 18:23:40
5484
2
原创 echarts地图移除各种事件
原因是我碰见了echarts 的map.on(‘mouseover’()=>{}),无限增加的问题，由于echarts地图不出中国地图了，所以各种事件找了好久也没有，网上也没找到。T T怎么会这么简单 ，只要使用map.off(‘你所要移除的事件名字’)就可以移除之前存在的这个事件了！记录下来防止以后忘记了！echarts地图万岁...
2020-06-18 11:49:22
1944
原创 react中更改了数组但是视图（dom节点）没有变化解决方法
<div className="selection" style={item.select == true?{backgroundColor:'rgba(0,230,155,.8)'}:{backgroundColor:'rgba(0,255,172,.1)'}} onClick={()=>selectReport(index,item.name)}></div>这里我们有一个点击事件，让这个div变色。 const [reportChange,setrepor.
2020-06-15 13:54:37
3419
2
原创 基于react hooks的后台管理系统的路由配置
首先安装react-router-domnpm install react-router-dom --save-dev然后创建一个routers.js文件，存储我们的路由：import PersonalPlan from '../pages/PersonalPlan/PersonalPlan'import Personnel from '../pages/Personnel/Personnel'import Project from '../pages/Project/Project'const
2020-06-04 17:53:31
1945
1
原创 伪数组转换数组的方法
假设array为伪数组1.let newArray = [].prototype.slice.call(array)或者let newArray = Array.prototype.clice.call(array)2.let newArray = […array]3.let newArray = Array.from(array)
2020-06-01 14:29:03
423
原创 @import引入sass方法background-image踩坑
@import '../../assets/scss/func.scss';首先我们引入scss方法文件后background-image: url(completeImagePath('wode_bg.svg'));因为解析的方法只有地址，这里我们就要记住添加url()
2020-05-29 11:29:14
2720
原创 taro创建项目踩坑
1.首先安装taronpm install -g @tarojs/cli@1.3.33这里我安装的是1.3.33版本 高版本有时候不稳定2.taro初始化项目taro init myDemo直接写上项目名后续可以不写 你不写后面还要输入的3.这里我们按照如下输入，特别是默认模板，遇到了一个问题，如果你不选择默认模板的话，不会给你初始化package.json文件，你自己去生成是无法启动项目的，如果想生成redux可以后续自己安装。问题大致情况如下：选择默认模板有时候也会有问题，我出现的
2020-05-29 10:29:35
2473
1
空空如也
window.open打开新页面后vuex使用mapgetter获取不到值了
2021-06-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人