- 博客(56)
- 收藏
- 关注
RSS订阅
原创 uni-app 拍照上传
随手拍 <view class="cardContent"> <!-- 拍照功能 --> <view> <image :src="imageList.length==0 ? imgeUrl:imageList " @click="onGetImgClick()"> </view> </view>、 onGetImgClick: function
2022-04-12 16:42:58
3247
原创 Vue项目引入富文本编辑器：TinyMCE
一、 什么是TinyMCETinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。TinyMCE的优势：开源可商用，基于LGPL2.1插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）接口丰富，可扩展性强，有能力可以无限拓展功能界面好看，符合现代审美提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）对标准支持优秀
2022-03-21 10:30:53
3400
4
原创 前端分片上传大文件
当所有 blob 都处理完毕后，sparkMD5 实例的 end 方法被调用，并返回最终的哈希值，这个值随后通过Promise的 resolve 方法传递给调用者。这样的技术就叫做分片上传。分片上传就是将大文件分成一个个小文件（切片），将切片进行上传，等到后端接收到所有切片，再将切片合并成大文件。在分片上传过程中，每个文件块可以在单独的Worker中处理，从而实现并行处理，大大提高了上传速度。当你拥有可以在并行中运行的操作，但由于资源限制想要限制这些操作的数量时，这个工具就很有用，有助于控制并发性。
2024-04-28 00:28:54
473
原创 前端大屏适配几种方案
直接使用vw单位，屏幕宽度默认为100vw，那么100vw = 1920px；这个也是使用cssrem插件，直接将body的宽高（1920px * 1080px），将px转成vw单位。针对1920 * 1080,3840 * 2160(4k)是没有问题的，但是在超宽屏的情况下还是存在只显示一半的问题。打开js文件，将设计稿的宽度（1920px）平均分成24等份，每一份为80px。tips：rem是根据html字体大小来计算的，假如html字体为16px，则1rem就等于16px；
2024-04-14 20:36:38
370
原创 vue的一些个人理解
Vue 的数据双向绑定整合了 Observer，Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化->视图更新，视图交互变化（例如 input 操作）->数据 model 变更的双向绑定效果。在此时也可以对数据进行更改，不会触发 updated。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
2024-03-17 22:26:37
1047
原创 前端文件上传
fileReader用于把文件（file对象或者blob对象）读成某种形式，如base64，text文本。blob对象的第一个参数必须是一个数组，你可以把一个file对象放进去就可以给你转成blob对象。formData可以使一个files以一个二进制的形式传递给后端。前端文件上传有两种方式，第一种通过二进制blob传输（传输），第二种是通过base64传输。file对象其实是blob的子类。
2024-03-10 20:05:49
441
原创 vue api封装
由于一个项目里api是很多的，随处都在调，如果按照之前的写法，在每个组件中去调api，一旦api有改动，遍地都要去改，所以api应该也要封装一下，将api的调用封装在函数中，将函数集中在一起便于管理。
2024-03-03 22:19:40
335
原创 前端实现界面切换
title 属性要加就全加上或者全不加，因为 title 会导致系统直接识别成样式文件，意思就是如果两个样式文件，第一个没有加该属性，第二个加了该属性，系统会直接使用有该属性的样式进行载入。假如此时页面有三个样式文件，分别是：default.css、dark.css、light.css。常用的主题切换实现方式之一，就是通过 link 标签的 rel 属性来实现的。当 rel 标签的值是 alternate，就代表该样式是可以替换的。可以通过激活可替换样式即可实现主题的切换，适合确定的主题样式之间切换。
2024-01-29 09:19:35
251
原创 实现继承的几种方式
父类的实例作为子类的原型优点：简单易于实现，父类的新增的实例与属性子类都能访问缺点：可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面无法实现多继承创建子类实例时，不能向父类构造函数中传参数。
2024-01-21 22:06:32
418
原创 Promise和箭头函数和普通函数的区别
箭头函数与普通函数的区别在于： 1、箭头函数没有this，所以需要通过查找作用域链来确定this的值，这就意味着如果箭头函数被非箭头函数包含，this绑定的就是最近一层非箭头函数的this， 2、箭头函数没有自己的arguments对象，但是可以访问外围函数的arguments对象 3、不能通过new关键字调用，同样也没有new.target值和原型。6、箭头函数没有自己的arguments，可以在箭头函数中使用rest参数代替arguments对象，来访问箭头函数的参数列表。
2024-01-14 22:04:15
798
原创 echarts手动触发气泡的显示和隐藏
项目的问题，官方示例中，当鼠标移入后，气泡和阴影会同时显示，如下图。但是在demo中只有阴影显示了。就只会显示气泡而不会显示阴影。
2024-01-01 22:15:10
639
原创 echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
前言最近几天用echarts做，就把以前写的demo：在vue中实现中国地图 拿来用，结果到项目里直接报错了，后来发现是因为版本的问题，没办法只能从头进行踩坑了。以下内容基于vue3 和 echarts 5.32。
2023-12-17 22:30:19
906
2
原创 uni-app一些目录结构、方法、生命周期、打包、微信小程序登录与支付
跟普通差不多，多了几个核心文件，manifest.json是配置应用名称、appid、logo、版本等打包信息用的，pages.json的作用是配置页面路径、页面窗口样式、tabBar、navigationBar等页面类信息。
2023-12-03 19:30:27
455
原创 常见遍历方法 for循环、forEach、map、filter、find、findIndex、some、every
/ every(function(){})是对数组中每一项运行给定函数，如果该函数对每 一项返回true,则返回true,MDN上说：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。find()方法用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined。//中断循环中的迭代，然后继续循环中的下一个迭代。//跳出循环，执行循环后面的语句(整个循环便终止了)console.log("这是第"+i+"次"+"循环")
2023-11-26 20:20:44
1056
原创 vue统一登录
DNS解析域名，获取IP地址 --》 建立TCP连接（三次握手、四次挥手） --》 发送HTTP请求 --》 服务器处理请求并返回HTTP报文 --》 浏览器解析并渲染页面。统一登录其实就是前端去判断Url地址的token 之后如果有token未过期就直接跳转到首页。
2023-11-19 21:46:36
277
原创 Vue3生命周期
1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method。8、onActivated(): 被包含在 中的组件，会多出两个生命周期钩子函数，被激活时执行；9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；2、onBeforeMount() : 组件挂载到节点上之前执行的函数；4、onBeforeUpdate(): 组件更新之前执行的函数；
2023-11-12 22:47:19
347
原创 vue3的自定义指令
自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。在某个场景下，需要一进入页面或者打开某个弹窗就聚焦到指定的输入框。},},el.focus()},第四个参数 prevNode 只在beforeUpdate和updated才有！},// 当指令绑定的元素 的父组件销毁前调用。},
2023-11-05 23:12:44
421
原创 VUE的总结（5）
（1）去除空格type:1-所有空格 2-前后空格 3-前空格 4-后空格。（2）任意格式日期处理（3）字母大小写切换type:1:首字母大写 2：首页母小写 3：大小写转换 4：全部大写 5：全部小写（4）字符串循环复制,count->次数.（5）字符串替换（6）字符替换*，隐藏手机号或者身份证号等（7）格式化处理字符串（8）现金额大写转换函数（9）保留2位小数 0.3 + 0.9！= 1.2 （10）补零。
2023-10-22 20:02:48
46
原创 VUE的总结（4）
父组件也不要通过 this.$children 来引用子组件的示例，而是通过子组件的接口与之交互。单组件不异过重，组件在功能独立的前提下应该尽量简单，越简单的组件可复用性越强。当你实现组件的代码，不包括CSS，有好几百行了（这个大小视业务而定），那么就要考虑拆分成更小的组件。可复用组件只负责 UI 上的展示和一些交互以及动画，如何获取数据跟它无关，因此不要在组件内部去获取数据，以及任何与服务端打交道的操作。例如，模态框的显示和隐藏，父组件可以初始化模态框的显示，模态框组件内部的关闭按钮可以让其隐藏。
2023-10-15 22:38:32
38
原创 vue的总结（3）
场景：vue是异步渲染的框架，react也是，data改变之后，dom不会立刻渲染，$nextTick会在dom渲染之后被触发，以获取最新dom节点vuex 是一个专门为 vue 构建的状态管理工具，主要是为了解决 多组间之间状态共享问题。强调的是集中式管理，（组件与组件之间的关系变成了组件与仓库之间的关系）vuex 的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求，拿到数据）、getters（根据之前的状态派发新的状态）、modules（模块划分）
2023-09-19 09:24:05
32
原创 vue的总结（2）
1.合理使用v-if和v-show，2.合理使用computed，3.v-for加key，4.自定义事件，dom事件及时销毁，5.合理使用异步组件，6.合理使用keepalive，7.data层级不要太深，8.使用vue-loader在开发环境做模板编译，9.前端通用性能优化（如图片懒加载/减少 HTTP请求数/合理设置 HTTP缓存/资源合并与压缩/合并 CSS图片/将 CSS放在 head中/避免重复的资源请求/切分到多个域名），10.使用ssr。
2023-09-04 09:51:16
29
原创 vue的总结（1）
主要就是为了解耦，提高代码复用率。什么是组件？页面上可以复用的都称之为组件 它是 HTML、CSS、JS 的聚合体。组件就相当于库，把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。组件中的 data 为什么是一个函数？让每个返回的实例都可以维护一份被返回对象的独立的拷贝。
2023-08-21 09:43:15
39
原创 vue3组件的父子通信
父传子：在setup中使用props数据 setup(props){ props就是父组件数据 }子传父：触发自定义事件的时候emit来自 setup(props,{emit}){ emit 就是触发事件函数 }
2023-08-07 12:15:43
105
原创 Echarts中常用的参数总结
position：基线文字位置（start,middle,end）areaStyle：图标区域的样式（本文中的图标设置的为渐进色）lineStyle：基线线条设置，对象类型。type：line（图标类型为线性图标）smooth：true（设置折线为光滑）symbol：none（去掉基线的箭头）show：false （去除网格线）data：设置基线（Array类型）type：solid（基线线条类型）lineStyle：设置轴线的样式。show：true（设置显示）lable：基线的文字设置。
2023-07-03 10:33:38
172
原创 vue2和vue3的区别（由浅入深）
vue2和vu3之前的区别，一直以来是面试必考题目，如何回答，回答的层次决定了面试者的对于vue2，3的理解，以及对于vue3目前稳定版本发展的方向的了解，即考察使用程度，又考察了学习能力，可以说是回答即可以很简单，也可以很不简单，这里需要注意的是面试官的面试程度，需要我们层层递进，由浅入深来回答，这样可以体现出面试者的考虑全面，又能体现知识广度。简而言之，vue2升级vue3之后变得更快，更轻，协作更方便。无论对于我们开发者的体验或者用户使用方面都是升级优化，但是本质区别是什么，下面分为几个部分进行讲解。
2023-06-13 14:23:06
171
原创 【Vue】如何实现打印功能：Printjs插件
Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件，无需离开界面，也无需使用嵌入。对于用户无需打开或下载 PDF 文件而只需打印它们的特殊情况。
2023-06-01 14:48:53
1575
原创 常见遍历方法 for循环、forEach、map、filter、find、findIndex、some、every
上说：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。find()方法用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined。如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。every() 方法用于检测数组所有元素是否都符合指定条件（函数提供）。some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。中操作数组的一种方法，主要功能是遍历数组。
2023-05-04 14:23:27
170
原创 防抖和节流
函数防抖：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。函数防抖（debounce）与 函数节流（throttle）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。函数节流 ：保证如果电梯第一个人进来后，10秒后准时运送一次，这个时间从第一个人上电梯开始计时，不等待，如果没有人，则不运行。
2023-04-18 09:29:21
40
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人