- 博客(40)
- 收藏
- 关注
RSS订阅原创 纯css实现文字超出自动滚动
其实就是里外容器对向滚动，滚动的值为里外容器宽度的差值，如果里容器与外容器等宽，那么差值就为0，视觉上是没有滚动的，就像第一条数据；如果里容器宽度比外容器宽，里容器向左滚动的距离比外容器向右滚动的距离大，就会形成滚动效果，并在里容器translateX为-100%外容器translate为100%时停下，视觉效果就是滚动到文字的最右侧。PS：里容器的float: left;是为了形成块级格式化上下文，避免文字撑不开容器。
2024-10-15 15:31:47
1530
原创 前端通过ResizeObserver来监听dom大小动态渲染echarts
尽量使用width百分比来渲染 尽量不用flex-grow 缩放虽然没问题 但调整浏览器的大小就会有不触发的情况。有个小的地方需要注意 像这种布局。先去mainjs去注册。
2024-06-29 10:08:49
313
原创 Echarts圆环图偏移后 中心文字居中对齐实现
上面代码可以计算出文本的宽度 然后圆环图距离左边的位置一般是固定的 我这里得出圆环图中心点距离容器左边框是114px 如图所示。像上图中这样圆环图并不在div的中间时，中心的文本需要居中展示 一开始用left百分比但数据一旦变长或变短就会偏移 像这样。实在是太不美观了 所以我们这里使用动态的left通过文本的长度来计算。999就是你要渲染的值哈 这样就居中拉。所以最终我们可以通过计算得出。
2024-05-28 16:47:15
923
原创 前端对接fastGPT流式数据+打字机效果
不要用axios发请求 不然处理不了流式数据 我这里使用fetch。首先在对接api时 参数要设置stream: true,然后我们再加一个打字机的光标 用html+css实现。
2024-04-11 13:55:01
3243
2
原创 前端大屏16:9显示32:9技术方案
UI是按照3840*1080进行设计的 要全部正常显示在16:9的电脑上 就会这样。但是高德地图会因为scale还原会变大 目前没找到合适的解决方案 - -肯定是显示不完的 毕竟是按照3840设计的。所以我这边用动态的scale的方式进行处理。然后在data里面定义好数据以及计算属性。这样就可以正常适配屏幕拉。
2024-04-10 18:39:37
1134
原创 前端使用sse长连接单向通信
如果只需要服务端向客户端推送消息，推荐使用SSE。后端使用nodejs+express框架。SSE是基于http/https协议的。SSE比websocket更轻。SSE支持自定义发送的数据类型。前端随便一个HTML都行。IE及小程序不支持SSE。SSE默认支持断线重连。
2024-03-06 15:41:56
1004
原创 前端手写Promise并完美通过promises-aplus-tests 872 项测试
【代码】前端手写Promise并完美通过promises-aplus-tests 872 项测试。
2024-02-22 14:28:27
271
原创 vue2拖拽组件到容器需要预览效果
这个img的值用img: require("../img/sbhclfx.png"),即可。需求就是这样的哈 拖拽的时候需要有一个预览效果。拖拽的事件:拖拽时动态修改变量值。每个组件应该有自己的img像这样。我们这里使用css的变量来控制。
2024-01-09 11:19:54
529
原创 前端监控容器大小ResizeObserver方法的使用
观察者模式，可以监听多个对象，某些需要监听dom大小变化的场景下很便利，还可以配合throttle/debounce进行性能优化。监控页面大小改变通常使用window.resize方法来进行监控。但有时是需要监控一些容器。
2023-09-26 13:55:07
327
原创 el-table设置宽度100%超长拉伸问题解决
这时候我们给表格外面加个盒子 宽度设置100% 绝对定位 然后对最外层盒子设置相对定位就可以了。这里理想效果 用的grid布局(flex布局同样有效)结果宽度设置100%显示的这样。下面的表格拉的很长很长。
2023-09-26 11:02:05
1310
1
原创 element给tree添加表单验证
给tree组件添加ref然后通过this.$refs.tree.getCheckedKeys()拿到值进行判断。思路是使用自定义表单验证。
2023-07-31 10:28:57
317
原创 element select下拉框高亮显示输入文本
思路就是把请求到的数据分别存到两个变量 一个会根据高亮值改变 一个永不改变 然后替换要改变的数据的内容成标签形式 用v-html渲染出来。
2023-07-20 09:33:24
878
1
原创 vue中使用其他字体
然后在src->assets->css->新建一个css文件。首先把字体文件放入public static里面。内容就是导入上面的字体文件并命名。然后在main.js中引入。最后像这样使用就可以啦。
2023-07-05 16:21:11
331
1
原创 elementplus修改主题色
可以在assets的style里面新建一个scss文件。注意@forward一定要在最前面使用 不然会报错。然后在vite.config.ts里面配置。
2023-05-25 13:43:17
520
原创 vue3找不到模块“./App.vue”或其相应的类型声明。ts(2307)
在tsconfig.json里面配置。根目录新建env.d.ts。
2023-05-25 12:01:33
592
1
原创 Linux使用nginx部署前端项目且联调node后端
首先在当前目录（/usr/local/nginx-1.20.1）进行编译。这时候返回上一级目录，就会发现多了nginx目录，接下来，启动nginx。然后在底部增加/usr/local/nginx/sbin/nginx。设置nginx开机启动，只需在rc.local增加启动代码即可。进入/usr/local/nginx/sbin目录。再进入/usr/local/nginx/conf。进入/usr/local/nginx/conf。然后前端调接口就报405了hhhhha。输入./nginx即可启动nginx。
2023-04-21 17:36:08
451
原创 linux nodejs连接mongoDB数据库
第一步： 然后将mongod 命令路径添加到系统命令中，这样就可以在任何路径都可以执行 mongod 命令。下载后解压把bin里面的mongosh文件上传到mongoServer的bin里面。在 mongoDB 服务的 bin 文件夹下创建 mongod.conf 文件。db.shutdownServer() //这个命令是关闭MongoDB。上面 MONGODB_HOME 的路径就是我们之前解压安装包后保存服务的路径。按 esc 键退出编辑模式，输入 :wq 保存关闭文件。
2023-04-19 14:07:13
312
原创 linux部署前端项目
若打包文件夹 dist 不在项目根目录，就自行调整，如：app.use(express.static('/sty/dist'))。若打包文件夹 dist 在项目根目录，直接 app.use(express.static('dist')) 就行了；把这个dist文件和server.js通过xftp上传到linux。如果通过ip加端口无法访问需要放行端口号。最后使用node server.js。port 不要与已存在端口冲突。服务器的话需要去防火墙放行端口。再编写一个server.js。
2023-04-18 15:24:35
310
1
原创 ffmpegB站直播推流
ffmpeg -re -stream_loop -1 -i "test.mp4" -c copy -f flv "rtmp地址 + 串流密码"
2023-03-31 16:37:44
329
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人