自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 收藏
  • 关注

原创 百度地图API账号创建和使用

注册一个百度地图开发者账号(由于百度地图API需要创建自己的地图应用,生产一个AK秘钥key来定义自己的地图)控制台左侧 应用管理 --> 我的应用 --> 创建应用 --> 根据自己的实际情况填写完提交后。这里注册的时候会用百度账号来登录,跟着指引填写信息,需要填写真实姓名实名认证。就会得到一个应用记录,里面有使用API必须的AK key值。跟着文档就可以创建一个简单的百度地图示例。首先需要一个百度帐号(就是百度贴吧账号)根据文章最开始的文档就可以创建一个地图了。2.创建应用,得到一个key。

2024-04-11 15:28:10 427

原创 three.js 鼠标点击获取模型对象

three.js 创建模型后,想要实现点击模型获取模型对象触发相应事件。可以使用它提供的API THREE.Raycaster()

2023-10-18 21:05:25 642

原创 uniapp新建项目后,如何在浏览器和微信小程序运行

参考uni-app官网提供了HBuilderX可视化创建和vue cli命令两种方式创建项目,由于HBuilder和它都是DCloud公司的产品,使用它创建项目可以很方便的下载插件什么的。4.编辑器里点击微信开发者工具运行,等待一会会儿编译完后,微信开发者工具就会自动打开显示出页面。下载HBuilderX,然后参照这个文档点两下选择你需要的模版,就能建好一个项目啦!运行在内置浏览器是直接按照文档点击运行即可,但是会占用编辑器的空间。2.和浏览器运行一样需要在‘配置web服务器‘中 配置小程序的路径。

2023-08-22 18:33:28 1986

原创 css grid网格布局 自适应居中 超好用!

grid 网格布局 自适应居中

2023-08-08 19:59:39 551

原创 vue自定义指令,根据权限控制元素显示隐藏

接上一篇自定义指令-按钮防重,这篇记录一下自定义按钮权限控制指令,全局注册指令见👇。

2023-06-30 10:41:15 606

原创 three.js入门

随着浏览器性能和网络带宽的大幅度提升,越来越多的Web应用使用3D技术。而使用WebGL原生的API来写3D程序非常的复杂,同时需要较多的数学知识,对于前端开发者来说学习成本非常高。Three.js是基于webGL的封装的一个易于使用且轻量级的3D库。

2023-06-27 11:49:37 92

原创 table中td单元格无法设置宽度解决方案

table中td单元格无法设置宽度解决方案

2023-05-19 22:00:12 2043

原创 vue3自定义指令批量注册(按钮防重指令)

vue3 自定义指令 批量注册 按钮防重提交

2023-05-19 21:49:21 574

原创 vue3 页面组件中获取上一个页面的路由地址

那vue3中怎么获取上一个页面的路由地址...

2023-04-20 19:57:27 9324 4

原创 package.json依赖中的^、~和*号分别代表什么意思

我们经常看到在package.json文件的依赖版本前面有^号,以前一直以为是npm最新版本的意思,最近发现并不是。

2022-12-30 16:52:31 847

原创 vue 路由history模式刷新页面404问题

vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下浏览器会直接去服务器找这些地址,导致服务器没有对应的页面地址而报404。增加location配置,与项目中配置的名称一致,try_files 后面的文件名也要与名称一致。前端项目中修改项目的base路径,这里我设置为main。第二步,修改nginx配置。

2022-10-09 12:47:44 4003 1

原创 qiankun微前端应用间的通信 vue

qiankun微前端应用间的通信 vue

2022-09-02 15:28:23 791

原创 vite作为qiankun子应用的方法

vite构建的vue3项目作为qiankun子应用的方法

2022-08-18 10:53:55 3826 3

原创 vue3 根据dom大小动态改变Echarts图表-自定义指令

vue 使用自定义指令,根据父元素大小动态改变Echarts图表的大小

2022-07-28 17:01:15 1022

原创 原生js,判断点击元素外的区域

判断是否点击到元素外区域

2022-07-19 11:21:23 2705

原创 vue3 使用particles粒子效果插件,修改粒子画布宽高

vue3 使用particles粒子效果

2022-06-15 16:21:46 955

原创 js原生 vue使用draggable进行拖拽填充

一个需求是将页面上的某个元素拖动到input框中,填充值,使用draggable即可比较简单的实现此需求1.需要拖动的元素加上draggable属性 <div draggable="true" @dragstart="dragstart">{{ xxx }}</div>2.拖进的元素上加事件,监听到已有元素进入<el-input v-model="sourceName" @dragover="(e) => e.preventDefau

2022-04-21 15:51:54 1981 1

原创 table行中的el-dropdown点击某项获取行的信息

在使用el-table时,操作列需要加一个下拉菜单对选中行进行操作。使用el-dropdown, element官网上是在组件加@command方法,但是像官网这样只能拿到点击项的key没法拿到表格当前行的信息,可以使用以下方式://官网@command="handleCommand"//解决方式@command="(command) => { clickDropDown(command, row); } "示例: <el-ta

2022-04-13 12:53:53 1768

原创 element-plus icon全局引入

vue3使用element-plus的icon 时,需要全局引入icon,记录一下1.安装element- plus iconsnpm install @element-plus/icons-vue2.main.js里全局引用import * as ElIcons from '@element-plus/icons-vue'// 统一注册Icon图标for (const iconName in ElIcons) { app.component(iconName, ElIcons[ico

2022-04-13 12:12:44 1623

原创 elementui table 不能实现压缩自适应解决方式

element UI或elementPlus都适用使用flex布局需要table自适应变宽事没有问题,但是压缩时却不能生效解决方式:父元素加position: relative 它本身加position: absolute<div v-else style="position: relative"> <el-table :data="list" style="width: 100%; position: absolute" > ...

2022-04-01 17:58:31 693 4

原创 DOClever本地安装使用

准备:node环境一、安装maogoDB1.下载并安装 mongodb-windows-x86_64-5.0.5-signed.msi测试是否安装成功:(1)打开cmd命令行(2)进入它的安装目录C:\Program Files\MongoDB\Server\3.4\bin(3)输入如下的命令启动mongodb服务:mongod --dbpath出来一堆日期和option2.启动还是在bin目录下 输入启动命令:net start MongoDB(关闭命令是 net stop Mongo

2022-01-25 17:59:38 1146

原创 页面与内嵌iframe的数据通信

例如A页面里的iframe套的B页面,B页面获取A页面的数据1.通过url,参数拼接2.通过postMessage方法,此方法可以建立不同 origin 的两个窗口之间的双向数据通信

2022-01-25 17:53:44 1669

原创 ts 变量类型以及定义变量 与js对比

ts 提供数据类型:boolean 布尔number 数字string 字符串array 数组tuple 元组:数组元素数据类型不同时,需要使用元组enum 枚举any 任意类型void 没有任何类型Null nullUndefined undefinedNever 永不存在的值的类型ts 定义数据:定义并赋值:var [变量名] : [类型] = 值;定义不赋值:var [变量名] : [类型];对比 js// booleanvar a = true;var a: bo

2022-01-04 12:56:32 2051

原创 vue2.6使用pdf.js预览pdf文件-亲测有效

最近有个需求是页面上预览pdf,但是用了 iframe和embed都不行,会直接下载,于是决定用pdf.js来做。步骤如下1.下载pdf.js 文件地址:https://github.com/mozilla/pdf.js2.将下载的build和web文件放在一个文件夹中,我取的名是pdf,然后将这个文件夹放到vue工程的public文件下3.页面中的使用//页面可使用iframe或embed标签<embed :src="pdfSrc" type="application/pdf" wi

2021-07-02 23:09:25 3015 15

原创 js 防抖节流

防抖和节流都是为避免频繁触发,优化性能的方法。不同的是,防抖是将单位时间内连续触发变为最后一次触发执行;下面展示一些 内联代码片。var foo = 'bar';节流是将连续触发变为隔一段时间执行...

2021-04-22 14:47:39 86

原创 css3 animation 带背景图的闪烁动画出现蒙层怎么解决?

今天写一个灯光闪烁效果,最开始用js控制元素显示隐藏然后觉得这样太粗暴了且性能不太好,后面用animation改变div的透明度的方式来做的。因为这个元素后面有一块大的背景图,元素闪动时总是有一块同此元素宽高的蒙层,试了好多方法终于解决了有问题的代码:.light{opacity:.1;width:300px;heigt:200px;background: url('../img/light.png') no-repeat center;animation: twinkle .6s ease-

2021-01-04 15:15:28 724

原创 vue 多行文字滚动 停顿

结合c s s定位与j s控制marginTop 累加数组实现无缝滚动 并停顿<div class="fixBox"> <div id="mesBox" class="anim> <div class="item" v-for="(item,index) in options" :key="index"> {{item.name}} </div> </div></div>data(){ return{

2020-12-22 11:40:59 966

原创 canvas 多个小球绕椭圆轨道转动

这里写自定义目录标题如何插入一段漂亮的代码片如何插入一段漂亮的代码片// An highlighted block<style>*{ padding:0; margin:0; } body,html{ width:100%; background-color:#000; } canvas{ margin:0 auto; } </style><body> <canvas id="canvas" width="1000" height

2020-12-15 21:36:07 1000

原创 Vue中使用Scss全局变量 配置

Vue中使用Scss全局变量 配置1.首先 要安装scsshttps://www.jianshu.com/p/0b604429b0d52.安装sass-resources-loadernpm install sass-resources-loader --save-dev3.配置在build文件夹下,找到util.js文件,然后配置相关代码。 function generateSa...

2020-04-22 19:17:23 665

原创 前端使用sonar扫描代码 安装及使用

前端使用sonar扫描代码 安装及使用由于公司申请项目,要求用sonar 扫描代码,自己在网上搜了一些方法,然后摸索着弄了两天才弄出来(我可真是个小白~)好 进入主题,我们此处只是针对本地扫描代码,我扫的是js安装需要安装SonarQube和sonar_scanner需要java环境和数据库(本地扫描不需要安装数据库),安装配置SonarQubeSonarQube下载后,直接解压,需...

2019-09-26 22:53:48 4638 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除