代码小菜鸟00-CSDN博客

原创 vue html2canvas 截图浏览器显示网络错误下载失败

这个问题是canvas保存图片到本地时各个浏览器像素的限制不同，所以将图片数据转换成 Blob 数据流下载下来就行了。最近遇到截图功能出现保存到本地的时候，浏览器显示网络错误下载失败。最后发现由于下载的dom包含地图元素，下载速度很慢。

2023-06-16 17:31:27 555

原创 vxe-table 边框样式

vxe-table 初次使用，以及可编辑表格样式修改

2022-10-31 14:26:13 3235 1

原创 el-table 点击单元格修改该单元格颜色

el-table点击单元格，该单元格边框和字体颜色修改。

2022-10-26 15:21:25 2528 3

Cesium点聚合点聚合实现效果实现代码点聚合在Cesium相关项目开发过程中，当加载大量的点位后对底图有遮挡，需要使用点聚合功能，因此在聚合时需要动态更新聚合图标上被聚合的点位的数量。实现效果效果不是太理想，我用来测试的POI数据密度太大了。https://blog.csdn.net/weixin_45782925/article/details/123054390实现代码最开始图片显示不完全修改combineIconAndLabel(url, label, size)中传入size的

2022-05-06 16:23:22 2015 8

原创 cesium自定义弹窗

本文章是使用js写的。思路1、创建cesiumContainer容器。在script标签内添加cesiumContainer容器 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZCI6NjE0MjMsImlhdCI6MTYyNjA3MjcwMn0.t78sW9YdR2gWIB55l

2022-02-21 16:24:27 8682 17

原创 tabs的实现

我是使用div实现tabs的切换功能，成功的实现了切换的效果。直接贴代码：<template> <div class="projrct" v-show="masShow"> <div class="projrct-title"> <div class="title">11111111</div> <div class="close-imgs" @click="close"> <

2022-01-22 09:28:28 383

原创 cesium 场景出图

cesium 导出为图片cesium 场景出图的代码很简单，但是有一个坑，导出的图片就是黑色背景其他任何元素都没有，一开始以为是编码有问题。viewer.render() //不加会出现导出是一张黑乎乎的图片，<template> <div class="printout"> <div class="title" @click="saveFile">场景出图</div> </div></template><scr

2022-01-19 13:30:09 891 1

原创 vue中 el-select 高度和右侧图标修改

主要记录右侧图标的修改方法修改el-select的高度后发现右侧的图标错乱。展开前右侧图标不居中。展开后右侧图标错乱。加入代码，我使用的是lang=“scss”，不一样的兄弟可以把::v-deep改掉。::v-deep .el-input__inner { background-color: transparent !important;/**背景透明色 */ border-color: rgba(255, 255, 255, 0.5); // color: #d9d9d9;

2021-12-31 10:55:15 2154

原创 Vuex的使用

vuex的安装npm install vuex --saveyarn add vuex新建目录新建文件夹store，文件index.js全局配置在main.js中进行配置import Vue from 'vue'import App from './App'import store from './store'new Vue({ el: '#app', store, router, components: { App }, template: '<App/

2021-12-30 11:07:43 295

原创 echarts 柱状图头部添加标记

遇到一个需要在柱状图的柱子顶端的添加标记，添加的标记比较简单是距离头部一定距离添加一个与柱子一样宽的长方形。柱状图的柱子顶端添加等宽的长方形最开始的思路是使用markpoint进行添加感觉比较麻烦后面放弃，后俩又想使用散点图修改点的形状来实现。最后还是使用两个柱状图叠加，底部的柱状图设置为无色透明就可以完成。 quota() { this.chart = Echarts.init(this.$refs.chart); let yLabel = [ "A0

2021-12-27 14:45:05 3182 2

原创 el-select的背景透明和图标颜色修改

修改el-select图标的颜色时查了一下发现很多的文章不起作用，可能是因为我用的scss的原因吧，最后还是修改成功了，记录一下。下面是el-select相关的代码 <div class="measure-section"> <span class="section-span">时间段：</span> <el-select v-model="type" placeholder="请选择" popper-class="selectFr

2021-12-20 17:02:48 7379 3

原创 JS遍历对象

第一种Object.keys()和Object.values()key:value有的叫键值对，keys(obj)返回由一个key组成的数组；values(obj)返回一个由value组成的数组。var obj = { name: 'nians', age: 20 } var a = Object.keys(obj) console.log(a); //['name', 'age'] var

2021-11-24 08:57:43 425

原创 Javascript数组的方法

数组常用方法1、join()方法把数组拼接起来，以字符串的方式进行返回，如果不给参数，默认以逗号进行间隔。var arr = ['kai', 'ke', 'ba'] arr.join() console.log(arr.join()); //kai,ke,ba console.log(arr.join("")); //kaikeba2、concat()方法concat - 合并多个数组,并返回一个新数组，不会改变原有数组。var arr1 = [

2021-11-20 16:41:23 458

原创 Javascript和tween.js实现钟表

最近在从新学习JS的一些基础的方法，发现了Tween.js写了一点东西，直接上代码。时钟代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-

2021-11-08 11:22:55 246

原创快速排序算法

快速排序基本步骤1、在数组中选取基准值2、在数组中比基准值小的摆放在左边，比基准值大的摆放在右边，分割结束后基准值会插到中间位置。3、使用递归，对左右两边重复分割。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n

2021-11-03 14:05:45 76

原创 Vue3 验证码倒计时实现

在登录界面中实现短信验证的倒计时功能最近在学习Vue3，写登录界面时遇到了短信验证倒计时的问题，代码是根据Vue3+Antd+Js实现的，话不多说直接上代码。<template> <div class="forget"> <div class="forget-wrap"> <a-form id="components-form-demo-normal-login" class="login-form"

2021-10-15 16:46:49 1766 1

原创 Vue3中vue.config.js的配置

新建的vue3项目中没有vue.config.js文件，我们需要手动的添加和配置该文件，根目录中创建 vue.config.js。直接百度搜索vue.config.js就能找到他的配置文件，进入vue.config.js配置参考，里面有所需要的配置代码，根据需求去找就行。...

2021-10-15 08:53:22 770

原创 Vue forEach遍历数组

获取接口数据后发现少了一个需要的字段，需要展示租房人数，无该字段但是有租房人信息的数组tenantList，因此获取该数组的长度length即可的代表租房人数。tenantList是results中的数组。使用forEach遍历的到tenantList.length data.results.forEach(r => { console.log('r.tenantList', r.tenantList) r['ZHRS'] = r.tenantList ? r.tenantLis

2021-10-13 13:35:45 4146

原创 Ant-Design-Vue 动态修改table行高

动态绑定 <a-table :columns="columns" :dataSource="data" :pagination="pagination" rowKey="id" :scroll="{ x: 0, y: tableStyle.state != 'small' && tableStyle.state != 'full' ?

2021-09-28 14:22:15 2417

原创 Vue Cesium 3dTiles模型高度调整

首先加载3dtiles模型 let tileset = dtScene.createDT3DTilesLayer({ name: 'xian', label: '线', url: '3DTILE/tileset.json', brightness: 1.2, //对比度 })调整3dtiles模型的高度 // 调整位置 var height = -24.0 tileset._featureSet.readyPromise

2021-09-26 17:25:06 2366

原创 node.js http模块 url 模块

node.js http模块 url 模块node.js http模块 url 模块`代码模板//引入http模块var http = require('http');//创建web服务/* requst: 获取URl传过来的信息response: 表示给浏览器响应信息 */http.createServer(function(request, response) { //设置响应头 response.writeHead(200, { 'Content-Type': '

2021-09-18 15:02:54 47

原创非父子组件之间监听和触发事件

Vue3中使用mitter.on和mitter.emit由于需要在调用一个不相关的非父子组件中的方法，无法使用父子组件之间调用方法的方式，因此对事件进行监听和调用。$on():监听事件；$emit() 触发事件；1、mitter.on 代码对事件进行监听操作。 mitter.on('ToolControlHide', () => { showBox.value = false })2、mitter.emit代码在方法或者事件中直接调用，触发事件。 const ToolC

2021-08-28 10:33:38 343

原创 Vue前端实现对数据的增删改查

Vue实现对数据的增删改查git上找的代码，纯属为了学习一下。首先在html页面上事先写好表格和搜索框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=

2021-08-27 16:49:00 6789 8

原创 vue3父组件调用子组件的方法

父组件调用子组件的方法在Vue3中调用子组件的方法只需要在父组件加代码就能实现。1、使用ref在调用子组件的代码中添加ref相关代码，如下：2、setup()部分代码如下：不管是子组件还是父组件不要忘记在return{}中返回...

2021-08-24 17:26:42 4961 4

原创 echarts象形图pictorialBar

象形柱图的官方解释象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示，它利用图片和形状表现数据，具体来说它既可以用图形的长宽变形表现数据，也可以用图形的个数、甚至是图形的颜色、透明度变化表现数据。代码实现var category = ['服务器数（台）', '计算容量（核）', '内存容量（GB）', '存储容量（PB）'];var barData = [0, ~~(Math.random() * 100), ~~(Math.random() * 100), ~

2021-08-05 13:23:22 3305

weixin_42274795的博客