
Vue3.0
小Vue
山楂树の
Always believe that something wonderful is about to happen.
展开
-
Vue3.0判断slot插槽是否被使用
返回被使用的 插槽 实例const slots = useSlots();onMounted(() => { console.log(slots, 'slots');})原创 2023-05-23 18:30:38 · 1365 阅读 · 0 评论 -
iframe加载白屏闪烁解决方案
onload 事件在iframe载入完成后被触发,载入过程中隐藏,onload触发时显示,当然这个过程中可以做一些动画,在load事件中控制动画的显示隐藏即可。原创 2023-03-05 16:11:09 · 2689 阅读 · 3 评论 -
日历组件封装 —— (Vue 和 JS两种方式实现)
分三个模块,日期面板、年份面板、月份面板。所有事件,利用事件代理方式,只绑定根元素点击事件,最后触发子节点通过冒泡触发事件。公共store,用于响应数据的变化,及时去创建或更新面板。原创 2023-02-14 18:44:04 · 1587 阅读 · 0 评论 -
原生table-多级表头【广度优先实现】
既然提到多级表头,合并行合并列肯定少不了,先把树结构处理为一层数据结构,然后计算合并行,每个节点需要合并的行数需要判断一下 当前节点的层级是否不等于整个树结构的最大层级并且当前节点下是否有子节点,如果满足上述条件,则需要合并行,合并的数量为:最大层级数 - 当前节点层级 + 1;然后是合并列,每个节点合并的列数为:无子级节点1,、有子级节点:当前节点下所有子级数量的和;在给每个节点做好需要合并的行列数的标识后,可以开始处理用来循环表头的数据。处理一个二维数组,每项的数组中分别存放的是层级相同的节点,[[1,原创 2023-02-09 16:04:48 · 2329 阅读 · 1 评论 -
Vue3.0实现图片预览组件(媒体查看器)
一组图片、视频、音频、文件数据,要求点击图片可以放大预览,左右可以切换音视频、文件,支持鼠标及各种键控制 缩放,左右旋转,移动等功能,整理了一下,封了个组件,注释很全面,每块地方都有讲解,可以直接拿到项目中使用。顶部中间一般为图片当前索引index/总长度,当然默认的为这样,抛出index,可以自定义这块地方插槽的使用,顶部左侧插槽也暴露当前index,其实当前组件最需要的数据也莫过于index,暴露方法中也基本都有抛出。音频用的是原生audio,用法很方便,没什么可讲的,具体看代码。原创 2023-02-02 18:18:43 · 8198 阅读 · 3 评论 -
effectScope副作用管理域 — Vue3.2 API
effectScope是一个函数,调用effectScope函数会返回一个effect 作用域对象,其中包含了run(一个函数)和stop(一个函数),以捕获在其内部创建的响应式 effect (例如计算属性或侦听器),使得这些 effect 可以一起被处理, 在run中定义的计算属性或侦听器(computed,watch, watchEffect等),在调用了scope对象的stop()方法之后,所有的依赖都被停止,只在初始化的时候调用一次。原创 2023-01-26 19:24:44 · 249 阅读 · 0 评论 -
Vue3内置组件teleport详解
teleport的作用:该组件可以将指定内容渲染到特定容器中,而不受 DOM 层级的限制应用场景:当蒙层内容在一个组件中时,蒙层内容是无法遮挡住全部内容的,因此,需要使用teleport将蒙层内容渲染到更全局的组件中原创 2023-01-26 16:55:47 · 1065 阅读 · 0 评论 -
Vue 导入Excel
拿到事件对象,点出files,数组下标0的位置就是该上传的文件流,将这个事件流传给后端即可。使用原生input,type类型指定为file。监听change事件,上传文件时触发。原创 2022-12-10 14:16:48 · 241 阅读 · 0 评论 -
Vue表格滚动到页面顶部,表头固定
监听页面根元素的滚动事件,判断表格节点距页面顶部的距离offsetTop减去被表格被减去的高度scrollTop是否大于零,大于零,未到页面顶部,隐藏自定义表头,小于零,将自定义表头展示出来j原创 2022-12-03 16:28:12 · 1568 阅读 · 0 评论 -
element-ui中el-image加载图片自定义loading
element-ui中el-image加载图片自定义loading原创 2022-11-24 10:33:22 · 3092 阅读 · 0 评论