- 博客(75)
- 收藏
- 关注
原创 Tincymce
2. 分别建立index.vue,plugins.js,toolbar.js,dynamicLoadScript.js文件。1. 新建一个Tinymce文件夹。3. 在需要的位置使用。
2025-01-03 11:28:11
227
原创 vue3中实现腾讯地图和高德地图
注意:在使用的时候报错跨域问题的话, 可以在vite.config.ts文件加入这段代码。1. 新建一个地图组件,TMap.vue。2. 新建一个地图组件,GMap.vue。2. 在需要的地方使用TMap组件。2. 在需要的地方使用GMap组件。
2025-01-03 10:44:22
253
原创 用000000代表周一至周日,1代表开启,0代表关闭,得到形如000000格式的日期数据
也就是,假设选择了周一,那么应该得到1000000,假如选择了周二和周五,那么应该得到0100100。
2024-11-27 16:20:50
218
原创 Ant Design Vue中使用change方法时如何传递自定义参数
一开始我是这样做的,但是这样打印的结果是value是undefined,index是正常的。正确的做法是利用回调函数来传递。
2024-11-25 15:50:35
559
原创 在vue3中使用ElementPlus的colorPicker组件
原本我还自己import { ElColorPicker } from 'element-plus'了,结果就是:会出问题,页面上根本就看不到组件,我找了很久的原因,发现就是这个显示引入的问题,不要自己import就可以了。一开始我没有注意区分我是vue3的项目,我一直在尝试使用element-ui的colorpicker框架,但是一直都有问题。会根据使用的组件自动引入相应的 Element Plus 组件,因此我们无需手动导入。进行使用,两个分别对应vue2和3两个版本,各自独立,无法跨级兼容。
2024-11-20 11:19:18
419
原创 vue3在使用antd的tabs组件时,如何根据不同的type值去显示不同长度的modal的标题样式
这样就有一个问题,标题的样式都是.ant-modal-header,它的下划线的长度的样式都是background-size: 75px 4px;比如点击tab1的子组件下的编辑按钮,它的弹窗的标题是“我是5个字”,而tab2的子组件下的编辑按钮,它的弹窗的标题是“我是8个字的字的”。这样就解决了上面的“不同标题长度不一样,需要不同的样式”的问题。解决办法就是:根据父组件传递过来的不同的type值,动态的改变background-size的值。我想要子组件根据不同的type值,去显示其弹窗的不同标题样式。
2024-11-19 10:33:37
290
原创 使用TinyMCE富文本编辑器
2. 在public下面新建tinymce文件夹,将node_modules中的tinymce中的skins复制到里面。3. 在public下面的tinymce文件夹下,新建一个langs文件夹,将下载的汉化包放里面。4.1 在utils文件夹下新建两个文件,isNumber.ts,uuid.ts。4.2 在components文件夹下,新建tinyMceVue组件。5. 在需要的位置使用TinymceVue组件。4. 在vue里面创建tinymce组件。1. 使用yarn安装Tinymce。
2024-11-18 14:06:02
730
原创 在vue中,在使用antdesign的table组件时,实现可以直接编辑修改某个单元格的值
例如,在一个表格中,有一列叫做“权重”,想要实现单独编辑某个权重。
2024-11-15 15:48:45
538
原创 在vue中,在使用antdesign的table组件时,实现特定column列的显示与隐藏
type的具体值是父组件传过来的,所以它会变化。具体可以利用columns的title属性来做。不同的type值,展示不同的columns列。我有一个变量type,默认值为1,也就是。我有这样一个columns列。所以我想要实现的是,
2024-11-15 14:16:48
568
原创 后台管理项目中“新增”和“编辑“回显弹窗的问题
这就意味着,我去回显第二条数据的时候,其中的roleIds的值是第一条数据的,那这样肯定是不对的。(比如第一条数据的sex值是男,第二条数据的sex值原本反的是空,回显的时候第二条数据显示sex值显示的是第一条数据的值——男)那当我点击第二行数据,我去调用详情接口,拿到了数据,但是其中的a是空的,那么此时的 Object.assign(formState, res.data);比如说我点击第一行数据,我去调用详情接口,拿到了数据,并且其中的a是有值的,注意,在调用获取详情的接口前,要先清空表单的值。
2024-10-10 11:50:41
422
原创 Antd的table如何实现“可选择”
注意:rowKey的取值是该行的key值,官方默认是"key"是改行的key值(不写就算默认),而我的每行的key值是id,所以我需要写rowKey="id"。(要注意自己的数据的key值是什么)
2024-09-27 16:43:36
152
原创 a-table如何自定义图标并在指定位置控制展开缩进
1. 首先我从接口拿到的数据是用id来作为唯一标识的,而a-table是用key来作为唯一标识的,所以需要用到row-key这个属性来进行修改。3. 用expandedRowKeys(v-model)控制展开的行。4. 把原本默认的图标隐藏。2. 在指定位置使用。
2024-09-05 10:49:31
477
原创 首屏优化如何做
因为在SSR中,服务器返回的是已经渲染好的HTML页面,而不是由JavaScript生成的动态内容。app.js中的页面拆分成单独的js文件,按需加载,加速app.js文件的下载速度从而减少首页加载时间。4. 更好的用户体验:由于SSR能够更快地呈现出首屏内容,用户可以更快地看到页面的基本结构和内容,减少了等待时间,提升了用户体验。文件中,我们引入压缩和合并后的静态资源文件,可以减少网络请求次数和文件大小,提高页面加载速度。同时,可以使用懒加载技术,延迟加载非首屏可见区域的图片,减少首屏的加载时间。
2024-07-02 17:39:11
686
原创 vue性能优化方案
3. 优化资源利用: 路由懒加载可以将应用划分为多个独立的模块,每个模块可以按需加载,提高代码的复用性和可维护性。同时,由于只加载当前需要的模块,可以更好地控制资源的使用,避免一次性加载过多的资源。2. 提升页面加载速度: 当用户访问某个具体的页面时,只需要加载该页面所需的代码,而不是一次性加载所有页面的代码。这样可以减少初始加载的代码量,提升网页的加载速度,特别是在应用有很多页面的情况下效果更为明显。组件缓存是指将组件的状态缓存起来,当组件再次被渲染时,可以直接使用缓存的状态,而不需要重新渲染组件。
2024-07-02 16:28:30
514
原创 大文件上传是怎么做的
这种方法可以减少单个请求的数据量,提高上传效率,并且可以在上传失败后只重新上传失败的部分,而不需要重新上传整个文件。断点续传:当文件上传过程中出现网络断开或其他异常情况时,可以通过记录已上传的部分,下次从上次上传的位置继续上传。1. 切割文件,将要上传的文件切割成多个小文件片段。3. 后端接收并保存文件片段,后端接收到每个文件片段后,将其保存在临时位置,并记录文件片段的序号和文件ID等信息。4. 续传处理,如果上传过程中断,下次继续上传时,通过查询后端已保存的文件片段信息,得知已经成功上传的文件片段,
2024-07-01 23:05:42
392
原创 前端无感登录(无感刷新token)
1. 登录成功后保存两个token(登录成功的token)和refresh_token(重新调用新token的接口的token)2. 后端返回过期时间,前端判断token的过期时间,去调用刷新token的接口。6. 如果refresh_token也过期了,就要清除所有token重新登录。1. 在响应器中拦截(判断token返回过期后,调用刷新token的接口)2. 在响应拦截器中对401状态码引入刷新token的api方法调用。4. 把错误对象里的token替换。3. 替换保存本地新的token。
2024-07-01 21:35:20
429
原创 浏览器的缓存策略
使用Service Worker可以实现更灵活的缓存控制,可以离线运行和更细粒度地控制缓存策略。通过在Service Worker中定义缓存策略,可以实现自定义的缓存行为。通过设置`Cache-Control`和`Expires`响应头来控制资源缓存的有效期。如果资源未过期,浏览器直接从缓存中加载资源,不会向服务器发送请求。浏览器在发起请求时,通过`If-Modified-Since`和`If-None-Match`使用CDN(内容分发网络)可以将静态资源缓存在离用户较近的服务器节点上,加快资源加载速度。
2024-07-01 20:19:02
318
原创 精灵图和base64的区别
精灵图:把多张小图整合到一张大图上,利用定位的一些属性把小图显示在页面上,这样访问页面的时候,可以减少请求次数,提高加载速度。base64:这是一种传输8bit字节代码的编码方式,是一种用64个字符来表示二进制数据的方法,最后组成字符串。1. Base64会和html,css一起下载到浏览器中,减少请求;一些低版本不支持,若base64体积比原图片大,不利于css的加载。2. 减少跨域问题;
2024-07-01 20:06:44
169
转载 get请求和post请求的区别
GET:由于数据包含在URL中,大多数浏览器和服务器对URL的长度有限制,这间接限制了GET请求所能携带的数据量,一般不超过2KB-4KB。POST:请求参数放在请求体(Request Body)中,不会在URL中显示,因此参数不会被浏览器记录在历史记录中,也不在地址栏展示。POST:相对安全,因为数据不在URL中显示,但需要注意,HTTPS协议应该被用于任何敏感数据的传输,无论使用GET还是POST。GET:幂等的,意味着对同一URL的多次请求应该产生相同的结果,不会改变服务器上的资源。
2024-07-01 17:40:44
78
原创 ES6的新特性有哪些
9. 新增了模块化(import,export)1. 新增了块级作用域(let,const)3. 新增了一种基本数据类型(symbol)2. 新增了定义类的语法糖(class)10. 新增了set和map数据结构。7. 对象和数组新增了扩展运算符。11. 新增了generator。5. 新增了函数参数的默认值。6. 给数组新增了API。12. 新增了箭头函数。4. 新增了解构赋值。
2024-07-01 16:50:57
440
原创 理解前端内存泄露
在处理DOM元素时,如果不当使用或引用DOM元素,可能会导致内存泄漏。例如,在处理DOM元素的引用时,如果没有正确解除这些引用,即使元素不再需要,它们仍然会保留在内存中。例如,在异步操作中使用闭包时,如果没有正确管理闭包内部的引用,可能会导致内存泄漏。JS里已经分配内存地址的对象,但是由于长时间没有释放或者没办法清除,造成长期占用内存的现象,会让内存资源大幅度浪费,最终导致运行速度慢,甚至崩溃的情况。)上添加事件监听器时,如果没有正确移除这些监听器,即使组件或页面不再需要它们,它们仍然会保留在内存中。
2024-07-01 14:41:12
356
原创 JS对数据类型的检测方式
3. constructor几乎可以判断基本数据类型和引用数据类型(如果声明了一个构造函数,并把它的原型指向了Array,这个时候constructor就判断不出来了)2. instanceof()只能判断引用数据类型,不能判断基本数据类型。1. typeof()对于基本数据类型没问题,遇到引用数据类型就不管用。
2024-07-01 01:12:15
310
原创 ::before和:after中双冒号和单冒号有什么区别
:before和::after也常常会用来进行样式布局。::before和::after一般用于清除浮动。
2024-06-29 18:40:04
120
原创 H5/C3面试题——语义化标签
3. IE8是不兼容H5标签的(需要通过html5shiv.js去处理)2. seo成分会更好,蜘蛛抓取会更好。1. 易读性和维护性更好。
2024-06-29 18:19:07
122
原创 工作记录2
首先通过调用接口获取机构在机构端对客服的一些配置,可以选择配置客服的方式(有h5和js客服),选择配置h5客服的话,就必须得填写客服链接,选择配置js客服的话,就必须得填写JS客服代码,如果获取到接口返回的信息表示机构配置的是h5客服,那就直接用window.opend打开当时填的客服链接即可,但如果是js客服的话,就可以调用螳螂客服的一些api来实现了。本来是可以前端自己去生成schemaUrl的,但是生成的链接有时效性,然后最新的那种明文码它好多设备不支持,所以最后决定让后端生成。
2024-06-20 11:25:53
547
原创 工作记录1
如果不是,就校验名字是否重复,名字校验没问题的话,就开始校验手机号,手机号没问题的话,就开始校验图片验证码,图片验证码也没问题的话,就会开始倒计时,此时按钮变成“重新发送 (${timer}s)”。首先校验输入的验证码是否为空,如果为空就给setCodeStatus赋值为1,不为空后,再校验输入的验证码是否为6位数,不为6位数字的话,就给setCodeStatus赋值为2,剩下的就给setCodeStatus赋值为3,并在页面中做判断以展示不同状态对应的不同页面。并做判断不同的名称状态给出不同的提示。
2024-06-16 20:37:28
759
原创 上班必备——项目部署环境
ui,产品和测试的同事在前端开发的过程中,都会时刻关注着进度,是要看页面效果的,这个时候怎么看呢?部署到公司私有的服务器或者局域网服务器上,主要用于测试是否存在bug,一般不会让用户和其他人看到,并且测试环境会尽量与生产环境相似。开发环境:开发环境时,程序员们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告和测试工具。生产环境:是指正式提供对外服务的,一般会关掉错误报告,打开错误日志,是最重要的环境。大家都知道,互联网行业有很多的岗位,前端,后端,产品,测试,ui等。
2023-12-10 22:37:04
279
3
原创 上班必备代码托管工具git
将本地仓库的代码推送到远程仓库(github,gitee,gitlab等之一),然后你的同事就可以通过一个git命令拉下你推送到远程仓库的代码了。1 // 在拉取远程代码的时候,必须执行上面两步,将你刚写的代码存放到本地仓库,如果你不执行上面两步,那你刚写的代码就会被拉下来的代码覆盖。同样,只有你的同事将他写的代码推送到远程仓库后,你执行git命令才能把他写的代码拉下来,合并到你的代码里。使用分支,可以更加有条理的进行代码管理。拉取远程的代码到master分支(将同事的代码和你之前提交到远程的代码拉回来)
2023-12-10 21:48:40
137
原创 实现单行/多行文本溢出
在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号。-webkit-box-orient: vertical // 和1结合使用,设置或检索伸缩盒对象的子元素的排列方式。text-overflow: ellipsis // 多行文本的情况下,用省略号"..."隐藏溢出范围的文本。-webkit-line-clamp: 2 // 用来限制一个块元素显示的文本行数。
2023-10-01 20:02:56
373
原创 响应式设计的实现方式
页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺寸,屏幕定向等)进行相应的响应和调整。比如当浏览器的宽度或者高度发送变化时,通过百分比单位,可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。CSS3中增加了更多的媒体查询,就像if条件表达式一样,我们可以设置不同类型的媒体查询,并根据对应的条件,height,width属性的百分比依托于父标签的宽高,但是其他盒子属性则不完全依赖父元素。任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一。
2023-10-01 15:23:14
456
原创 常见的BOM对象
这个方法会根据最有效的方式刷新页面,如果页面自上一次请求以来没有改变过,页面就会从浏览器缓存中重新加载,如果要强制从服务器中重新加载,传递一个参数true即可。history对象用来操作浏览器URL的历史记录,可以通过参数向前,向后或者向指定URL跳转。window.open(),既可以导航到一个特定的url,也可以打开一个新的浏览器窗口。window.close(),仅用于通过window.open()打开的窗口。比如,如何进行页面的后退,前进,刷新,滚动条的滚动等等。五. history。
2023-09-27 16:17:37
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人