- 博客(43)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 cesium vue 天地图 WMTS图层数据 绘制点、线、面 测距、测面积
cesium vue 天地图 WMTS图层数据 绘制点、线、面 测距、测面积
2023-03-29 14:51:02
1354
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 给数组中所有对象加一个属性
新数组:array;原数组:list;给原数组list的对象加一个名为indexNum的属性,属性值为str let array = []; let list = [{name:'aa',age:11},{name:'bb',age:22},{name:'cc',age:33},]; list.map((item,index)=>{ array.push( ...
2018-09-28 11:17:19
19256
3
原创 vue2 打包报错 in ./src/main.js Thread Loader (Worker 0) Cannot read property ‘length‘ of undefined
vue2 项目可正常运行,打包报错in ./src/main.js Thread Loader (Worker 0) Cannot read property ‘length’ of undefined。vue-cli 使用 wokrer-loader 加载 web woker 时,使用 npm run build 有很大机率会打包失败。在vue.config.js 配置parallel: false,可以实现构建正式环境关闭thread-loader。
2024-03-01 08:48:05
451
转载 git 本地刷新远程分支
git branch -a : 查看全部(本地+远程)分支列表。git remote -v : 查看远程分支url。git branch -r : 查看远程分支列表。git branch : 查看本地分支列表。// 本地刷新远程分支。
2024-02-17 13:57:31
610
1
原创 vue :class
:class<div :class="{ active: isActive }"> {{ isActive }}</div><div :class="{ active: isActive, name1: nameActive }"> {{ isActive }}~{{ nameActive }}</div><div :class="nameActive ? 'name1' : 'name2'"> {
2020-11-25 10:00:46
308
转载 js中关于数组的常见用法
1.数组常见的排序方法(1)sort()–按照ascll字符编码排序,返回排序后的数组,会改变原数组,当数组中均为数字时,还需额外的处理,如下;例如://第一种情况var b=['c','d','a','b'] b.sort(); console.log(b); //运行结果: ["a", "b", "c", "d"]----------------------------------------------------------//第二种情况<script type="
2020-11-18 08:55:30
169
1
原创 数组去重
const array = [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 2, name: '王五' }, { id: 2, name: '赵六' } .
2020-11-17 14:50:04
132
原创 element 、 vant 时间区间设置
element (PC端)<el-date-picker type="date" placeholder="选择日期" v-model="form.checkTime" format="yyyy年MM月dd日" value-format="yyyy-MM-dd" :picker-options="pickerOptions" ></el-date-picker>data() { return { //
2020-11-17 09:02:36
1896
转载 屏蔽鼠标右键
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键2. <body onselectstart="return false"> 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;" 防止复...
2020-11-12 15:27:36
223
转载 reduce
1、语法array.reduce(function(total, currentValue, currentIndex, arr), initialValue)reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。callback (执行数组中...
2020-11-12 15:21:51
2472
原创 js 获取高度
盒子'box'宽:document.getElementById("box").offsetWidth盒子'box'高:document.getElementById("box").offsetHeight网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeigh
2020-11-12 15:13:16
599
原创 关于面试
html(初级)行内元素有哪些?块级元素有哪些?空元素(void)有哪些?(1)行内元素:a,b,span,img,input,strong,label,button,select,textarea,em(2)块级元素:div,ul(无序列表),ol,li,dl(自定义列表),dt(自定义列表项),dd(自定义列表项的定义),p,h1-h6,blockquote(块引用)(3)空元素(void):即没有内容的HTML元素。br(换行),hr(水平分割线),meta,link,input,img
2020-07-20 13:53:08
383
转载 vuex
一、Vuex是什么 Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。1、Vuex的构成 由上图,我们可以看出Vuex有以下几个部分构成:1)statestate是存储的单一状态,是存储的基本数据。2)Gettersgetters是store的计算属性,对state的加工,是派生出来的数据。就像computed计算属性一样,getter返回的值会根据它的依赖被缓存起来,且只有当
2020-05-27 08:46:47
160
原创 watch和computed
1. 各自处理的数据关系场景不同watch擅长处理的场景:一个数据影响多个数据 ,当需要在数据变化响应时,执行异步操作,或高性能消耗的操作,自定义 watcher 的方式就会很有帮助。computed擅长处理的场景:一个数据受多个数据影响 ,可以关联多个实时计算的对象,当这些对象中的其中一个改变时都会出发这个属性。具有缓存能力,所以只有当数据再次改变时才会重新渲染,否则就会直接拿取缓存中的数据。2. 工作流程watch1.初始化组件上配置的watcher属性2.对watcher属性可能的写
2020-05-20 16:13:10
237
原创 viewerjs 按钮可见性设置
viewer.js插件(图片预览) GitHub地址:https://github.com/fengyuanchen/viewerjs。如:不显示1:1,横向旋转,竖向旋转的按钮效果图:Viewer.setDefaults({ toolbar: { zoomIn: true, zoomOut: true, oneToOne: false, r...
2020-01-08 18:08:03
2790
原创 $set()处理数据更新但视图不更新的问题
踩了一个坑,给对象加完属性,打印出来了,但是页面没渲染出来。原因是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。要处理这种情况,可以使用$set()方法,既可以新增属性,又可以触发视图更新。调用方法:Vue.se...
2020-01-04 16:14:15
2152
原创 css3滑动出现工具栏
效果图(gif有延迟,真实效果很流畅,拍gif截图的软件名为:GifCam):代码(关键注释在css里):<template> <div class="test3-container"> <div class="test3-bg" :class="{ show: show }"></div> <div clas...
2019-10-10 10:34:30
564
原创 时间戳转化年月日
toDate(baseTime) { let time = moment(baseTime).format() let d = new Date(time) let year = d.getFullYear() let month = '0' + (d.getMonth() + 1) let day = '0' + d.getDate(...
2019-10-08 17:43:03
431
2
转载 转载一个h5的迷宫小游戏
效果图:原文地址:https://blog.csdn.net/qq_40693171/article/details/100716766
2019-10-08 16:05:43
537
转载 css3实现卡片翻转效果
效果图:代码(主要部分注释在style里):<template> <div class="test2-container"> <div class="re-box"> <div class="re-item"> <div class="re-item-front"> ...
2019-10-08 15:59:38
2052
1
转载 node遍历文件夹并读取文件内容
var fs = require('fs');var path = require('path');//解析需要遍历的文件夹var filePath = path.resolve('./dist');//调用文件遍历方法fileDisplay(filePath);//文件遍历方法function fileDisplay(filePath){ //根据文件路径读取文件,返回文件...
2019-07-23 13:31:01
1314
原创 vue修改el-table的样式,标题,列文字位置,颜色,流体高度,气泡
<template> <div class="test1-container"> <el-table :data="tableData" style="width:550px;margin:0 auto;margin-top:30px;" border :row-style="tableRowStyle" :header-cell-st...
2019-06-11 16:20:05
19930
6
转载 vue 框架 快速搭建企业级中后台产品原型
项目地址:https://github.com/PanJiaChen/vue-element-admin-site分析:https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%89%8D%E5%BA%8F%E5%87%86%E5%A4%87一个后台前端解决方案,它基于vue和element-ui实现。使用了最...
2019-05-13 17:06:28
2048
原创 js时间戳转成“年月日”格式
let baseTime = 1523721600000let time = moment(baseTime).format()let d = new Date(time);let batchDate = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() +'日'let batchTime = d.g...
2019-04-15 14:19:02
15003
2
原创 js 数组
1. 字符串和数组之间的转换var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';var myArray = myData.split(',');myArray;var myNewString = myArray.join(',');myNewString; var dogName...
2018-12-27 13:56:30
181
转载 alert带有地址,重新写一个全局alert
window.alert = function(msg, callback) { var div = document.createElement('div'); div.innerHTML = '<style type="text/css">' + '.nbaMask { position: fixed; z-index: 1000; top: 0; rig...
2018-12-03 11:50:14
596
转载 字符串、数组 转换
1. 数组转字符串.join() 将数组中所有元素放到一个字符串中,并用指定的分隔符进行分割const a = [1, 2, 3]a.join(',') // "1,2,3"a.join('_') // "1_2_3"2. 字符串转数组.split() 将字符串以指定的分隔符分割成数组const a = '720_1_6'a.split('_') // [720, 1, ...
2018-12-03 11:41:59
149
转载 滚动条样式
滚动条全局样式:// 滚动条设置::-webkit-scrollbar { width: 10px;//y轴上的滚动条宽度 height: 10px;//x轴上滚动条高度}::-webkit-scrollbar-track { border-radius: 3px; /*滚动条的背景区域的圆角*/ background-color: #fdf8f5; /*滚动条的背景颜色*...
2018-12-03 11:37:30
1878
转载 【vue】在网页上增加水印
基于vue的架构中,在页面上增加水印,代码如下。watermark.js'use strict' let watermark = {} let setWatermark = (str) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { d...
2018-11-29 09:57:32
1508
原创 关于路由跳转小方法
html:<div> <ul> <li v-for="(item,index) in routeList" :key="index" :class="{ select: selItem==index}" @click="routeSelect(index)"> {{item}} &am
2018-09-29 14:45:41
169
转载 深拷贝、浅拷贝区别,实现深拷贝的方法
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子:let a=[0,1,2,3,4], b=a;console.log(a===b);...
2018-09-28 11:15:56
475
原创 定位(将子盒子定位到父盒子正中间)
父盒子:position:relative;子盒子:position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);
2018-09-27 13:56:25
3803
原创 引入moment时使用中文
import moment from 'moment';moment.locale('zh-cn');或者moment.lang('zh-cn');即可显示中文
2018-09-27 13:54:56
11813
转载 flex布局异常(flex-grow:1)
用flex布局免去了清浮动的种种,但偶尔遇到异常情况:当用flex布局,给了一部分定值,而另一部分铺满flex-grow:1;给定值的部分会变化。这时候flex-basis (default:auto)就出场了,加上flex-basis:0;就不会异常了。看到一篇更详细和准确的文章:转自:http://zhoon.github.io/css3/2014/08/23/flex.htm...
2018-09-27 12:01:21
19661
2
转载 javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法
javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法前言在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝。如下图演示: 如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不是我们所需要的结果。 因此,数组以及对象的深拷贝就是javascript的一个基本功了。数组的深拷贝条条大道通罗马,实现数组的深拷贝,是有好几种方法的。举例如...
2018-08-16 10:36:53
554
原创 图片文件上传(上面一篇是预览)
图片上传和预览是一起的,分别写了两个组件(上传、预览),在上传中调用预览,因放一起有点多故分开写了写上传组件<template><div> <div class="pic-list" v-if="temp.fileList.length>0"> <p style="color:tomato;">已上传文件:&a
2018-07-11 16:27:46
559
原创 图片预览
写一个图片预览的组件<template> <div class="wrapper" :style="{height:wrapperHeight}"> <div class="imgName"> <span class="left"> {{imgIndex}} / {{imgData.length}}<...
2018-07-11 15:52:26
199
原创 双击可编辑
写一个双击事件<span @dblclick="edit" style="cursor:pointer;" ref="element">双击可编辑</span>写方法edit(element) { // 获取要编辑的文本内容 var oldHtml = element.target.innerText; // 创建一个新的 input 输...
2018-07-11 15:18:24
1786
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人