啤啤熊

发表于2023-03-24|更新于2024-02-25|Map|BaiDuMap

效果代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0,user-scalable=no" /><title>百度地图API-批量地址解译</title><style type="text/css">body, html { width: 100%; height: 100%; margin: 0; font ...

Flutter 设置图片圆角的几种方案

发表于2023-02-25|更新于2023-06-05|移动端|Flutter

给容器增加圆角的几种实现Container实现123456789Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(8), ), child: Column( children: _rows(context), ), ); 通过PhysicalModel组件实现1234567891011PhysicalModel( borderRadius: BorderRadius.circular(10), color: Colors.transparent, clipBehavior: Clip.hardEdge, child: Container( margin: EdgeInsets.only(left: 4,top: 0,right: 0,bottom: 0), // margin 的四边如果设置了大于0的值，会影响圆角的显示 ch ...

CSS 设置滚动条样式

发表于2023-02-22|更新于2023-06-05|FrontEnd|CSS

滚动条中的属性属性描述 ::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 ::-webkit-scrollbar-track-piece 内层轨道，需要注意的就是它会覆盖第三个属性的样式 ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分 ::-webkit-scrollbar-corner 边角，两个滚动条交汇处 ::-webkit-resizer 两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）注意: 是给滚动的盒子加这些属性，例如： 12345678.form { height: 100vh; ...

sessionStorage实现多个标签下共享

发表于2023-02-20|更新于2023-06-05|FrontEnd|Javascript

前言在之前，保存用户信息大多数都是放在Cookie中，但是安全性太低了，随着Html5的诞生，Web Storage也进入我们的视野，于是存储信息都转入到SessionStorage，今天就分享一下SessionStorage的共享问题! 现有的浏览器存储机制 localStorage：~5MB，数据永久保存直到用户手动删除 sessionStorage：~5MB，数据只在当前标签页有效，当用户关闭浏览器时删除 cookie：~4KB，可以设置成永久有效，当用户关闭浏览器时删除利用localStorage事件来跨标签页共享sessionStorage当用户新开一个标签页时，我们先来询问其它已经打开的标签页是不是有需要给我们共享的sessionStorage数据。如果有，现有的标签页会通过localStorage事件来传递数据到新打开的标签页中，我们只需要复制一份到本地sessionStorage即可。传递过来的sessionStorage绝对不会保存在localStorage，从localStorage事件将数据中复制并保存到sessionStorage，这个流程是在同一个 ...

vue中使用CryptoJS实现AES加密解密

发表于2023-02-17|更新于2023-06-05|FrontEnd|Vue

安装 crypto-js1npm install crypto-js --save 新建 utils/crypto.js replaceJsonLongTranStr 用来处理 JSON str 整数长度精度丢失问题!AES_KEY 后端约束的 Key ，或者自己定义的 Key! 12345678910111213141516171819202122232425262728293031323334353637383940import CryptoJS from 'crypto-js';import { jsonSubstringFragment, replaceJsonLongTranStr } from '@/utils/index'// 解密 data：要加密解密的数据，AES_KEY：密钥，IV:偏移量export function decrypt(data, AES_KEY, IV) { let keyStr = AES_KEY ? AES_KEY : '1234567887654321&#x ...

AudioStudio修改Avd默认路径

发表于2023-02-09|更新于2023-08-07|Tools|AndroidStudio

Android Studio在配置安卓模拟器AVD时，默认的安装路径在C:\Users\dell.android\avd。一般正常配置的AVD文件大小在7、8G左右，会占用不少C盘的空间。配置环境变量添加环境变量 ANDROID_SDK_HOME，如图所示。（注意： ANDROID_SDK_HOME为Sdk所在目录路径， ANDROID_SDK_ROOT为Sdk的根目录路径；个人理解为ANDROID_SDK_HOME路径是默认配置 .android 文件的路径，利用这点可以确定个人想要存储AVD的路径）移动 .android 文件将上述 .android 文件包移动到需要存储AVD的路径下，比如我放置在了E:\Android路径下，此时移动后的 .android 可以被AS识别到。修改AVD配置文件在移动之后的路径E:\Android.android\avd下，找到后缀为 .ini 的文件，用文本文档打开，将其中path变量改为当前AVD所在路径，如图所示。

使用column-width实现瀑布流

发表于2023-02-07|更新于2023-06-05|FrontEnd|CSS

新增的column属性用来进行多列布局。注意新增属性需要些兼容前缀，如-moz-和-webkit- ，最大兼容到IE10 column-count column-count 把当前div中的文本/元素划分为三列 123-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari 和 Chrome */column-count:3; column-gap column-gap 规定列间的间隔像素 1column-gap:40px; column-rule column-rule 规定列之间的宽度、样式和颜色 1column-rule:3px solid #ff00ff; column-span column-span 允许一个元素的宽度跨越多列 1column-span: all; /*取值all 或 none*/ column-width column-width 每列的宽度 1column-width:100px; 除了上述的几个常用的属性之外，还有 ...

ArryBuffer类型转换为Json

发表于2023-02-07|更新于2023-06-05|FrontEnd|Javascript

使用场景当后端导出 Excel 或者其他文件类型时, 请求类型需要以二进制流返回ArrayBuffer,当请求以某种形式报错时,这时后端返回的就不在是二进制流了ArrayBuffer,这时会返回一个错误的Json对象, 但是我们最终接受到的还是以ArrayBuffer的形式数据,无法利用后端返回的错误信息,当作提示并作用在页面当中! 方案112345678910export function arrayBufferToJson( arrayBufferData ){ // 将其转换为uint8字节流 let uint8_msg = new Uint8Array(evt.data); // 解码成字符串 let decodedString = String.fromCharCode.apply(null, uint8_msg); console.log(decodedString); // parse,转成json数据 let data = JSON.parse(decodedString); console.log(dat ...

实现一个共享屏幕录制!

发表于2023-01-31|更新于2023-06-05|FrontEnd|Vue•VueDemo

使用 navigator.mediaDevices.getDisplayMedia() 来完成屏幕共享!使用 MediaRecorder 实例完成屏幕录制! 效果预览开发阶段创建 .vue文件，代码内容如下: template123456789101112<template> <div class="shared-screen"> <video id="video" autoplay playsinline muted width="100%" height="500"></video> <div class="operation" style="text-align: center"> <el-button type="primary" @click="sharedScre ...

vue2实现组件拖拽案例

发表于2023-01-29|更新于2023-06-05|FrontEnd|Vue•VueDemo

前言使用 vue2.x 结合 draggable 拖拽插件实现组件自由拖拽!注意事项: 本案例中，内置组件[折叠框、表单、图表、表格，树状下拉]这些组件都是本地封装好的，使用过程中，组件列表项需要配置自己所内置的组件! 效果预览(function(){var player = new DPlayer({"container":document.getElementById("dplayer0"),"autoplay":true,"hotkey":true,"preload":"metadata","video":{"url":"https://msirknightblog.cn/static/audio/mp4/vue/20230129163548.mp4"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})() 功能介绍组件自由拖拽组件效果预览生成vue模板生成vue模板可以根据提供文件路径，在本地开发目录下生成对应vue文件，此方式仅支持本地开发模式，线上模式暂不支持 ...