vue
文章平均质量分 56
永远不会太晚
It's never too late
展开
-
前端实现svg图片居中放大缩小与拖动,使用viewbox属性(vue3+typescript+vue自定义命令)
https://zqy233.github.io/svg-zoom-drag-vue-demo/#/https://github.com/zqy233/svg-zoom-drag-vue-demo上方两个自定义指令已经发布为npm包,可以直接安装使用Vue2Vue3绑定两个命令到dom上注意点指令将绑定元素的第一个子元素当做 svg,所以请注意绑定的元素这样设计是为了搭配原创 2022-06-06 18:07:58 · 4977 阅读 · 6 评论 -
vite+vue2使用vue-grid-layout布局结合动态组件component
遇到的坑:最开始grid-layout组件绑定data中的值,动态组件一直不显示,后来我发现grid-layout会修改绑定的布局数组的值,但是修改的值中component动态组件字段会丢失,所以只能使用computed,然后set时合并一下布局数组的值,具体代码看下方。// 不能直接this.layout = v,需要合并,因为component属性会丢失。通过 modules 对象的 key 值来访问相应的模块。具体用法以及属性这里不介绍,请看官方文档。原创 2023-04-10 14:11:13 · 816 阅读 · 0 评论 -
el-tree树组件懒加载-后端上千条数据前端进行处理
一般是通过树节点id请求后端接口,添加新的节点数据,但我最近遇到的是后端一次性返回上千条数据(树数组结构),由前端进行处理实现懒加载。首先,load属性绑定一个懒加载函数,当点击节点时触发。实现懒加载tree,需要为tree组件添加。原创 2023-03-08 10:02:49 · 4042 阅读 · 0 评论 -
基于vue3异步组件、动态组件、vite批量导入实现路由权限动态管理(非addRoute方案)
开发后台管理系统必备的需求:动态菜单权限管理、或者说路由权限动态管理原理是通过addRoute这里就不具体论述了这里介绍一个个人研究的,在vite+vue3下的动态菜单权限管理实现方案:这是一个由后端动态菜单控制的解决方案,需要后端传异步组件的路径值基于异步组件和动态组件,而不是addRoute。原创 2023-02-27 17:15:31 · 1267 阅读 · 0 评论 -
vue实现虚拟滚动渲染成千上万条数据
页面只需要渲染可视区域的dom,当用户进行滚动时根据滚动高度进行可视区域dom的更新,从而达到无感滚动效果。/** 列表滚动,暂时不节流,因为滚动快触发次数就少,容易导致没有及时更新数组导致白屏 *//** 根据每条数据的高度获取总列表高度 *//** 每次截取虚拟列表的位置 *//** 起始显示数据 *//** 结束显示数据 *//** 数据列表 *//** 单行高度 *//** 偏移高度 *//** 前面预留 *//** 后面预留 *//** 虚拟数据 *//** 滚动函数 */// 此时的结束索引。原创 2023-02-07 16:49:00 · 2857 阅读 · 0 评论 -
vue mounted获取video的duration是NaN
原因是video数据没加载完原创 2023-01-29 13:38:02 · 911 阅读 · 0 评论 -
element-plus设置el-table列宽总和为100%
min-width转载 2023-01-12 14:56:08 · 2954 阅读 · 0 评论 -
vue2、vue3中的v-model的区别以及为什么vue3废弃.sync修饰符
学习自官网原创 2023-01-04 10:01:43 · 1930 阅读 · 3 评论 -
vue3+vite+print-js打印页面指定元素踩坑:宽度超过默认宽度导致打印不全、字体大小失效、自定义字体失效
无原创 2022-12-21 18:07:34 · 5105 阅读 · 0 评论 -
element-plus组件库el-tab-pane中加入el-dropdown组件、设置el-dropdown-item选项高亮
使用插槽的方式,在el-tab-pane中加入el-dropdown组件。根据command值设置el-dropdown-item高亮。原创 2022-12-20 11:22:01 · 2383 阅读 · 0 评论 -
vue3+vite项目:window.open打开新窗口查看图片
写入html字符串原创 2022-12-15 11:38:40 · 2219 阅读 · 0 评论 -
vue3使用富文本编辑器wangEditor-v5(未使用composition api写法)
无原创 2022-11-22 17:13:16 · 1425 阅读 · 2 评论 -
element-plus table组件单击行切换选中状态、点击高亮行、设置shift或ctrl连续多选和连续取消多选(支持多段选择)
无原创 2022-11-21 16:03:33 · 4423 阅读 · 1 评论 -
element-plus input组件+select组件实现输入加选择
input组件+select组件原创 2022-11-15 11:17:20 · 3510 阅读 · 3 评论 -
vue3 composition api计算属性computed传参与处理的写法
composition api原创 2022-11-14 10:44:21 · 1431 阅读 · 0 评论 -
使用element-plus的el-upload:1.手动上传2.第二次上传无效3.多图上传保留成功去除失败4.请求头添加token5.请求添加其他参数
踩坑原创 2022-11-09 14:28:10 · 6467 阅读 · 1 评论 -
el-form解决奇怪的问题-点击查询按钮页面会刷新
解决方案:el-form加上@submit.native.prevent阻止默认提交事件转载 2022-10-31 20:31:26 · 609 阅读 · 0 评论 -
基于element-plus2.5.10 table组件实现分类table
思路很重要原创 2022-10-28 15:25:29 · 2688 阅读 · 0 评论 -
element-plus2.5.10版本el-table树形数据设置自定义展开收起图标与插槽图标-第一级才设置索引
el-table树形数据,设置自定义展开收起图标与插槽图标-第一级才设置索引原创 2022-10-28 11:50:25 · 5040 阅读 · 1 评论 -
element-plus2.5.10版本el-tree按不同级别设置不同图标与选中图标
基于插槽原创 2022-10-25 15:36:02 · 3181 阅读 · 0 评论 -
vue滚动到底,请求后端数据分页加载更多
一个可滚动的内容区域,绑定滚动事件原创 2022-10-18 10:54:37 · 1380 阅读 · 0 评论 -
vue3.2.40,keepalive热更新报错 TypeError: parentComponent.ctx.deactivate is not a function
暂时性的解决方案转载 2022-10-08 12:34:28 · 4030 阅读 · 13 评论 -
websocket简易示例(vue3+express)实现一台电脑控制另一台电脑的页面
new一个对象原创 2022-08-22 14:36:39 · 986 阅读 · 0 评论 -
element-plus@2.2.6 input组件设置show-word-limit无效
设置`maxlength`原创 2022-06-29 14:32:32 · 2632 阅读 · 0 评论