自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(82)
  • 资源 (2)
  • 收藏
  • 关注

原创 开发过程中遇到奇奇怪怪的东西之二:路由嵌套层级太深导致页面刷选不成功

这意味着一旦组件被加载过,再次访问相同的路由时,组件不会重新加载,而是直接使用缓存的组件实例。当从Monthly页面跳转到MonthlyDetail页面时,由于MonthlyDetail组件已经被加载过并缓存了,因此不会触发重新加载,导致没有看到页面刷新或反应。首先 路由的配置是这样的,从路由Monthly页面跳转到MonthlyDetail页面,进入MonthlyDetail 页面并没有刷新,没有反应,找了好久的问题所在,监听路由变化,onMounted生命周期中触发初始化,但是就是一直没有变动。

2024-06-21 16:02:51 218

原创 openlayers实现绘制图标,并实现图标的聚合功能

openlayers实现绘制图标,并实现图标的聚合功能

2024-05-11 16:15:00 383

原创 cesium实现绘制图标,并实现图标的聚合功能

在Cesium中,点聚合功能是指将大量的点数据聚合成一个更大的点或者其他形状,以减少在地图上显示大量点数据时的视觉混乱和性能问题。点聚合功能通常用于在地图上显示大量的点标记,例如地图上的POI(兴趣点)、传感器数据等。点聚合功能在Cesium中是一种处理大量点数据的有效方式,可以提高地图的可读性和性能。这样可以在保持地图清晰的同时,有效地展示大量的点数据,提高用户体验。

2024-05-11 15:37:57 854

原创 开发过程中遇到奇奇怪怪的问题(一)Uncaught ReferenceError: __VERSION__ is not defined at vue3-simple-uploader.js?

Uncaught ReferenceError: __VERSION__ is not defined at vue3-simple-uploader.js

2024-05-11 11:23:07 171 1

原创 vite和webpacke的常规配置

vite官网vite是一个由Vue.js开发的构建工具,它利用了ES Module Imports,在开发环境下可以实现按需编译,加快了开发速度。而在生产环境下,它使用Rollup进行打包,提供更好的tree-shaking、代码压缩和性能优化。vite主要解决了现有工具(如webpack、rollup)在大型项目开发过程中存在的启动慢、热更新慢等问题。vite致力于为现代前端工作流提供一个更快、更轻的解决方案。快速的启动时间。通过区分依赖和源码两类模块,改进了开发服务器启动时间。

2024-04-23 14:15:18 990

原创 vuex和pinia转态管理工具介绍

相同点: 都是Vue.js的状态管理工具区别PiniaVuex支持Vue2和Vue3都支持Vue3写法需要额外配置Mutation只有 state, getter 和 action,无Mutationaction异步、Mutation 同步actionaction支持同步和异步action异步、Mutation 同步Typescript良好的Typescript支持需要额外的配置模块嵌套不需要嵌套模块,符合 Vue3 的 Composition api,让代码扁平化需要。

2024-04-22 17:13:03 477

原创 cesium用法

4、创建项目 vue3+vite+TypeSript。1.下载或者安装cesium的插件。2、点击登录,注册或者登录已有账号。下载cesium依赖。

2024-03-11 14:17:45 402

原创 Lastools工具使用

Lastools工具使用

2024-02-29 16:22:19 525

原创 cesuim场景截屏功能

cesuim场景截屏功能:对当前场景viewer范围进行拍照截图,类似快照功能,截图后的照片,可直接下载到浏览器

2024-02-29 09:56:25 700

原创 es6相关高级用法

【代码】es6相关高级用法。

2024-01-17 15:02:46 352

原创 vue计算时间差,并使用vant组件实现定时器

1.对时间的处理,有时需要对时间进行差值计算2.使用vant组件实现计时器引入:3.使用

2022-07-05 09:39:35 1916 1

原创 [Vue warn]: Error in getter for watcher “parsedValue“: “TypeError: dateStr.match is not a function“

1、是由于页面的element ui组件的日期组件报错,组件绑定的值为Number数据类型,改一下改成String数据类型就可以例如下面所示

2022-06-25 09:38:38 8890 1

原创 vue3.0记录滚动位置的两种方法

第一种方法onActivated+onBeforeRouteLeave 方法实现import { onBeforeRouteLeave} from 'vue-router'const scrollRef = ref(null)const scrollTop = ref(0)onActivated(()=>{ nextTick(()=>{ scrollRef.value.scrollTop = store.getters.scrollTop })})onBefor

2022-05-20 10:09:52 5248 1

原创 实现瀑布流布局的四种方法

一、 什么是瀑布流布局1、是什么页面上是一种 参差不齐 的多栏布局,类似上图所示随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部,大部分为图片,图片 固定 宽度,高度 不一,根据原比例缩放到宽度达到固定的要求,每行排满后,新的图片添加到后面2、特点固定宽度,高度不一 岑参不齐的布局以图片为主二、有什么优缺点1、优点 节省空间:降低页面的复杂对于 触屏设备非常友好:通过向上滑动浏览,交互方式更符合直觉良好的视觉体验:浏览时不会被页面整整齐齐的高度影响,

2022-05-13 10:57:45 26255 14

原创 vue3.0 移动端二次封装van-uploader上传图片组件

vue3.0 移动端二次封装van-uploader上传图片组件1、前提:业务需求,最多上传6张图片,并可以实现本地预览2、解决方法:使用vant组件库中的van-uploader实现3、代码实现template <div class="upload-oss"> <van-uploader :after-read="onRead" :before-read="beforeRead" :accept="fileType" v

2022-04-28 15:08:11 2761

原创 vue3 移动端使用clipboard 插件实现复制功能

1、安装npm install clipboard --save2、页面引入import Clipboard from 'clipboard'3、script中使用<script setup>import Clipboard from 'clipboard'import { onMounted,ref,getCurrentInstance} from "vue"const { proxy } = getCurrentInstance()onMounted(()=>{

2022-04-27 17:48:51 986

原创 vue 使用 vue-pdf 实现pdf在线预览

vue 使用 vue-pdf 实现pdf在线预览1、安装npm install --save vue-pdf2、引用import pdf from 'vue-pdf'export default { components: { pdf }, data() { return { pdfUrl: "pdf的路径" ,// 本地获取或者在线请求获取 }; },};3、页面使用<div class="content"> <pdf

2022-04-20 17:30:39 2294 2

原创 使用el-dialog踩到的坑

const a = [{"张三":{'aa':'huasa','bb':'aojiao'}},{"lisi":{'rrr':11111,'ggg':22222}},]let newarry = []a.forEach(item=>{let cc = {name:Object.keys(item)}console.log(JSON.stringify(Object.keys(item)))})

2022-04-20 16:01:20 853

原创 设置display的影响

父元素设置display:flex后,子元素设置的宽度无效解决方法:在子元素中写flex-shrink:0; 后在写宽度.fartherCss{ display: flex;}.sonCss{ flex-shrink:0; width: 30px;}

2022-04-20 14:50:26 725

原创 Object.assign用法

1、是什么Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。const a ={ name: '张三'}const b ={ age: '18', sex: '女'}const c = Object.assign(a,b) console.log(c) // {name: '张三', age: '18', sex: '女'}console.log(a) // {name: '张三', age: '18', sex: '女

2022-03-16 15:06:45 1505

原创 JSON.stringify用法

1、是什么JSON.stringify 方法将某个对象转换成 JSON 字符串形式const userInfo= { name: 'zs', age: 20}console.log(JSON.stringify(userInfo));// {"name":"zs","age":20}2、语法语法: 可以有三个参数,第一个是传入要序列化的值,第二个为函数或者数组,第三个是文本添加缩进、空格和换行符JSON.stringify(value[, replacer[, space]

2022-03-11 15:08:25 68416

原创 vue3采用xlsx库实现本地上传excel文件,前端解析成Json数据

需求:本地上传excel文件,但需要对excel文件的内容进行某些操作(增删改等)后再上传到后端服务器中,则需要前端解析excel文件实现:通过xlsx库实现1、下载依赖npm install xlsx --save2、页面使用import * as XLSX from 'xlsx' // vue3可用此引入import XLXS from "xlsx"; // vue2可用此引入3、页面代码写法 <input type="file" accept=".xls

2022-03-05 17:38:49 6460 11

原创 TypeScript学习-类class

1、类的定义 类 class 类名{ 属性(静态属性,动态属性) 方法(静态方法,动态方法) }class Person { name: string = 'zhangsan' // 定义实例属性 (只有实例化后才能调用) // const per = new Person() // console.log(per.name) static age: number = 18 // 定义类属性(静态属性),前加一个static

2022-02-25 16:36:47 2105

原创 @1.0.0 build: `webpack --mode production`

使用babel配置时一直npm run build 一直出错,后面发现原来是presets的数据结构出错了以下是错误写法 presets:[ "@babel/preset-env", // 指定环境的插件, ....内容 ]正确的 presets:[ [ "@babel/preset-env", // 指定环境的插

2022-02-22 18:14:21 686

原创 TypeError: CleanWebpackPlugin is not a constructor

在webpack.config.js中const CleanWebpackPlugin = require(‘clean-webpack-plugin’)改成以下代码const {CleanWebpackPlugin} = require('clean-webpack-plugin')

2022-02-22 17:11:10 405

原创 简单使用webpack打包ts代码

简单使用webpack打包ts代码

2022-02-22 16:28:26 936

原创 TypeScript学习

一、类型字符串型、数字类型、布尔值、数组、元组、枚举、任意类、null 和 undefined、never类型、函数1、字符串型 只能赋值字符串let str:string = "nihao ts"let str1:string = "nihao ts"2、数字类型,所有数字都是浮点数,支持十进制、十六进制、二进制和八进制字面量let aa:number = 111let hexLiteral: number = 0xf00d;let binaryLiteral: number = 0b1

2022-02-21 17:39:20 419

原创 vue3封装图片上传组件的两种方式

1、使用element plus中的 el-upload实现图片上传template<div class="front upload-item"> <el-upload :limit="1" action="#" list-type="picture" :auto-upload="false" accept="image/png,image/gif,image/jpg,image/jpeg" :on-success="handleSuccess" :on-change=

2022-02-18 10:25:22 3314

原创 element plus表单自定义校验规则不起作用

element plus表单自定义校验规则不起作用1.今天遇到使用element plus表单自定义校验规则一直不起作用,借鉴了网上很多解决方法都不行,后面发现原来是书写的先后顺序,导致不起作用2.解决方法:...

2022-02-15 15:34:40 2764 6

原创 使用element ui 中的el-cascade有时候默认的value和label不是我们自己数据结构的键值

使用element ui 中的el-cascade有时候默认的value和label不是我们自己数据结构的键值,通过props自定义来解决后端拿到的数据结构如下<el-cascader :options="lecturerOptions" :props="optionProps" // 自定义 v-model="teachSubject" clearable /><script setup>import { reactive,ref,onMounted }

2022-02-10 11:24:39 1278 1

原创 vue: Invalid prop: type check failed for prop “action“. Expected String with valu

出现 Invalid prop: type check failed for prop “action”. Expected String with value错误原因:使用el-upload 上传组件没写 action,写上就不会报错了 <el-upload action="#"> <img class="icon-img" src="@/assets/37.png"/> </el-upload>

2022-02-10 09:59:53 4802

原创 vue 前端使用 js-md5加密

1、介绍: 一种单向加密,避免明文传输,例如前端登录密码登录时,密码可使用此加密,防止明文泄露。2、安装npm install js-md53、使用import md5 from 'js-md5'md5("你要加密的内容")

2022-01-26 10:43:24 2358

原创 vue项目引用QRCode生成二维码扫码实现app登录

vue项目引用QRCode生成二维码扫码实现app登录

2022-01-25 16:27:45 3149

原创 vue DES 加密 crypto-js

vue DES 加密 crypto-js1、安装 crypto-jsnpm install crypto-js --save2、封装des.js文件// DES 加密 crypto-jsimport cryptoJs from 'crypto-js'// 加密所需的key,个人设置,不能泄密const KEY = '' // DES加密export const encryptDes = (message) => { var keyHex = cryptoJs.enc.Utf

2022-01-25 11:08:29 954

原创 使用element-plus中的ElMessage样式出错

使用element-plus中的ElMessage样式出错,样式并没有生效原因: 没有在全局中引入ElMessage的样式解决方法 在main.js文件中全局引入import 'element-plus/theme-chalk/src/message.scss'

2022-01-21 15:38:37 9963 2

原创 vue3 登录记住密码 存到cookie里设置过期时间,同时账号密码通过des加密

vue3 登录记住密码 存到cookie里设置过期时间const userForm = reactive({ phone: "", // 手机号码 username: "", // 账号 password: "", // 密码 authCode: "", // 验证码 checked: false, // 记住密码 })// 记住密码function set

2022-01-11 12:30:33 1303

原创 前端图片在线压缩的网站

今天需要对项目的图片进行压缩,发现了一个很好的在线网站,批量处理,免费下载,返回的图片名字和上传地址一样真赞!!!Ioveimg的网址

2022-01-08 10:06:50 287 1

原创 使用 Element Plus出现This dependency was not found: * element-plus/lib/theme-chalk/index.css in ‘

解决方法原来官方的第二行代码改成下面,让其能找到依赖的正确位置import ElementPlus from 'element-plus'// import element-plus/lib/theme-chalk/index.css'import 'element-plus/dist/index.css'

2022-01-04 15:47:56 870

原创 js 设置视频的音量大小

js 设置视频的音量大小 setVolume(v) { // 自定义控制音量 if (document.querySelector(`video`)) { try { const volumeAdio = document.querySelector(`video`) volumeAdio.volume = v/100 } catch (error) { } } }...

2022-01-03 12:01:55 4163

原创 在vue中使用scrollTo没有效果的解决方法

首先需求: 在播放列表中,章节目录列表自动定位到该小节,每次页面点击后重新进去要把当前的播放记录定位到当前位置中方法:使用scrollTo:当前网页滚动到指定位置具体的操作步骤页面css的结构如下course-list 为可滚动的元素,滚动的位置为当前选中元素的offsetTopthis.$nextTick(() => { let activeCard = document.querySelector(".liveChapter-card-small.active") ..

2022-01-03 11:36:21 13202

2021下半年前端面试总结.doc

总结2021下半年前端面试

2021-12-23

前端面试题总结.docx

前端面试笔记总结,html ,css ,html5 ,css3 ,js,vue基础的面试题,HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。

2020-05-31

空空如也

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

TA关注的人

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