vue
分享工作中的实战经验
貂蝉空大
啥,你说你要学编程?
展开
-
vue3+ts+vite+pinia+element-plus搭建一个项目
创建一个基于Vue 3、TypeScript、Vite、Pinia和Element Plus的项目是一个现代化的前端开发流程,这种配置通常用于构建轻量级、快速和模块化的单页应用程序(SPA)。是Vue.js的最新主要版本,提供了Composition API、更好的TypeScript支持、自定义渲染器等功能。是JavaScript的一个超集,添加了类型系统和基于类的面向对象编程。它能够提供更好的代码编辑支持和更早发现运行时错误,特别是在大型项目中。原创 2024-08-19 15:33:21 · 505 阅读 · 0 评论 -
vue项目中进行多环境配置
在Vue 项目中,进行多环境配置是一个常见需求,主要用于区分开发、测试、生产等不同环境下的API地址、密钥等配置。原创 2024-08-19 15:00:38 · 513 阅读 · 0 评论 -
vite+vue3+ssg+js打包时遇到的问题及解决
我在其中使用了vue3-video-play报错 window is not defined 更换插件为video.js报错解决。isClient可以判断是否是客户端,在这里面使用window和document不会报错。打包过程中会遇到个别插件或者包中含有window报错 可以试着更换插件。如上图所示 可以在使用之前进行判断。在package.json。原创 2023-03-06 15:40:40 · 2224 阅读 · 2 评论 -
tinymce中的a标签增加点击事件
这样,当用户在编辑器中选择文本并点击工具栏上的 “添加链接” 按钮时,自定义的点击事件就会被触发。在示例代码中,我使用了一个简单的。在 TinyMCE 中,可以通过自定义按钮来实现在插入或编辑链接时添加点击事件。首先,在初始化 TinyMCE 的时候,需要添加一个自定义按钮。然后,在 TinyMCE 的工具栏中添加这个自定义按钮。弹窗作为点击事件的处理逻辑,你可以根据实际需求自行修改。配置项来添加按钮,并为其绑定一个自定义的点击事件。配置项来指定工具栏中的按钮布局。原创 2023-09-02 16:28:10 · 772 阅读 · 0 评论 -
获取富文本source标签中的src
【代码】获取富文本source标签中的src。原创 2023-10-16 16:50:19 · 160 阅读 · 0 评论 -
el-table组件分页时选中数据时数据回显
两个需要注意的点 需要设置row-key 同时在在选择框需设置reserve-select 为true。原创 2024-01-29 11:11:54 · 612 阅读 · 0 评论 -
el-table(element-ui)合并id相同的指定行
【代码】el-table(element-ui)合并id相同的指定行。原创 2024-03-21 10:53:43 · 998 阅读 · 0 评论 -
el-tree组件使用filter-node-method方法搜索过滤节点,不展示子节点的问题以及中英文过滤
这个方法有三个参数,value:输入的搜索词,data是当前数据,node是当前树形节点。toLowerCase()实现中英文过滤。原创 2024-03-29 11:33:46 · 1494 阅读 · 0 评论 -
前端web虚拟列表实现
前端虚拟列表是一种优化技术,用于处理大量数据的列表展示,以提高页面性能和用户体验。其原理是只渲染当前可见区域的数据,而不是将所有数据一次性渲染到页面上。计算可见区域:根据列表容器的高度和每个列表项的高度,计算出可见区域可以容纳的列表项数量。更新可见区域:根据起始索引和可见区域的数量,更新可见区域的数据,并重新渲染到页面上。监听滚动事件:监听列表容器的滚动事件,根据滚动位置动态计算当前可见区域的起始索引。渲染可见区域:根据可见区域的数量,只渲染这些列表项到页面上。获取列表数据:从后端获取完整的列表数据。原创 2024-01-10 15:18:13 · 675 阅读 · 0 评论 -
前端防止按钮被重复点击
【代码】前端防止按钮被重复点击。原创 2024-01-10 15:01:29 · 674 阅读 · 0 评论 -
vue2中tinymce支持超链接点击下载功能
这样,你就可以在Vue 2中使用TinyMCE实现超链接点击下载功能了。当用户点击超链接时,会触发自定义的。你可以根据自己的需求来实现下载逻辑。在这个例子中,我们使用了一个自定义的。指令双向绑定了编辑器的内容。原创 2023-09-02 16:26:30 · 521 阅读 · 2 评论 -
vue强制更新组件
当组件的数据发生变化时,Vue会自动重新渲染视图,但是有时候,如果数据的变化不会触发Vue的响应式系统,那么组件就不会重新渲染。需要注意的是,对于优化性能的考虑,我们不应该频繁地使用this.$forceUpdate()。通常情况下,Vue应该能够自动检测到数据变化并触发渲染。在上面的例子中,当点击按钮时,会修改message的值,并调用this.$forceUpdate()来强制更新组件,从而重新渲染视图。在Vue组件的方法中,可以使用this.$forceUpdate()来手动强制更新组件。原创 2024-01-29 11:42:41 · 702 阅读 · 0 评论 -
vue3中watch同时监听多个值
vue3中watch同时监听多个值。原创 2023-03-16 16:31:35 · 2845 阅读 · 4 评论 -
vue+vue3 setup语法糖父子传值
使用setup语法糖父向子传值时,如果值是从后台获取的数据,可以加一个v-if判断,有数据时再进行组件的渲染。vue3 setup语法糖不用导入组件直接使用即可,不用注册。这个是自己封装的一子组件在父组件里面引用。原创 2023-03-16 16:24:51 · 443 阅读 · 0 评论 -
在vue2中使用wangeditor
【代码】在vue2中使用wangeditor。原创 2024-08-02 18:32:01 · 599 阅读 · 0 评论 -
web端使用echarts绘制图表示例(柱状图),包括自定义工具
【代码】web端使用echarts绘制图表示例(柱状图),包括自定义工具。原创 2024-07-08 15:07:17 · 227 阅读 · 0 评论