小太阳...-CSDN博客

原创 CSS实现文字描边效果

如图所示：热力看起来并不清楚解决：方法一： -webkit-text-stroke: length color;参数：length ：文本描边宽color：文本颜色-webkit-text-stroke: 1px #1e4dfe;效果：方法二：text-shadow例如： text-shadow: 1px 1px 0 #000;参数：text-shadow: x位移 y位移模糊程度颜色其中:x位移和y位移表示阴影相对文字的偏移值，可以为负值。思路：对四个方向都作出模糊.

2021-10-15 17:59:01 1448

原创移动端fixed定位时，使用width:100%会超出屏幕宽度

我的航线弹出框我是用了fixed定位，然后出现了下面这种情况，我的航线并没有垂直水平居中。代码如下：.route-modal { position: fixed; // 固定定位 width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.45); z-index: 998; .my-route { background: #fff; border-radius: 10p

2021-09-30 10:55:01 4392

原创 js判断设备是移动端还是PC端

根据用户代理来判断是pc端还是移动端 IsPC() { let userAgentInfo = navigator.userAgent; let Agents = [ 'Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod' ]; let flagPc = true; for (let i = 0; i < Age

2021-09-30 10:03:23 1250

原创 openLayers中ol.proj.transform的介绍

用法：ol.proj.transform(coordinate, source, destination)将坐标从源投影转换到目标投影。这将返回一个新的坐标(并且不修改原来的坐标)。用法示例：将地理坐标转换成投影坐标ol.proj.transform([101.965, 34.627], 'EPSG:4326', 'EPSG:3857')// [11350728.798816077, 4113399.2510266053]将投影坐标转换成地理坐标ol.proj.transform([1

2021-09-29 11:07:11 1359

转载 GIS基础知识 - 坐标系、投影、EPSG:4326、EPSG:3857

最近接手一个GIS项目，需要用到 PostGIS，GeoServer，OpenLayers 等工具组件，遇到一堆地理信息相关的术语名词，在这里做一个总结。1.大地测量学 (Geodesy)大地测量学是一门量测和描绘地球表面的学科，也包括确定地球重力场和海底地形。1.1 大地水准面 (geoid)大地水准面是海洋表面在排除风力、潮汐等其它影响，只考虑重力和自转影响下的形状，这个形状延伸过陆地，生成一个密闭的曲面。虽然我们通常说地球是一个球体或者椭球体，但是由于地球引力分布不均（因为密度不同等原因），大

2021-09-29 10:38:06 894 1

原创 VUE自定义组件click事件不生效

<gw-legend class="u-legend" @click="changeLengend" /> changeLengend() { console.log('点击事件'); },发现控制台并不输入console的内容。原因是因为没有加上 native,官网对于 native 的解释为:你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符<base-input v-o..

2021-09-26 11:44:45 1095

原创 elementUL手动上传txt文件

需求如下：点击定制航线，从本地选择文件点击打开后直接调取接口主要代码如下： <el-upload v-if="item.uploadFlag" // 是否显示上传组件 ref="xlsUpload" :style="{ display: 'inline-block' }" :auto-upload="false" // 不自动上传 :on-change="fileOnChange" // 文件状态改变时的钩子 :before

2021-09-18 11:12:48 776

转载把vue组件添加到body下

写了个xxx组件为了减少父级html的影响，需要把组件的$el放在body下在mounted放法中写：this.$nextTick(() => { const body = document.querySelector("body"); if (body.append) { body.append(this.$el); } else { body.appendChild(this.$el); } });

2021-09-17 17:25:34 3073 2

原创 js字符串修改最后一个字符的值（不确定字符串字符数）

1.用数组和字符串的方法split()、join() handeleStr(str) { let length = str.length; let newArr = str.split(''); newArr[length - 1] = '0'; return newArr.join(''); },使用： mounted() { console.log(this.handeleStr('212109171626')); // 212109171620 },

2021-09-17 17:12:51 2672

原创 elementUI中input组件的autofocus属性不生效

如图所以：点击航线名字需要切换输入框，输入框需要自动聚焦，这样即使啥也不修改也能执行失焦事件。elementUI文档上有一个autofocus属性，把autofocus设置成true发现并没有自动获取焦点。失效的原因：autofocus是vue中input的原生属性,element也支持这种方法,但是如果el-input组件外面还有其他组件, 就会导致autofocus失效。解决办法：自定义指令在全局定义一个自动获取焦点的自定义指令，在所有组件中都可以使用v-focus来自动获取焦点。代.

2021-09-17 16:08:50 3806

原创 vue+elementUI实现滚动加载请求接口

需求如图所示：由于图片较大，一次全把数据请求回来难免会太慢，就需要滚动加载请求数据。实现：element组件：InfiniteScroll 无限滚动主要代码如下：<template> <div class="route-wrapper"> <ul v-infinite-scroll="infiniteScroll" // 在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执

2021-09-09 18:19:03 2270 1

原创 echarts实现温度曲线折线图

如图所示：首先我想到了使用echarts，用属性控制x轴y轴的隐藏，然后修改拐点以及折线上的文字代码：图表组件<template> <div id="tem-chart" style=" height: 120px" /></template><script>const echarts = require('echarts');export default { name: 'TemChart', props: {

2021-08-31 18:02:25 4361 10

原创 CSS插入背景图片并且充满整个容器

先上图，需要实现下面这种样式引入背景图 height: 36px; background: url('~static/assets/img/warn_border.svg') no-repeat; background-size: 100% 100%;发现并没有被撑开后来把background-size改为了cover才可以 background-size: cover;下面介绍background-size使用语法length：设置背景图像的高度和宽度。第一个值设置宽度，

2021-08-30 15:50:19 3512

转载 window下安装和使用nvm

nvm 是 node.js 的版本管理工具，可以运行在多种操作系统上。nvm for windows 是使用go语言编写的软件。我电脑使用的是Windows操作系统，所以我要记录下在此操作系统上nvm的安装和使用。下载：nvm-windows 最新下载地址：https://github.com/coreybutler/nvm-windows/releases可以看到这里又有四个可下载的文件。nvm-noinstall.zip：这个是绿色免安装版本，但是使用之前需要配置nvm-setu.

2021-08-23 13:06:44 178

原创 VUE中$refs和$el的使用

ref: 给元素或者子组件注册引用信息ref有三种用法：1.ref加在普通元素上，获取用this.$ref.xxx可以获取到dom元素。<div ref="system">测试</div>// 获取mounted() { console.log(this.$refs.system);}2.ref加在子组件上，用this.$ref.xxx可以获取到组件实例，可以使用子组件的所有方法。使用：// this.$ref.xxx.方法名()// 父组件<con

2021-08-12 17:25:35 6919 2

原创 js中‘??‘（空值合并操作符）和‘?.‘（可选链操作符）的使用

?? 空值合并操作符用法：逻辑操作符，左侧为null和undefined时，才返回右侧的值var name = nullconsole.log(name ??　'－')　// -var obj = { name: 'sun'}console.log(obj.name ?? '-') // sunconsole.log(obj.age ?? '-') // -?. 可选链操作符可选链在JavaScript中是一种简写形式功能类似于‘.’ 链式操作符，不同之处在于，在引用为空nu

2021-08-11 11:32:35 982 2

转载 js判断对象是否为空对象的几种方法

1.将json对象转化为json字符串，再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");console.log(b);//true2.for in 循环判断var obj = {};var b = function() {for(var key in obj) { return false;} return true;}console.log(b());//true3.Object.get

2021-08-10 11:11:51 213

转载 js判断字符串中是否包含某个字符串

String对象的方法方法一: indexOf() (推荐)indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。var str = "123";console.log(str.indexOf("3") !== -1 ); // true方法二: search()var str = "123";console.log(str.search("3") !== -1 );search() 方法用于检索字符串中指定的子字

2021-08-10 10:52:06 420

转载 HTTP常见状态码（404、400、500）

HTTP状态码表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常或者是出现的错误，能够根据返回的状态码判断请求是否得到正确的处理很重要。状态码分类表一些常见的状态码为：200 - 服务器成功返回网页404 - 请求的网页不存在500 - 服务器遇到错误，无法完成请求详细分解：1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。代码说明100 （继续）请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101 （切换协议）请求

2021-08-03 11:50:40 26219

原创 Day.js ：一个轻量的处理时间和日期的 JavaScript 库

安装：npm install dayjs --savemain.js引入import dayjs from 'dayjs';Vue.prototype.$dayjs = dayjs;API参考：Dayjs 并没有改变或覆盖 Javascript 原生的 Date.prototype，而是创造了一个全新的包含 JavascriptDate 对象的 Dayjs 的对象。Dayjs 对象是不可变的, 所有的 API 操作都将返回一个新的 Dayjs 对象。当前时间直接运行 dayj

2021-08-02 18:01:14 1142

原创前端实现文字滚动（支持横向、纵向）

1.首先安装dayjs插件（后面唯一id使用）day.js–一个轻量的处理时间和日期的JavaScript库npm install dayjs --save2.在main.js中引入dayjs插件插件import dayjs from 'dayjs';Vue.prototype.$dayjs = dayjs;3.滚动组件<template> <div :id="id" class="marquee-wrapper"> <span

2021-08-02 11:45:31 2015

原创 element日期选择器限制上下浮动一个月内的日期并且小于今天

如下图所示：限制日期选择器只能上下浮动一个月并且要小于今天代码如下： <el-date-picker v-model="searchForm.creatTime" :picker-options="pickerOptions" class="setDatePicker" type="daterange" range-separator="至" start-placeholder="开始时间"

2021-07-30 10:32:06 396

转载 vue+scss实现一键换肤

大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux配合存储属性或接口来保存用户选择的主题。一、首先需要给项目下载配置Scss1.安装依赖npm install node-sass sass-loader --save-dev2.找到build中webpack.base.conf.js,在rules中添加scss规则{test: /\.scss$/,loaders: [

2021-07-09 17:32:22 1293

原创 vue带参数跳转打开新页面、新窗口

1.vue带参数跳转打开新页面this.$router.push跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面场景如下：点击首页的某一条任务的详情按钮，在当前页面打开任务详情页面，关闭详情弹框后返回首页代码如下 <span @click="watchDetail(scope.row)">详情</span> // 本页面跳转到详情 watchDetail(item) { this.$router.push(

2021-06-29 11:50:06 10867

原创 elementUI表单校验中关于一条form-item如何控制两个必填项

场景：如图：坐标中的经度和纬度都要控制必填思路：prop只绑定第一个输入框的值，rules中也只写第一个必选的验证，但是要写了一个validator验证这两个值必填，代码如下： <el-form ... :rules="editFormRules"> <el-form-item class="jt form-btn" label="坐标：" prop="lon">

2021-05-26 14:52:20 4777 4

原创 echarts分别自定义legend的宽高与样式

如图所示，需要分别自定义legend的宽高想要实现不同样式的图例，需要用数组写对应图例的样式代码如下： legend: [ { data: ['降水量'], left: '30%', textStyle: { color: '#9FC6F6' }, icon: 'rect', // 形状 itemWidth: 7, // 宽 itemHeight:

2021-05-10 18:01:03 7750

原创解决Vue项目中img的:src动态加载图片不成功

需求如下：需要动态加载图片，在写代码的时候发现，img标签直接动态绑定图片的相对路径的时候，图片不能显示，如下图效果控制台查看元素的时候，发现也已经渲染，但是页面就是不显示代码如下： <div class="legend-content"> <div v-for="(item, index) in legendData" :key="index" class="legend-item"

2021-04-08 15:54:09 6036

原创解决rotate旋转角度无效的问题

场景，项目中需要根据风向显示不同方向的图标，如下图：我用span标签写的图标，发现并没有旋转。代码如下 <div class="weather-ws"> <span :style="{transform:item.wsDirect !== 'NaN'? getRorate(item.wsDirect):'rotate(0)'}" class="wind-direction" >{{ '➤' }}&

2021-03-29 16:24:07 1587

原创关于vue 的 this.$refs 打印为undefined解决办法

我们都知道，利用ref父组件可以调用子组件的方法。示例如下： <weather-remind v-if="... " ref="weatherRemind" ... />import weatherRemind from '@/components/weather-remind/weatherRemind';components: { weatherRemind },mounted() { this.getSubscribeTotal();},meth

2021-03-23 16:40:23 1299

原创使用 Object.assign() 合并对象

用法：Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。var nameObj = {name:"sun"}var ageObj = {age: 18}Object.assign(nameObj, ageObj)console.log(nameObj) // {name: "sun", age: 18}Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象。注意：如果目标对象与源对象有同名属性，或者

2021-03-18 10:53:29 616 1

原创 JavaScript将数组拼接成一个字符串

将数组拼接成字符串，在JavaScript中，有两种方式。一种是Array对象提供的join()方法，另一种是Array对象提供的toString()方法。下面分别来介绍：join()定义和用法：join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。用法：把数组中的所有元素放入一个字符串，默认以逗号分隔var arr = ['sun', 'moon', 'start']console.log(arr.join()) // 'sun, moon, start'

2021-03-17 16:17:36 26972 5

转载 vue.nextTick()方法的使用详解（简单明了）

什么是Vue.nextTick()？？定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，<template> <div class="hello"&

2021-03-16 14:41:13 433

原创 vue中数据改变，视图不更新的原因以及解决方法（强制更新视图）

我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下：1.数组数据改变时，使用某些方法操作数组，数据变了，但是视图并没改变。（页面没有监测到数据改变）解决办法：使用下面这些方法操作数组，其数据会被vue监测push()、pop()、shift()、unshift()、splice()、sort()、reverse()可被vue监测到。替换数组：例如filter()、concat()和slice(),这些不会改变原始数组，但是会返回一个新数组。可以用新数组替代原数组。你可能认为这将

2021-03-16 11:20:13 14725

原创 JavaScript对象动态加载键值

先说一下我的应用场景：后来返回值如下图：需要实现的效果如下图：如果某种类型的数量为0，就什么也不显示，我的处理方式是，重新处理数据，造一个新对象，没有就为0如下图：处理过程如下： getProjectCount() { queryProjectCount().then(res => { if (res.code === 200) { this.statisticsData = res.data; let pub

2021-03-12 11:18:10 465

原创 elementUI点击多选框数据改变，视图不改变问题

先说一下我的场景：就是在表格里面选择某种产品，然后把这些产品加入订阅单，点击订阅单，就出现下面的图片，默认所有的产品全选，我就给所有数据加了一个chenked为true的属性遇到的问题：由于数据是从表格传过来的，然后点击发布渠道，发现控制台数据变了，但是视图并没有更新，如下图：我点击测试模型，控制台打印为false，但是视图就是不改变原因：由于我传过来的数据是数组，如下图，数组中数据发生变化，vue是侦听不到的，但是重写的这几个数组的方法（比如splice()、pop、push等）修改的数组是可

2021-03-12 10:59:54 4349 3

原创 antd(vue)日期选择器日期控制问题--范围时间选不到最后一天

需求是：后端返回一个时间段，需要限制只能选择在时间段内的时间，可以选择返回的开始日期和结束日期比如：返回的时间是2021/02/03-2021/02/27，可以选择他们之间的时间、2021/02/03和2021/02/27的时间代码如下： <a-table-column key="sprintDate" title="开始-结束日期" data-index="sprintDate" width="24

2021-02-03 17:20:39 2653

原创 js原生方法document.execCommand()

document.execCommand()语法参数：document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)如果该指令不被支持或停用将回传一个 false 的 Boolean 值。其中：aCommandName：要执行的指令，如 Copy、Cut 、Paste等aShowDefaultUI：是否显示预设的使用者界面，默认是falseaValueArgument：需要引入额外的参数，insertImage 需要提供图.

2021-01-22 10:52:25 3218

原创 vue实现点击复制功能

项目中需要复制链接，如下图：第一步：安装依赖npm install --save v-clipboard第二步: 在mian.js(全局)引入并注册组件import Clipboard from 'v-clipboard'Vue.use(Clipboard)第三步：具体使用<a @click="copyUrl(record.fileUrl)">复制链接</a> // 点击复制的方法 copyUrl(url) { // 创建一个 Inp

2021-01-21 17:27:57 1623

原创 git创建新分支并与远程分支关联

1.查看当前有几个分支git branch2.新建一个dev分支，然后切换到dev分支git branch dev // 创建dev分支git checkout dev // 切换到dev分支// 还可以用一条命令创建并切换分支git checkout -b dev// git checkout 命令加上-b参数表示创建并切换3.将新建的dev分支push到远端git push origin dev4.git本地分支与远程分支关联git branch --set-upstream

2020-12-24 17:40:57 3169 2

原创 git合并分支代码

在开发一个项目的过程中，我们一般需要好几个分支来开发，那么怎么合并分支呢？下面就以master分支和dev（开发分支）分支来说明：1.：切换到要合并的分支（如把dev开发分支合并到master分支上）// 把分支切换到master分支上git checkout master2.如果是多人开发的话，需要把远程仓库的master分支上的代码拉取下来// 把远程仓库的代码拉取下来git pull3.把dev分支合并到master分支上// 把dev分支合并到master分支上git mer

2020-12-24 15:40:57 338

timeline.zip

空空如也