- 博客(83)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 TS中的type和interface一些用法
同名接口会自动合并，而同名类型别名会冲突，优先推荐interface。来进行复用，而interface定义的类型则可以通过继承。3、组件属性定义：使用type还是interface。type定义的类型可以通过交叉类型。2、复用时只会新增属性。
2024-08-14 17:31:13
206
原创 开发过程中遇到奇奇怪怪的东西之二：路由嵌套层级太深导致页面刷选不成功
这意味着一旦组件被加载过，再次访问相同的路由时，组件不会重新加载，而是直接使用缓存的组件实例。当从Monthly页面跳转到MonthlyDetail页面时，由于MonthlyDetail组件已经被加载过并缓存了，因此不会触发重新加载，导致没有看到页面刷新或反应。首先 路由的配置是这样的，从路由Monthly页面跳转到MonthlyDetail页面，进入MonthlyDetail 页面并没有刷新，没有反应，找了好久的问题所在，监听路由变化，onMounted生命周期中触发初始化，但是就是一直没有变动。
2024-06-21 16:02:51
252
原创 cesium实现绘制图标，并实现图标的聚合功能
在Cesium中，点聚合功能是指将大量的点数据聚合成一个更大的点或者其他形状，以减少在地图上显示大量点数据时的视觉混乱和性能问题。点聚合功能通常用于在地图上显示大量的点标记，例如地图上的POI（兴趣点）、传感器数据等。点聚合功能在Cesium中是一种处理大量点数据的有效方式，可以提高地图的可读性和性能。这样可以在保持地图清晰的同时，有效地展示大量的点数据，提高用户体验。
2024-05-11 15:37:57
1309
1
原创 开发过程中遇到奇奇怪怪的问题（一）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
193
1
原创 vite和webpacke的常规配置
vite官网vite是一个由Vue.js开发的构建工具，它利用了ES Module Imports，在开发环境下可以实现按需编译，加快了开发速度。而在生产环境下，它使用Rollup进行打包，提供更好的tree-shaking、代码压缩和性能优化。vite主要解决了现有工具（如webpack、rollup）在大型项目开发过程中存在的启动慢、热更新慢等问题。vite致力于为现代前端工作流提供一个更快、更轻的解决方案。快速的启动时间。通过区分依赖和源码两类模块，改进了开发服务器启动时间。
2024-04-23 14:15:18
1088
原创 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
534
原创 cesium用法
4、创建项目 vue3+vite+TypeSript。1.下载或者安装cesium的插件。2、点击登录，注册或者登录已有账号。下载cesium依赖。
2024-03-11 14:17:45
420
原创 [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
9170
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
5431
1
原创 实现瀑布流布局的四种方法
一、 什么是瀑布流布局1、是什么页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面2、特点固定宽度，高度不一 岑参不齐的布局以图片为主二、有什么优缺点1、优点 节省空间：降低页面的复杂对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
2022-05-13 10:57:45
28895
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
2856
原创 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
1029
原创 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
2328
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
876
原创 设置display的影响
父元素设置display:flex后，子元素设置的宽度无效解决方法：在子元素中写flex-shrink:0; 后在写宽度.fartherCss{ display: flex;}.sonCss{ flex-shrink:0; width: 30px;}
2022-04-20 14:50:26
749
原创 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
1543
原创 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
68581
原创 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
6752
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
2133
原创 @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
718
原创 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
440
原创 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
429
原创 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
3405
原创 element plus表单自定义校验规则不起作用
element plus表单自定义校验规则不起作用1.今天遇到使用element plus表单自定义校验规则一直不起作用，借鉴了网上很多解决方法都不行，后面发现原来是书写的先后顺序，导致不起作用2.解决方法：...
2022-02-15 15:34:40
2940
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
1321
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
4913
原创 vue 前端使用 js-md5加密
1、介绍： 一种单向加密，避免明文传输，例如前端登录密码登录时，密码可使用此加密，防止明文泄露。2、安装npm install js-md53、使用import md5 from 'js-md5'md5("你要加密的内容")
2022-01-26 10:43:24
2377
原创 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
992
原创 使用element-plus中的ElMessage样式出错
使用element-plus中的ElMessage样式出错，样式并没有生效原因： 没有在全局中引入ElMessage的样式解决方法 在main.js文件中全局引入import 'element-plus/theme-chalk/src/message.scss'
2022-01-21 15:38:37
10159
2
原创 vue3 登录记住密码 存到cookie里设置过期时间，同时账号密码通过des加密
vue3 登录记住密码 存到cookie里设置过期时间const userForm = reactive({ phone: "", // 手机号码 username: "", // 账号 password: "", // 密码 authCode: "", // 验证码 checked: false, // 记住密码 })// 记住密码function set
2022-01-11 12:30:33
1369
原创 前端图片在线压缩的网站
今天需要对项目的图片进行压缩，发现了一个很好的在线网站，批量处理，免费下载，返回的图片名字和上传地址一样真赞！！！Ioveimg的网址
2022-01-08 10:06:50
321
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
896
原创 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
4278
前端面试题总结.docx
2020-05-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人