![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
青青子衿~~
分享有趣的html,css效果及一些技术代码,问题解决记录等,一起交流学习
展开
-
vue3 实现routerview缓存
include 中是要缓存的组件名称,字符串类型,如有多少个 ' , '逗号分隔。原创 2023-05-23 10:22:22 · 461 阅读 · 0 评论 -
【一文搞懂webGIS】
这些实现WebGIS的方式各有特点,适用于不同的应用场景。JavaScript地图库提供了简单易用的接口和灵活的可视化选项,适合快速搭建交互性强的WebGIS应用。WebGIS作为GIS的延伸和拓展,为我们提供了一个强大的工具,用于在互联网上共享、分析和可视化地理空间数据。通过使用WebGL库(如Three.js),可以加载和渲染复杂的地理空间数据,实现逼真的地球模型和交互性的地图效果。WebGIS是基于互联网的地理信息系统,通过使用Web技术和互联网的优势,使地理空间数据能够以在线方式被广泛访问和利用。原创 2023-05-17 15:35:34 · 829 阅读 · 0 评论 -
element单选框改为方框对号样式
【代码】element单选框改为方框对号样式。原创 2023-04-21 11:38:00 · 1078 阅读 · 0 评论 -
树形数据依据属性进行筛选
树形数据依据属性进行筛选原创 2023-02-24 13:21:57 · 118 阅读 · 0 评论 -
vue el-input输入限制
vue el-input输入限制原创 2022-09-23 15:07:49 · 364 阅读 · 0 评论 -
vue el-input输入限制
vue el-input输入限制原创 2022-09-23 15:07:18 · 326 阅读 · 0 评论 -
右键移动盒子且可拖拽
右键移动盒子且可拖拽。原创 2022-09-19 10:16:37 · 105 阅读 · 0 评论 -
react class组件使用 cdn方式
react class简单使用实例。原创 2022-09-15 18:03:38 · 144 阅读 · 0 评论 -
react 函数式组件使用 cdn方式
放代码方便大家学习,使用的html,cdn引入。react函数式组件简单使用实例。原创 2022-09-15 18:00:37 · 346 阅读 · 0 评论 -
css 实现心形加载动画
心形加载动画原创 2022-07-27 15:26:37 · 435 阅读 · 0 评论 -
vue数组修改dom不刷新问题
vue数组修改dom不刷新问题原创 2022-07-27 14:40:40 · 1157 阅读 · 0 评论 -
四色小球的loading动画
四色小球的loading动画原创 2022-07-25 16:53:47 · 135 阅读 · 0 评论 -
【闪亮的玻璃图标悬浮效果】
闪亮的玻璃图标悬浮效果原创 2022-07-25 14:17:47 · 113 阅读 · 0 评论 -
HTML+CSS伸缩式导航栏
HTML+CSS伸缩式导航栏原创 2022-07-25 14:09:57 · 1144 阅读 · 0 评论 -
【css 实现input输入动画】
常见的input框输入动画原创 2022-07-25 14:02:59 · 518 阅读 · 0 评论 -
【css实现3D旋转卡片】
css实现3D旋转卡片原创 2022-07-25 12:01:22 · 711 阅读 · 0 评论 -
css炫酷动画登录效果
炫酷动画登录效果原创 2022-07-25 11:33:24 · 747 阅读 · 0 评论 -
正则匹配 字母开头后必须连接数字且必须以,结尾(附正则手册供大家学习)
正则表达式原创 2022-07-06 11:14:33 · 1982 阅读 · 0 评论 -
vue css 实现类似qq窗口抖动效果
css 动画效果原创 2022-06-01 15:49:11 · 485 阅读 · 0 评论 -
Eslint +Vue配置
完成之后会在项目根目录生成.eslint.js文件// eslintrc.jsmodule.exports = { env: { browser: true, es2021: true, }, extends: [ "@vue/prettier", "plugin:vue/vue3-essential", "eslint:recommended", "airb原创 2022-05-13 20:49:06 · 1185 阅读 · 0 评论 -
一分钟搞懂WebWorker
Worker我们知道JavaScript是一门单线程的语言,那么如果我们有一些计算特别耗时,想要放到另外一个线程去做,worker应运而生worker就是一个独立于JavaScript线程之外的另外一个线程,可能理解为JavaScript实现多线程的方式worker的使用第一步判断浏览器是否支持worker,typeof (Worker) !== “undefined”通过new Worker()构造方法创建一个worker线程,返回一个实例用于发送和接收数据onmessage() 方法监听原创 2022-05-11 16:22:08 · 2979 阅读 · 0 评论 -
一分钟搞懂js事件循环
宏任务与微任务:异步任务分为 宏任务(macrotask) 与 微任务 (microtask),不同的API注册的任务会依次进入自身对应的队列中,然后等待 Event Loop 将它们依次压入执行栈中执行。宏任务(macrotask):script(整体代码)、setTimeout、setInterval、UI 渲染、 I/O、postMessage、 MessageChannel、setImmediate(Node.js 环境) 微任务(microtask):Promise、...原创 2022-05-11 16:09:14 · 498 阅读 · 0 评论 -
git 常用命令大全
配置和创建版本库查看配置: git config --list配置/修改用户名:git config --global user.name "name"配置/修改邮箱:git config --global user.email "email"检出仓库:git clone git://github.com/jquery/jquery.git查看远程仓库:git remote -v添加远程仓库:git remote add [name] [url] //nam...原创 2022-05-10 14:25:45 · 163 阅读 · 0 评论 -
Vue 动态路由
Vue 动态路由,顾名思义,就是我们的路由是动态加载的而不是写死的,本质就是使用vue提供的router.addRoutes 或者router.addRoute这两个函数的功能实现的注意:推荐大家使用 router.addRoute , 因为 router.addRoutes 使用会有警告并且此函数在vue-router v4.x 里被删除了静态路由一般情况,我们的路由都是静态的写出route 对应的path和component 注意path和component时固定的写...原创 2022-05-10 13:24:40 · 2731 阅读 · 0 评论 -
vite 项目搭建cesium
安装插件npm ivite-plugin-cesium配置vite.config.tsconst path = require("path");import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import cesium from 'vite-plugin-cesium'; // 引入插件// https://vitejs.dev/config/export default de...原创 2022-05-09 11:17:46 · 2093 阅读 · 0 评论 -
vue 使用npm 加载cesium
安装 npm i cesium@1.86.1vue 组件加载<template> <div ref="mapcontainer" class="map"> </div></template><script>import {Viewer} from '@/../node_modules/cesium/Source/Cesium.js';import Page from './Page';const Ce.原创 2022-05-07 15:44:34 · 1232 阅读 · 1 评论 -
Axios的封装、请求响应拦截器及其各种方法详解
1.安装axiosnpm i axios2. axios的请求方式2.1 get请求2.1.1 axios.get方法//参数使用{ params:{} }方式,注意是{}内params:{}axios.get("/student", { params: { name: "Lucy", age: 10, state: false, }}).then(res => { console.log(res)}).catch原创 2022-05-07 14:16:20 · 2236 阅读 · 0 评论 -
GeoJSON详解
GeoJSON1.简介GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型:点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。一个完整的GeoJSON数据结构总是一个(JSON术语里的)对象。在GeoJSON里,对象由名/值对–也称作成员的集合组成。对每个成员来说,名字总是字符串。成员的值要么是字符串、数字、对象、数组,要么是下面文本常量中的一个:“tru原创 2022-04-29 14:04:38 · 5915 阅读 · 0 评论 -
MapLibre的使用
MapLibre1.初始化地图引入maplibre-gl.js创建一个地图容器实例化地图 <body> <div id="map"></div> <script> //初始化地图实例 var map = new maplibregl.Map({ container: 'map', //容器的id style: './static/map.json', //地图描述数据的路径 center: [0, 0]原创 2022-04-29 14:00:07 · 5224 阅读 · 0 评论 -
Axios get和post 的参数问题
axios 实例请求通过向 axios 传递相关配置来创建请求,以常见的两种请求方式get,post为例:1.get方式axios({ method: 'get', url: '/user', params: { firstName: 'XXX', lastName: 'XXX' } })2.post 方式axios({ method: 'post', url: '/user', data: { firstName: '原创 2022-04-25 17:28:03 · 691 阅读 · 0 评论 -
vue3 sass-loader和node-sass 的坑
保证你的电脑有python 2.7的安装!!!!!!!!链接:Python Release Python 2.7.0 | Python.org然后安装对应版本的node-sass 和sass-loader "sass-loader": "^8.0.2", "node-sass": "^4.14.1",原创 2022-04-22 11:55:38 · 1620 阅读 · 0 评论 -
javascript css实现3d轮播图
Vue 代码<template> <div class="mobile-unit"> <div class="mobile-unit-container"> <div class="items"> <div class="mobile-unit-item five-in-one" :class="[{ 'is-active': currentComponent =...原创 2022-03-31 16:46:48 · 1494 阅读 · 2 评论 -
vue 实现边框流光动画
直接上代码<template> <div class="login"> <h1>动态效果</h1> <div class="lightline"></div> <ol> <li v-for="(item, index) in indoorParams" :key="index"> <div class="animate-border"&...原创 2022-03-30 11:24:54 · 6123 阅读 · 1 评论 -
element-ui修改.el-checkbox样式,el-checkbox-group内文字不显示问题
修改样式//checkebox 的文字颜色:deep(.el-checkbox__label) { font-size: 16px; color: #fff !important;}//checkbox框的默认的样式:deep(.el-checkbox__inner) { background-color: transparent;}//checkbox框hover的border颜色:deep(.el-checkbox__inner:hover) { border-co原创 2022-01-17 08:44:10 · 2597 阅读 · 0 评论 -
vue scss和scss-loader的对应版本报错
整理几个可以对应的版本sass-loader 4.1.1,node-sass 4.3.0sass-loader 7.0.3,node-sass 4.7.2sass-loader 7.3.1,node-sass 4.7.2- 问题解决先把现有的scss 和scss-loader卸载,然后再安装对应版本的npm uninstall sass-loader node-sass //卸载npm install sass-loader@7.3.1 node-sass@4.14.1原创 2022-01-09 14:33:20 · 854 阅读 · 0 评论 -
vue ::v-deep警告问题
控制台警告 //单个类名 :deep(.el-table) {} //多个类名:deep(.el-table__header-wrapper .el-checkbox__input::after) {}原创 2021-08-26 11:08:09 · 868 阅读 · 0 评论 -
TypeScript笔记(超全)
1.TypeScript中的基本类型TypeScript中的基本类型:类型声明类型声明是TS非常重要的一个特点;通过类型声明可以指定TS中变量(参数、形参)的类型;指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错;简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值;语法:let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{ ...}转载 2021-07-22 15:36:25 · 1078 阅读 · 0 评论 -
cordova android 签名版apk
android 签名1. 生成签名文件keytool -genkey -v -keyalg RSA -keystore NAOC.keystore -alias NAOC2 -validity 20000keystore 表示生成的证书及其存放路径,如果直接写文件名则默认生成在用户主目录下;alias test2表示证书的别名是test2;keyalg RSA 表示采用的RSA算法;validity 20000表示证书的有效期是2原创 2021-06-23 11:23:17 · 260 阅读 · 0 评论 -
js 原型链
js 原型链1. 构造函数//创建一个构造函数Starfunction Star(name, gender) { this.name = name this.gender = gender this.sing = function () { console.log('方法') }}var s1 = new Star('杜甫', '男') //s1就是实例出来的对象1.1 构造函数原型对象prototyp原创 2021-06-22 19:40:08 · 228 阅读 · 0 评论 -
移动端适配
1. 移动端适配1.1 vue-rem适配:设计稿:750尺寸 是 iPhone6/7/8 屏幕宽度的 2倍视图第一步,先用vue-cli快速构建出一个项目,然后,安装postcss,postcss-pxtorem,postcss-loader,postcss-import,postcss-url;npm i --save postcss postcss-pxtorem postcss-loader postcss-import postcss-url第二步,在项目根目录下添加.postcss原创 2021-06-18 10:13:13 · 97 阅读 · 0 评论