- 博客(52)
- 收藏
- 关注
原创 前端之电力系统SVG图低代码
有了线,当然需要面,这时候一个polygon类就可以解决,唯一和polyline不同的是,path最后一个点需要Z闭合。两点一线,只要知道两个点的坐标就可以,但是基础图元可以旋转,也可以闪烁,所以这些属性都需要动态计算。其实所有的图形都是由点,线,面组成的。ployline也是用path就可以了,但是中间的点需要连起来,样式的计算需要循环拼接字符串。两点可以组成线,多点可以组成折线,这就需要一个polyline类去解析每个折线。svg里面的渲染最有难度的大圆弧和小圆弧,需要用到三角函数。
2024-05-14 10:42:26
477
原创 vue3 UI组件优化之element-plus按需导入
这个插件可以按需导入ElementPlus组件,并且是自动导入,不需要你再单个组件按需导入。如果不在意项目打包体积大小,正常来讲element-plus 是这样用的。但是呢要是项目就用了几个弹窗提示什么的,全局引入包体积很大。但是引入完之后默认是英文模式的,这个时候就需要使用中文包。所以使用了Vite插件。在App.vue里面。
2023-10-30 11:11:48
679
原创 element-plus 踩的坑
原来node版本是16.17.0,装element-plus死活装不上,结果要把node版本升级到18以上,真坑呀,也没人告诉我要这么干。
2023-09-07 15:30:28
387
原创 前端本地部署代码
记得映射到的是/etc/nginx/conf.d/default.conf -》这个配置是对于server的描述。2、在代码根目录新建一个start_nginx_server.sh。因为部署到的是二级目录/所以要用alias别名。dist 目录新建一个nginx文件夹。1、首先要装一个docker。
2023-06-26 15:31:16
221
原创 vue template模版引入scss变量报错
模版里面引入scss变量需要在vue.config.js 里面配置:module.exports = defineConfig({ css: { loaderOptions: { sass: { additionalData: ` @import "@/assets/style/variable.scss"; `, }, }, },});vari
2023-06-15 13:37:09
179
原创 rollup简单介绍
多入口会提取公共模块和代码拆分,输出格式为amd,不能是iife。rollup 只能处理es-module。rollup加载commonJS 模块。rollup和webpack的选用原则。插件是Rollup唯一拓展途径。默认tree-shaking。input 属性设置为数组。rollup多入口打包。
2023-06-12 10:44:21
64
原创 IndexedDB的使用
对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,(5)储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。
2023-03-30 09:23:29
257
原创 window.speechsynthesis 连续说一断话
需求就是接收到一段websocket之后连续说出一段话。接收到websocket推送之后。handleSpeak方法。
2023-03-29 16:03:26
413
原创 Vue3 按需加载element-plus
4)配置vite.config.js。1)安装Element Plus。2) 安装自动导入组件的插件。3)安装按需引入样式的插件。
2023-03-29 15:32:44
534
2
原创 vue3使用记录
2.vue3监听reactive定义的响应式数据没有办法获取到正确的oldVal,ref定义的可以。3.把一个reactive对象转成普通对象,或者把props转成普通对象,属性还具有响应式。这样被teleport 包裹的内容就会瞬移到app平级的modal下面。4.teleport 用法 把里面的内容瞬间移动。1.组件状态驱动css。
2023-03-29 10:46:18
39
原创 echarts 渲染注意点
echarts.clear()是清空当前实例,会移除实例中所有的组件和图表。1.画echart的时候一定要再mounted方法中初始化,不然没有容器时没法画图的。echarts.dispose()是销毁实例,销毁后实例无法再被使用。如果连图表容器都被销毁了,那就要调用echarts.dispose()销毁实例。4.clear 和dispose区别。3.折线图底下带阴影效果。
2023-03-29 10:30:42
306
原创 echart 多折线图双击曲线事件
为什么要加上zrender,因为我要的是点击线,dbclick只触发点,所以要监听2个。如图,需要在双击曲线的时候展示底下的东西,需要监听echart事件。对于zrender的理解,直接上图。
2023-03-29 10:14:36
965
原创 echart展示暂无数据
5.关键语句: dom.removeAttribute('_echarts_instance_') 不移除这个dom不展示。3.chart清空,chart一般当成全局,不要放到data里,这样能省一点响应式的开销。如图,需要在点击按钮的时候展示暂无数据,有数据的时候渲染图表,同一个Dom。2.reset函数表示清空原来option有数据的状态。4.接口没数据的时候,设置公用dom显示暂无数据。
2023-03-29 10:05:56
307
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人