- 博客(61)
- 收藏
- 关注
RSS订阅原创 【CI/CD】docker + Nginx自动化构建部署
我们可以通过我们的git版本控制平台如GitLab CI/CD、GitHub Actions、Gitea Actions等自动化执行某些操作（打包测试、部署、数据库版本控制的验证等），设置触发时机，每次PR时都会触发，便于提前暴露问题，提高效率等
2024-07-25 13:51:53
1210
3
原创 【解决】请求静态资源文件总是得到默认index.html
当使用别名时，请求地址中@别名未被解析，所以服务器找不到@目录下的文件，返回默认的index.html。
2024-04-18 18:09:40
472
原创 【js】事件循环之promise的async/await与setTimeout
事件循环又叫消息循环，是浏览器渲染主线程的工作方式。浏览器开启一个永不停止的for循环，每次循环都会从消息队列中取任务，其他线程只需要在合适的时候将任务加入到消息队列的末尾。过去分为宏任务和微任务，现在由于浏览器环境越来越复杂，宏任务的说法已经不合适，取而代之的是w3c官网新提出的，每个任务都会带有任务类型，同类型的任务放在同对列，不同的任务可以放在不同的对列，不同的对列有不同的优先级，（任务没有优先级）由浏览器自行决定优先执行哪一个，但是总会有一个微队列，优先级最高。
2024-03-04 11:02:09
1044
原创 【js】无限虚拟列表的原理及实现
虚拟列表是长列表按需显示思路的一种实现，即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。简而言之，虚拟列表指的就是「可视区域渲染」的列表。定义固定宽高的元素，该区域限制无限虚拟列表的可视区域大小宽高为父元素的100%，纵向超出可滚动宽度100%，高度auto，用于呈放渲染的部分列表项，撑开可滚动区域。
2024-02-22 17:11:57
2046
2
原创 【报错】npm ERR! ERESOLVE could not resolve、certificate has expired
安装依赖报错npm ERR! ERESOLVE could not resolve，根据提示增加--force or --legacy-peer-deps又报错certificate has expired，真相！npm淘宝镜像源过期，要更新
2024-02-21 12:03:09
749
原创 【Flutter】底部导航BottomNavigationBar的使用
底部导航栏三种效果：当选中时图标文字变色，未选中时不显示文字。显示图标和文字，选中变色。显示图标和文字，设置背景。配合使用，背景才生效。
2024-02-20 14:50:07
1684
原创 【Flutter】graphic图表实现tooltip一段时间后自动隐藏
graphic图表中提供了自定义tooltip的事件，可通过selections中on和clear配置手势选项和可识别设备，默认情况下tooltip需要双击隐藏，但这并不符合我们的需求。通过调研发现，若想实现tooltip隔几秒后隐藏，可通过向chart发送订阅流事件隐藏，这感觉更像是局部刷新。
2023-11-29 17:33:37
893
原创 【Flutter】graphic图表实现自定义tooltip
graphic中tooltip的TooltipGuide类提供了renderer方法，接收三个参数Size类型，Offset类型，Map类型。可查到的文档是真的少，所以只能在源码中扒拉例子，做符合需求的修改。这个例子感觉像是tooltip和提供的那些属性的源码实现，然后改变了背景颜色等，但如果实现想echarts那样对每条线的数据前增加颜色块区分，还是要自己摸索。先看一下这个例子都做了什么吧。
2023-11-24 16:44:50
1196
原创 【Flutter】graphic图表的快速上手
Graphic是一个数据可视化语法和Flutter图表库。官方github示例我的gitee示例网上可用资源很少，只有作者的几篇文章，并且没有特别详细的文档，使用的话还是需要一定的时间去调研，在此简单记录。
2023-11-24 14:31:10
1664
原创 【git】vscode项目推送到git及遇到的问题
打开文件后点击vs code左侧工具栏中第三个源代码管理图标，点击初始化仓库，此时会创建一个本地仓库。在编辑器顶部工具栏中，选择终端 -》新建终端（Terminal -》New Terminal ）点击克隆/下载，复制HTTPS地址。会检查该项目中的文件变更。3）查看项目远程地址。
2023-11-24 14:29:03
1371
原创 【vue3报错】解决vue3 ref 获取不到子组件
在父组件内调用子组件内的事件从而改变子组件的某些状态，父子组件使用``语法糖，父组件通过给子组件定义ref访问其内部事件。这看起来完全没毛病，理想很丰满，现实很骨感，写完就是访问不到，还报错，离离原上谱，这究竟是为啥
2023-09-13 15:32:50
4297
1
原创 【Vue】父子传参及props与emit区别
props方式：父组件为子组件绑定一个属性，将函数赋值给该属性，子组件通过props接收，调用此事件，传递消息。emit方式：父组件需要在子组件标签中注册一个事件，子组件通过emit调用此事件，传递消息。
2023-07-10 20:33:30
500
原创 【javascript】监听某标签元素进入视口/其他标签元素
监听元素之间的交叉重叠，（交叉观察器） 提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。可以在同一个观察者对象中配置监听多个目标元素。当然IntersectionObserver不可能完全替代监听滚动条，只是相比于监听滚动条，IntersectionObserver更加方便快捷，并且目前大多数主流浏览器已经兼容。
2023-05-16 16:39:08
1106
原创 【js】数组arr.splice的使用
众所周知，splice() 方法用于添加或删除数组中的元素。那替换的实现呢？删除+添加。这与遍历不同，遍历时不能同时进行添加与删除操作，但是splice完美的解决这一问题
2023-01-31 17:18:03
2814
原创 【vue3】获取[object object]的值
众所周知，当获取到的参数显示[objectobject]时，我们传参使用JSON.stringify（）转换为string类型，接收后使用JSON.parse（）转换回来。当然这在js中没有任何不妥，但使用过ts的朋友们都知道，这可能会提示类型不匹配，无法赋值。正常接收，定义一个新的数据，再用JSON.parse（）转换接收后赋值的数据。...
2022-08-02 11:09:12
2964
原创 Cannot access ‘state‘ before initialization
错误信息：在初始化之前无法访问state相信很多小伙伴在使用Vue2的时候习惯将新写的内容放在前面，这样避免了在方法很多的时候向下滑动但是在Vue3.0中新增了setup语法糖，所以在使用语法糖时，定义响应式数据state当我们使用state响应式数据时就需要注意了，将使用数据的语句要放在响应式数据定义之后，否则就会报此错误哦Vue3 新增语法糖——setupsetup函数是 Composition API（组合API）的入口在setup函数中定义的变量和方法最后都是需要 return .
2022-05-01 10:38:13
1809
原创 【Vue】3.0 项目创建 自定义配置
1、进入项目路径2、创建vue3项目vue create +项目名称注意：项目名称要避开特殊名字如echarts、vue等3、项目配置等待后弹出选项窗口，询问用户以什么模板方式进行安装Default ([Vue 3] babel, eslint)：默认预设配置，会快速创建一个Vue2.0项目，提供了babel和eslint支持Default ([Vue 2] babel, eslint)：默认预设配置，会快速创建一个Vue3.0项目，提供了babel和eslint支持Manu
2022-04-21 17:34:14
8285
6
原创 Vue实现数据筛选
map()方法map()方法用于遍历数组中的每个元素，让其作为参数执行一个指定的函数，然后将每个返回值形成一个新数组，map()方法不改变原数组的值。调用格式如下：let 新数组名 = 数组名.map((参数) =>{ //函数体 })示例：定义一个数组arr[ ]， 使用map（）方法遍历数组，通过三目运算作为条件，将返回值赋给新数组newArr let arr = [90,34,76] let newArr = arr.map(item => item>=60
2022-03-29 20:30:25
6845
原创 Vue Echarts报错Initialize failed: invalid dom.
报错原因dom还没挂载完成，echarts.init() 就已经开始执行解决方法1.不要用created（用mounted），created这时候还只是创建了实例，但模板还没挂载完成created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作也就是说created()方法是在页面加载前调用，此时dom还未加载。所以当 有改变dom的时候用mounted， 没.
2022-03-23 17:47:17
12751
9
原创 解决：字体样式font-family不起作用
问题：CSS样式设置字体font-family: 华文新魏，但是运行后浏览器的字体样式根本没有使用华文新魏解决首先你先看一下自己电脑上是否有这种字体，很大可能是没有这种字体的，所以才不会显示；如果有这种字体还是不显示的话，有没有可能是写错了查看字体方法：控制面板→外观和个性化→字体如果是第一种 电脑上没有这种字体的话，就找一个网站，下载好你需要的字体一般是.ttf文件下载好后，打开文件点击左上角的**“安装”**之后，在电脑上就可以看到刚才安装的字体了还有一个办法，就是在项目中引入字体
2022-02-19 15:53:45
17361
原创 Vue之点击收藏与取消收藏
思路通过条件运算符，给定图片一个属性，点击改变属性值未点击时，图标灰，默认值false点击时，图标亮，改变为true再次点击时，图标灰，改为false示例<div> <img :src="isActive===true?'static/image/c_icon1.png':'static/image/c_icon.png'" @click="gostore"></div>methods: { gostore(){ //收藏 c
2022-01-23 18:08:22
4727
原创 Vue之判断数组内是否存在某一项
两种方法：//方法一:通用xx(Arr,date){ // 返回值等于-1 说明数组Arr中不存在id为date的对象 if( Arr.findIndex(item => item.id=== date )!==-1){ ... } }//方法二：当数组里的对象为字符串时用这个方法更简单xx(Arr,date){ // 返回值等于-1 说明数组Arr中不存在id为date的对象 if( Arr.indexOf(date)!==-1 ){ ... } } 实例
2022-01-23 17:46:32
19790
原创 Vue之点击循环内某一项不影响其他项
遇到的问题：当我们使用循环时，循环内有需要点击的图片、图标等，经常会遇到一种情况就是点击其中一项，其他项也会随着点击而响应改变解决：使用循环索引号index，通过每项唯一索引号来进行控制实例<div v-for="(item,index) in cards" :key="item.Id"> <span>图谱名称：{{item.mindName}}</span> <img :src="isActive===true?'static/image/c_ico
2022-01-23 17:25:12
1597
原创 css实现自适应之单位vh
vh（Viewport Height）是前端开发中的一个动态单位，是一个相对于网页视口（Viewport）的单位。（与vh一起的还有vw（Viewport Width））在桌面端，视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。系统会将视口的高度分为100份，1vh就占用视口高度的百分之一（宽度同）1vh等于视口高度的1%（1vw等于视口宽度的1%）。vw和vh与百分比不同的是，百分比永远
2021-12-26 17:27:45
2315
原创 Vue之点击滑动到页面指定位置（点击下滑滚动）
三种方法<div @click="go">点击下滑</div><div id="show" ref="view">展示</div>1、利用scrollIntoView()方法，该方法将调用它的元素滚动到浏览器窗口的可见区域（根据其他元素的布局，元素可能无法完全滚动到顶部或底部）ps：页面可滚动时才有用！！！methods:{ go(){ document.getElementById("show").scrollIntoView
2021-11-13 17:35:57
15595
1
原创 vue之canvas转图片并下载
用到的方法利用html2canvas插件进截图下载图片网上看到好多方法，有些没有注册，所以下载不成功，一定要注意啊！1、下载html2canvasnpm install --save html2canvas2、在需要的页面引入并注册import html2canvas from 'html2canvas' components: { html2canvas },3、实例（方法一）<template><div id="aaa" style="width:
2021-11-10 21:45:14
2562
原创 解决Component template should contain exactly one root element...
vue终端报错Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead解决在组件内写代码时先包裹一层divCtrl+s
2021-11-10 19:52:16
1036
原创 前端改https
修改vue项目build目录下webpack.dev.conf.js文件在原30行的位置增加https:true语句修改87行语句，将http改为https运行
2021-11-09 17:08:06
495
转载 Vue 点击刷新
点击动态更新图形验证码1、在验证码的图片上，绑定点击事件 getCode()，同时使用 ref 指明图形验证码的引用对象，代码如下所示：<div class="box"> <el-input v-model="Code" placeholder="请输入验证码"></el-input> <img src=url @click="getCode" ref="code"></div>2、在 methods，定义 getCode 的方法，通
2021-11-06 15:15:59
749
原创 CSS 3 动画 实现图片动态切换
用到的方法：动画 Animation + @keyframes注意：animation属性要与keyframes规则进行绑定CSS3 创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。当用@keyframes 创建动画时，需要把它绑定到一个选择器（例如div），否则动画不会有任何效果。动画属性属性描述@keyframes规定动画animation所有动画的简写属性animation-name规定@keyframes 动
2021-11-06 08:28:52
5931
1
原创 以图片做背景报错
./static/image/img1.jpg in ./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/style-compiler?{“vue”:true,“id”:“data-v-10d9df09”,“scoped”:true,“hasInlineConfig”:false}!./node_modules/vue-loader/lib/selector.js?type=styles&index.
2021-11-04 17:12:44
147
原创 Vue v-for循环的使用方法
v-for循环的使用方法首先定义一个循环数组 “数组名” （我这里为layex1）其次在script标签里面添加数据方法data<template><div style="width: 45vh"v-for="item in latex1" > <div class="card-item"> <div class="item">{{ item.text1 }}</div> </div></div&
2021-11-03 19:32:02
233
原创 Vue 点击获取v-for循环内数据
实例<div class="card-item"> <div class="item" @click="beat(item.text2)"> {{ '$$' + item.text2 +'$$'}} </div></div><el-input class="input" type="textarea" :autosize="{ minRows: 12,}" placeholder="请输入latex公式"
2021-11-03 17:25:43
1689
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人