![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
修炼室
这个作者很懒,什么都没留下…
展开
-
关于boolean组合式函数封装【TS、Vue3】
在使用modal框和其他很多情况需要对boolean类型的值进行修改时,代码都比较简单,冗余,所以我希望能封装成一个hook函数。这样的代码就十分精简了,需要打开modal框时调用。原创 2023-05-23 10:58:03 · 245 阅读 · 0 评论 -
2022年第十三届蓝桥杯web开发—东奥大抽奖【题目、附官方解答】
蓝桥云课庆冬奥需要举行一次抽奖活动,我们一起做一个页面提供给云课冬奥抽奖活动使用。原创 2023-04-07 12:00:00 · 648 阅读 · 0 评论 -
前端下载文件【含content-disposition异常处理】
当然,如果你只需要一个简单的版本也可以直接用下面这个代码。当然,我们不单单只对文件进行处理,通常在这里还可以进行。通常,我们在下载文件时只需要告诉后端我需要文件即可。为方面后续所有文件的下载,所以采用了直接拦截。到后端则需要使用post版本的下载文件。若需要JS版本,只需要将对应的。若需要在下载文件时,原创 2023-03-22 11:52:12 · 1128 阅读 · 0 评论 -
实现网页内容复制功能【时间计算、Clipboard API】
如果需要通过v-model绑定,则需要设置对应的值。例如如果需要在input中显示的话,则需要设置对应的值。当前我有一个date-picker的组件,会自动计算相差时间后,显示对应的差值时间。通常情况下,我都需要手动去复制下面的差值,但是现在我希望能结合。已经实现时间差的自动计算,可以直接添加一个按钮。,因为这里我是直接通过。原创 2023-03-20 09:27:35 · 283 阅读 · 0 评论 -
Vue项目打包分析与优化
当前我需要针对项目的打包进行分析,删除一些无用的包,提高系统打包速度和相关资源加载速度。windows环境下,不支持NODE_EV = production。,我希望能知道打包过程中哪些文件占用较大。当前生成dist包大小为。原创 2022-11-11 11:59:27 · 706 阅读 · 0 评论 -
vue配置多环境请求路径【vue-cli】
当我们系统趋于完善时,任何修改都不能直接部署到线上,而是需要先部署在测试服务器后,测试完成后,部署至线上服务器,也就是说,当前项目涉及到三个环境。因为我们项目中已经对axios进行二次封装了,因此直接使用了。这里请求的接口名字可以自行定义,这里我直接使用了。在翻看官方文档时,我们发现了我们需要用到的命令。的文件形式对不同的mode进行区分。默认情况下,三个文件必须有以下内容。在项目的根目录处,创建三个文件。后续使用时,使用你定义的即可。以下方法基于vue-cli。原创 2022-10-18 16:30:13 · 1067 阅读 · 0 评论 -
TS遍历对象,对key进行判断
当前我需要对对象进行遍历,对象在定义时是定义了ts类型的。(因为返回的是string,而不是对象的key)现在我希望借用ts的类型检测,从而加快开发速度。当出现这样的想法后,就很自然的想到了。这样就实现了利用ts的类型的提示了~这里对应的keyof为需要。方法,但是发现却无法使用。原创 2022-10-17 17:18:42 · 3757 阅读 · 0 评论 -
删除node_modules慢【rimraf】
当项目越来越大,依赖的包越来越多,如果此时我们需要删除依赖后重新安装的话,会花费很多时间。现在就能实现秒删依赖的效果了。首先npm全局安装一个。原创 2022-08-15 15:24:36 · 1504 阅读 · 0 评论 -
vue3通过slot传值
当前我需要通过插槽插入组件,但是同时又需要通过插槽传值。去响应对应的插槽,并直接在内部元素中,直接使用即可。在这里,我设置了一个具名。在父组件中,导入后,通过。原创 2022-07-14 20:38:02 · 5403 阅读 · 0 评论 -
关于Modal的封装的记录【Vue3、computed、Naive UI】
现在我需要对modal模态框进行封装抽取,对于每一个模态框都当做一个组件需要时,调用即可。\父组件呈现结果通过interface和Emit限制对应父组件传值的类型与事件对应传参与返回值父组件中使用聚合数据和方法为避免多个modal框一致命名,可作为各自模块导入使用直接使用去访问对应的属性和方法即可...原创 2022-07-04 11:00:19 · 1621 阅读 · 2 评论 -
CSS小技巧
当前设计出来的页面为需要同时使用背景图片和颜色去混合解决方法通过伪类元素插入图片,颜色透明平移位置向x轴的负方向左移60px字体缩进两个字符通过vw控制字体个数,但是需要注意的是,放大之后字体个数就不再是两个了实现字体下划线效果——仿掘金添加下方border即可通过css画出菱形一行排列两个通过grid布局,设置grid为两列放大后,响应式放大放大到一定程度后,分为一列布局...原创 2022-06-04 13:52:49 · 143 阅读 · 0 评论 -
关于左右布局float的缺点【flow、flex】
现在我需要实现左右布局,于是很自然的直接使用float进行流动到左侧和右侧,但是却出现了下面的问题我在开始实现页面前,首先进行布局,本来团队理念和成员风采本来属于两个模块,但是现在出现成员风采下方的所有模块都上移了,占了位置其实我之前就是想通过float布局,但是出现了上述的问题,所以我现在切换解决左右布局的思路,通过布局最后呈现的效果原创 2022-06-01 20:44:35 · 348 阅读 · 0 评论 -
Vue导入下载的字体文件
问题描述现在我正在实现一个页面,字体是比较特殊的TecentSans W7.ttf,无法直接使用css样式中对应的font-family去使用解决方法1.下载字体文件首先需要下载你所需要的显示的特殊字体文件,注意后缀名为.ttf2将ttf文件放入项目中这里我是在assets文件夹下新建了一个font文件夹3.定义font-family再在font文件夹中新建index.css文件,定义font-family@font-face { font-family: 'TencentSa原创 2022-05-30 20:38:33 · 624 阅读 · 0 评论 -
关于全局布局未填充完问题【flex-grow】
问题描述当前项目中出现背景颜色出现没有补满整个页面的状况,仅仅只是由于页面去扩大范围解决方案:使用flex-grow进行自动分配剩余空间的相对比例flex-grow - CSS(层叠样式表) | MDN (mozilla.org)在全局对应的布局中,添加样式flex-grow:1最终呈现的效果...原创 2022-05-28 22:51:37 · 206 阅读 · 0 评论 -
vxe-table 表格可编辑(使用v-for)解决方案及思考
问题描述当前我们需要使用xe-table进行表格的编辑,但是官网的实例都是直接通过一个值一个值的渲染上去,代码不优雅,我想通过v-for实现表格的编辑vxe-table v4 编辑表格解决方法为方便使用,直接给出代码<vxe-table border show-overflow :column-config="{ resizable: true }" ref="xTable" :data="tableData2" :edit-config="{ trigger: 'dblclick',原创 2022-05-26 14:05:53 · 4274 阅读 · 3 评论 -
使用正侧表达式删除console
问题描述当前项目需要进行打包,但是由于eslint代码规范的影响,当我们打包的时候,会进行代码规范检测,不允许代码中出现console.log解决方法1.打开搜索点击VScode左侧的搜索2.开启正侧模式点击搜索框最右侧,打开正侧模式3.输入正侧表达式console\.log\(.*替换成空格点击替换所有确认替换...原创 2022-05-22 15:39:02 · 417 阅读 · 0 评论 -
eslint与map赋值冲突解决
问题描述当前我需要对一个Object数组进行批量处理日期,前人留下的解决方案是data.data.map((val) => { val.topicSetReleaseTime = moment( val.topicSetReleaseTime ).format('YYYY-MM-DD HH:mm:ss') })但是会出现与eslint中no-param-reassign冲突解决方法unitRequest.showUnitEmpowe原创 2022-05-19 12:14:59 · 231 阅读 · 0 评论 -
路由加载显示加载条【Vue3、Naive UI、Vue-router4】
问题描述当前项目(大致技术栈为Vue3、Naive UI、Vue-router4、ts)需要做到在路由变化时,出现加载条;路由加载完成后,关闭加载条解决方法0.导入常用Naive组件(必要)导入组件import type {App} from "vue"import{ NLoadingBarProvider } from "naive-ui"export default function setupNaiveUI(app:APP){ const common = create({NLoadi原创 2022-03-27 16:43:01 · 3058 阅读 · 2 评论 -
禁用Javascript不显示页面【防御浏览器关闭JS】
问题描述作为前端技术人员,通常情况,我们会通过禁用Javascript去复制文本,现在我们攻防互换一下,我们如果要预防这种情况呢?解决办法因为现在我们的项目是Vue框架,这里就用Vue直接做示例了我们可以...原创 2022-03-25 11:03:38 · 2823 阅读 · 0 评论 -
Vue常用按键别名【监听事件】
1.监听回车——enter监听enter键——回车<input @keyup.enter="enter">enter(){ console.log("按下Enter");}2.监听空格键——space<input @keyup.space="space">space(){ console.log("按下空格");}空格监听可监听打字的选择空格单独的空格3.监听delete或者Backspace——delete<input @keyu原创 2022-03-24 11:57:22 · 3413 阅读 · 0 评论 -
vue2使用provide和inject传递方法【provide、inject】
问题描述现在我存在两个父子组件,相互之间嵌套了很多层,想要父组件中的方法。之前是通过$parent去实现的,现在我准备使用provide和inject实现之前的代码如下:虽然对parent进行了处理,但是这样的代码终究是不好的解决方法如标题所示,现在我尝试使用proviede和inject解决子组件调用父组件的方法。在父组件中provide因为我是想要调用父组件中的showTopic方法,所以在provide中返回这个方法即可代码如下:provide() { return {原创 2022-03-11 19:36:02 · 4009 阅读 · 0 评论 -
input输入的执行顺序【document,onkeydown】
问题描述最近被问到一个问题,为什么输入框通过document获取不到值,明明我输入了值?大致情况就是他想通过onkeydown调用函数,函数内获取当前输入框的值,当输入的值等于回车时调用其他方法,但是他发现拿不到值,于是来问我一开始,我没有一下子想到结论,然后通过debug找到了问题,并且进行对原理的深挖大概还原一下问题的过程代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UT原创 2022-03-10 19:27:33 · 821 阅读 · 0 评论 -
函数获取接口值的时序问题【vue2、异步】
问题描述现在我在编写代码的过程中,发现我有两个地方都使用到了相同的业务逻辑,所以很自然的想到封装成一个函数但是出现问题的是,我在异步函数中调用函数进行判断时,出现了时序问题也就是,直接跳过我的那个判断函数,直接执行下面的方法解决方法期初我可能以为是判断的值出现了问题,于是进行了各种修改之后发现,原来是异步的问题async Submit() { if(this.canSubmitAnwser() == 0) { return } await t原创 2022-03-01 19:46:22 · 384 阅读 · 0 评论 -
table分页选中状态消失【多种方法】
## 问题描述现在我遇到一个问题,就是我们的页面需要实现一个表格数据可以跨页选中后,传值调用接口但是现在每次都会清空状态![请添加图片描述](https://img-blog.csdnimg.cn/8c6516fef9ea444aa1fd9df2654fb9f6.gif)## 解决过程期初想到很多`vuex`,`多选状态保存`,结果……仔细看了table的官方的文档一个属性直接解决问题### 方法一:官方文档![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传原创 2022-02-27 17:18:05 · 1249 阅读 · 0 评论 -
实现监听input访问接口【多种方法】
问题描述现在我需要实现监听用户在input上的输入,并实时的查询我尝试使用@change,但是发现element的input太慢了解决方法watch:{ queryTitle: { handler(val) { this.queryGroupName(val) } } },queryTitle:v-model绑定的属性名handler:不能修改!val:监听到修改的数据...原创 2022-02-26 19:29:51 · 401 阅读 · 0 评论 -
前端播放音频【vue,audio】
问题描述项目要求做到前端播放音频,后端现在将mp3文件转换成二进制,通过网络传过来是一大推乱码,我需要将其转换成mp3播放出来解决过程尝试打开看到这群乱码我陷入了沉思,尝试右键复制去搜索一番寻找答案。于是发现了……右键出现了在新标签页打开,尝试一下居然打开了,而且能播放……base64+blob开始不断的看相关的博客,但是网上关于播放音频的相关博客太少了……看了很多后,发现了两个总是出现的词blob和base64于是开始尝试将获取到的数据进行转换成blob相关blob的音频原创 2022-02-24 00:27:33 · 9201 阅读 · 1 评论 -
map 代替循环【算法,JS】
问题描述在我们开发的过程中通常遇到这种情况,从一个大的对象中抽取出两个或者多个小的属性进行融合以前我会直接使用循环去解决这个问题,直到今天我遇见了map解决方法使用map替代循环const filmItem = $('.box') filmItem.map( (item) => { const name: string = $(item).find('.hd').text() const comment =原创 2022-02-20 22:33:15 · 315 阅读 · 0 评论 -
JS实现本地文件存储【Node】
问题描述在通过superagent获取到html内容之后,我想当然的获取节点进行操作,结果报错了,于是我就想把获取到的html内容打印出来,太长了……superagent为获取Html源码的node库于是有了这篇文章解决方法总的来说,就是调用node内置依赖(fs和path)storeFile(data: string){ const filePath = path.resolve(__dirname , '../data/get.html') fs.writeFileSyn原创 2022-02-20 17:14:10 · 826 阅读 · 0 评论 -
Vue 项目运行完成后自动打开浏览器【多种方法】
1.打开package.json在文件中找到scripts–serve,在后面添加--open保存后,再次重新启动项目即可!原创 2022-02-20 10:46:37 · 5093 阅读 · 1 评论 -
查看当前电脑npm安装的包
1.进入路径随便打开一个文件目录,在此处输入路径C:\Users\Leo\AppData\Roaming\npm\node_modules2.查看所有当前电脑安装@vuecnpmnpmpnpm原创 2022-02-08 20:44:36 · 1047 阅读 · 0 评论 -
对象的多种遍历方法【ES6】
let obj = { name : "张三", age : 19, sex : "男"}1.for-infor(let key in obj){ console.log(key , obj[key]);}以下三种方法都是获取key数组,然后通过key去遍历2.Object.keysObject.keys(obj).forEach((key)=>{ console.log(key , obj[key])})3.Object.getOwnPropertyNam原创 2022-02-01 15:42:43 · 1248 阅读 · 0 评论 -
数组排序(数字)【JS】
对数字排序const arr = [3, 5, 4, 2, 1]arr.sort((a,b) => a-b)console.log(arr)执行结果程序原理首先定义一个常量的数字的数组调用数组中的原型方法Array.prototype.sort() - JavaScript | MDN (mozilla.org)也就是说如果a-b<0,a在前面,所以排序方式为升序若想更改为降序,可改为b-a执行箭头函数()为传入的参数,即function()原创 2022-01-28 14:22:54 · 947 阅读 · 0 评论 -
v-if和v-for联用【Vue】
## 问题描述`v-if`和`v-for`是互斥的,不能且不建议联用的,但是我又希望通过循环内部的元素,进行动态的渲染## 方法一:computed例如,现在我需要过滤一个列表中的项目,通过`isActive`进行渲染```vuev-for="user in users"v-if="user.isAcive"```这里就将users替换成一个计算属性比如(`activeUsers`)```jscomputed(){ activeUsers:function(){ ret原创 2022-01-23 12:46:03 · 591 阅读 · 0 评论 -
Vuex刷新状态失效【Vuex】
问题描述现在我是通过Vuex实现状态跳转的,但是现在就存在问题。如果我进行刷新,vuex也会重新加载。想了解如何使用vuex绑定导航栏状态可以看 我的这篇文章页面跳转,更改menu激活状态(vuex)解决方法因为每次vuex在刷新后都会丢失,所以想到存在sessionStorage中为什么要存sessionStorage?因为在关闭页面后sessionStorage会清空,用户需要再次进入就需要登录,这个时候vuex就起作用了,所以我们不需要存在localStorage具体代码原创 2022-01-06 10:36:41 · 479 阅读 · 0 评论 -
Object内容快速有效清空【js、Object、弹窗】
Object.keys(this.groupForm).forEach((key) => (this.groupForm[key] = ''))代码解释使用Object.keys获取当前所有的key【数组】参考地址:Object.keys() --MDN之后进行forEach循环,获取到每一个key后,置空即可使用实例现在我要对弹窗内容进行每次都进行置空操作,在关闭弹窗时调用即可closeDialog() { Object.keys(this.groupFor原创 2022-01-06 09:57:29 · 1453 阅读 · 0 评论 -
markdown编辑器创建内容带样式【Vue、mavon-editor】
问题描述因为我现在需要通过mavon-editor创建一个带有样式的题目,所以对这个编辑区进行了初始化但是有问题的是,左侧的html代码太长了……我想将左侧的源代码收缩,或者只显示需要填写内容的地方实现过程我开始的时候大致思路有两个所见即所得对于特定的样式进行隐藏因为这里的样式都是一致的,所以我想直接对用户隐藏,但是传给后端是有值的但是后面发现这两种实现方式都有些不好实现,于是采用了渲染markdown抽成组件单独创建组件渲染markdown因为所有的样式都是一致的,所原创 2022-01-05 20:32:17 · 1137 阅读 · 0 评论 -
分页刷新回到第一页【Vue、Element】
## 问题描述现在我需要刷新需要停留在本页,现在的情况就是我在刷新后,所有的设置全部刷新## 解决过程现在的情况是只要我刷新后,就会重新加载分页组件。刷新相当于重新加载了`DOM树`所以我想 **保存当前状态** + 在刷新后,**重新加载**### 保存当前状态原创 2022-01-03 20:22:49 · 2012 阅读 · 0 评论 -
将图层遮盖在另一个图层上【css、百度地图】
问题描述现在我想把这个红色背景的东西放在百度地图上解决方法1.在同一div中<div class="map"><el-container> <el-aside > 测试在图层上面 </el-aside></el-container> <baidu-map :center="location" :zoom="zoom" style="height: 800px原创 2021-12-16 21:09:37 · 493 阅读 · 0 评论 -
百度地图(BMap)设置标点,显示信息【vue】
1.创建标点(bm-marker)<template> <baidu-map :center="location" :zoom="zoom" style="height: 800px; width: 100%" :scroll-wheel-zoom="true" > <!-- bm-marker 就是标注点 定位在point的经纬度上 --> <bm-marker :position="markLocatio原创 2021-12-16 16:29:46 · 4021 阅读 · 1 评论 -
页面跳转,更改menu激活状态(vuex)
问题描述页面跳转后,变化menu的激活状态现在存在的问题效果我改变了对应的路径,但是menu的激活状态没有及时更新解决方法1.vuex中定义属性+同步方法+异步方法import Vue from 'vue'import Vuex from "vuex"Vue.use(Vuex);export default new Vuex.Store({ //定义全局使用的数据 接收数据: state: { activePath: '/index', },原创 2021-12-13 17:49:48 · 2416 阅读 · 4 评论