![](https://img-blog.csdnimg.cn/ad2f1fdd47c543b2937f072360c72b2a.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue知识点
文章平均质量分 66
整理Vue知识点,记录Vue学习
白桃与猫
每天学一点点~
展开
-
vue3使用vuedraggable实现拖拽(有过渡)
vue3使用vuedraggable实现拖拽原创 2024-03-29 15:52:30 · 4644 阅读 · 0 评论 -
表格列内容过长显示省略号,并悬浮展示信息
使用自定义指令,并判断超长的文字,悬浮提示展示信息。// 表格内容过长,显示悬浮信息。// 判断该行内容是否全部显示。原创 2024-03-22 09:19:05 · 529 阅读 · 0 评论 -
vue中json格式化显示(vue-json-viewer)
添加到JsonViewer的组件属性上复制粘贴下面的模板并且根据自定义的theme名称做对应调整。原创 2024-03-12 16:22:07 · 3033 阅读 · 2 评论 -
【webpack】和【vite】中获取本地文件夹目录下的所有图片
webpack 和 vite 中获取本地文件夹目录下的所有图片原创 2024-03-11 11:02:04 · 1011 阅读 · 0 评论 -
pina持久化的安装与使用(pinia-plugin-persistedstate)
pinia可以实现跨组件之间的通信,但是有时会面临的情况。而使用或者需要对不同字段做处理,也很麻烦。所以选择pinia-plugin-persistedstate来对Store进行c持久化存储。原创 2024-02-04 14:11:31 · 1250 阅读 · 0 评论 -
Transition内置组件设置无效的原因
包裹的组件是否有显示隐藏状态的切换,或者是绑定的key值是否发生改变。要放在发生变化的组件外层,如果中间有其他元素或组件会不生效原创 2024-02-02 16:10:17 · 652 阅读 · 0 评论 -
拖拽按钮: 如何区分点击和拖拽事件 (vueuse实现)
问题:使用vueuse的去拽按钮时会触发点击事件,即使设置阻止默认事件还是没用。原创 2024-02-02 15:59:17 · 1004 阅读 · 0 评论 -
【vue】defineModel在vue3.4中的最新用法和详解
尤大发布了vue3.4版本,这个版本主要对一些实验性特性的改进(比如),大量重写了模板编译器并重构了响应式系统,可以说是大大提升了运行速度和效率。原创 2024-01-29 17:04:39 · 8130 阅读 · 0 评论 -
输入框内容和占位符过长悬浮提示
输入框内容过长,内容悬浮提示;输入框占位符过长,以省略号代替,并悬浮提示原创 2024-01-26 15:54:27 · 730 阅读 · 0 评论 -
【IP地址】输入小数点,自动移到下一输入框
输入框最多只能输入三位数字(0-255),按下小数点(.) 光标会自动跳转到下一个输入框。原创 2024-01-02 11:16:54 · 1006 阅读 · 0 评论 -
【pinia】Store的两种声明方式:Option和Setup声明
state: 存放共享数据getters: 相当于计算属性actions:异步操作使用时:importfrom'./store'const原创 2023-11-03 16:47:42 · 276 阅读 · 0 评论 -
【element-plus】DateTimePicker日期选择器,限制指定日期和时间不可选择
element-plus日期选择器,在指定日期时间前不可选择。原创 2023-10-30 17:03:32 · 2250 阅读 · 0 评论 -
vue内置组件Transition的详解
通过name可以自定义的过渡类名。里面只能有一个根组件,但使用切换显示是可以的。如果想对列表中的元素设置过渡,可以使用TransitionGroup原创 2023-09-20 14:33:59 · 1161 阅读 · 0 评论 -
el-dialog设置高度、使用resetFields清除表单项无效问题
可以将在弹窗关闭时将表单赋值为空,手动重置表单项。(2) 在el-dialog上自定义样式,使用。设置固定高度,或者限制最小的高度。包裹一个div,给它设置样式。(1)在el-dialog。原创 2023-09-04 11:19:00 · 4401 阅读 · 0 评论 -
svg图片如何渲染到页面,以及svg文件的上传
需要实现从本地目录下去获取所有的svg图标进行预览,将选中的图片显示在另一个地方,再上传。编码后的SVG图片数据,可以直接在HTML/CSS中使用,进行图片的预览。之前将svg转成文件后上传,服务器显示的文件是。一开始的错误写法:将svg文档转成字节流了。🔸【图3】:svg元素的内容,通过。🔸正常的传参显示:svg元素的内容。将获取到的SVG文件内容转换成。🔸如果还想获取该svg图片的。🔸svg内容的两种形式的区别。的,只有 svg 路径数据。上,一般用于图片的预览。, 以及一个匹配文件的。原创 2023-08-21 16:10:28 · 1567 阅读 · 0 评论 -
router-view上添加key和data-key的作用
key属性用于唯一标识路由组件,data-key属性可以用于存储自定义数据。原创 2023-06-30 17:59:17 · 823 阅读 · 0 评论 -
element-plus表格合并最后一行并单独设置某一行样式
该函数可以返回一个包含两个元素的数组,第一个元素代表。// 单独设置一行的样式:rowIndex从0开始,表头不算。(从0开始,表头不算)。返回一个字符串,也就是类名。属性来为 Table 中的某一行添加 class。可以通过指定 Table 组件的。方法可以实现合并行或列, 方法的。// 合并表格最后一行单元格。通过给 table 传入。当前列 column。原创 2023-06-21 15:22:40 · 1371 阅读 · 0 评论 -
vue3+element Plus实现表单项的动态新增与删除
【代码】vue3+element Plus实现表单项的动态新增与删除。原创 2023-06-14 17:40:51 · 1784 阅读 · 0 评论 -
点击switch开关后,出现弹窗确认后,显示loading效果
实现表格中使用el-switch,改变el-switch状态前,需要出现一个弹窗进行确认。表格中el-switch请求接口时单独设置loading原创 2023-06-14 10:52:34 · 1342 阅读 · 1 评论 -
vue不在一个路由配置中,怎么实现页面跳转?
如果两个页面不在同一个路由配置中,可以使用HTML中的超链接标签,或者使用JavaScript中的location对象的方法进行页面跳转。原创 2023-05-18 15:10:32 · 1502 阅读 · 0 评论 -
【vue】computed的传参和element-plus弹窗的显示
计算数据变化后的结果:可以监听响应式数据的变化,一般计算购物车的总价或计算商品的平均评分格式化数据:过滤、排序数据。控制弹窗是否显示原创 2023-05-17 10:45:07 · 1905 阅读 · 0 评论 -
vue3使用语法糖setup+ts的使用总结
vue3使用语法糖setup+ts的使用总结原创 2023-05-07 16:46:16 · 1244 阅读 · 0 评论 -
在vue3+setup+ts中使用内置动态组件component
component是vue的内置组件,不需要注册可以直接使用。通过is去选择要渲染的组件,可以是一个组件名称字符串(使用在选项式API中),也可以是组件的定义(使用在组合式 API中)。原创 2023-04-20 17:09:52 · 5495 阅读 · 0 评论 -
什么是编译器宏?
在阅读vue的官方文档时,提到了`defineProps、defineEmits、defineExpose、withDefaults`都是编译器宏,那什么是宏定义?什么又是编译器宏呢?宏定义是一种将一段代码或值进行简单替换的预处理指令。在代码中,我们可以使用#define关键字来定义一个宏,并给它赋一个值或表达式。在代码中使用宏时,编译器在预处理阶段会将宏名替换为对应的文本值或表达式。这种替换是直接进行文本替换,不会经过表达式求值或者类型检查。原创 2023-04-19 11:52:36 · 1309 阅读 · 0 评论 -
element-tree中文字过长显示tooltip
element-tree中文字过长显示tooltip原创 2023-04-18 11:51:30 · 775 阅读 · 0 评论 -
vuex中如何使用mapState函数(vue2/vue3使用方法)
通过...运算符进行结构,将store中的state进行映射。在template中可以直接使用,不需要通过`this.$store.state`一个个获取store中的state数据。在vuex中可以导出改函数。原创 2022-06-10 16:51:46 · 7836 阅读 · 0 评论 -
Vue3实现非父子组件通信
方式一:provide/inject// 父组件传递数据 provide: { msg: "我是小仙女", emotion: "超级开心" }//接收数据的组件inject:['msg','emotion']注意:provide中定义的数据不能在本组件中使用一般provide最好返回一个对象,可以获取到data中的数据。要想provide中数据变成响应式的,用computed包裹。import {computed} from 'vue'// 向非父组件传递数据原创 2022-04-04 13:49:10 · 1357 阅读 · 0 评论 -
vue组件间通信
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、父组件-->子组件的通信二、子组件-->父组件的通信三、兄弟组件的通信EventBus四、总结前言组件之间的通信一直是Vue学习中的一个重点, 所以我们更应该要熟练地掌握 ~ 一、父组件–>子组件的通信示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、子组件–>父组件的通信import numpy as npimport pandas as p原创 2021-11-21 21:21:12 · 324 阅读 · 0 评论