Vue

Vue websocket封装实现方法详解

目录 1.封装的ws.js文件 2.使用方法 1.封装的ws.js文件 let global_callback = null let socket = '' // 存储 WebSocket 连接. let timeoutObj = null // 心跳定时器 let serverT »

Vue指令实现大屏元素分辨率适配详解

目录 前言 1. 常见的适配方案 2. CSS3 缩放方案 3. 封装一个缩放指令 4. 后记 前言 随着前端技术的不断发展、数据中心(中台)之类的概念的不断升级、物联网设备的更新和普及,越来越多的业主(项目)喜欢在系统中添加一个或者多个可视化大屏,用来集中的展现数据变化、位置变化等等,老 »

Vue实现拖拽穿梭框功能四种方式

一、使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue; position ... »

mochenxiya

vue3 hook自动导入原理解析

目录 1. vue3 自动导入 2. API 的 自动引入 Ⅰ、使用前后对比 Ⅱ、安装三方件 Ⅲ、配置三方件 3. 组件的自动引入 Ⅰ、使用前后对比 Ⅱ、安装三方件 Ⅲ、配置三方件 1. vue3 自动导入 原理 : 预加载前,该插件自动 按需导入 了,在本vue文件中使用 a »

vue3组合式api实现v-lazy图片懒加载的方法实例

目录 前置知识 Intersection Observer Vue3指令周期 image对象 思路 完整代码 总结 前置知识 Intersection Observer 浏览器提供api,用于检测目标元素和祖先元素/***文档视窗 (viewport) 交叉状态的方法。 »

vue自定义实例化modal弹窗功能的实现

目录 需求背景 下面进行相关讲解 需求背景 使用iview时发现其定义的this.$Modal.confirm()不能进行样式修改,并且秉承着对新知识的追求,故此有了以下的开发 按照我的文档习惯:优先上代码 // components/confirmModal/index.vue »

vue-manage-system升级到vue3的开发总结分析

目录 前言 按需导入 组件的 name 选项 pinia 权限管理 Typescript 总结 前言 近期抽了点时间,对 vue-manage-system 这个项目进行了升级,从 vue2 升级到 vue3、 elementplus、vite、pinia、typescript。这也是对此 »

vue3 组件与API直接使用的方法详解(无需import)

目录 1. vue3 自动导入 2. API 的 自动引入 3. 组件的自动引入  1. vue3 自动导入 原理 : 预加载前,该插件自动 按需导入 了,在本vue文件中使用 api 和 组件 而 编写代码 的时候,就无需 import 了 注意并不是全局导入,并不会影响到资源 »

vue3中的setup使用和原理解析

目录 1.前言 2.setup 3.源码分析 setupStatefulComponent 执行setup函数  finishComponentSetup 4.总结 1.前言 最近在做vue3相关的项目,用到了组合式api,对于vue3的语法的改进也是大为赞赏,用起来十分方便。对于已 »

Vue生命周期与setup深入详解

目录 生命周期 生命周期函数 不同API的生命周期 setup介绍 1. 访问Props 2. setup上下文 3. 与渲染函数一起使用 生命周期 下图对比了vue3(左)和vue2(右)的生命周期:vue3将destoryed该名成了unmounted,相应的beforeDes »

Vue权限指令控制权限详解

目录 第一种-自定义权限指令 第二种:v-if自定义控制 最后说明 在日常的开发过程中,我们除了使用Vue已有的指令之外,还需自定义指令,需要对DOM节点进一步操作。 在后台系统中,最常用的就是权限指令。 权限控制的原理就是在系统当前界面初始化时,判断某些DOM节点有没有权限,没有则移除此 »

Vue3组合式API之getCurrentInstance详解

Vue2中,可以通过this来获取当前组件实例;  Vue3中,在setup中无法通过this获取组件实例,console.log(this)打印出来的值是undefined。 在Vue3中,getCurrentInstance()可以用来获取当前组件实例  vue3官方文档解释 let { »

vue可ctrl,shift多选,可添加标记日历组件详细

目录 一、 按照 &quot;日&quot;, &quot;一&quot;, &quot;二&quot;, &quot;三&quot;, &quot;四&quot;, &quot;五&quot;, &quot;六&quot; 把一个月的日期排列 二、单元格样式处理 三、单机、按住ctrl点击、按住shift点击事件处理 1.记录键盘按下ctrl、shift事件 2.点击事件处理 3.遵循excel点击的操作方式: 四、组件代码: »

Vue3属性绑定方法解析

前言: 这篇文章来自我们团队的田鑫雨同学,强劲的“后浪”。不论使用已有框架,还是自实现框架,数据绑定都是一个热点话题,来看看他对Vue3数据绑定方式的分析 Vue3 通常使用 v-bind 绑定数据到子元素上,对于一个元素接收数据的方式有两种:通过property或通过attribute,本文通 »

vue3的ref、isRef、toRef、toRefs、toRaw详细介绍

ref、isRef、toRef、toRefs、toRaw看着一堆类似的东西,一个头两个大,今天整理一篇文章详细介绍它们的功能及区别。 1、ref ref 属性除了能够获取元素外,也可以使用 ref 函数,创建一个响应式数据,当数据值发生改变时,视图自动更新。 &amp;lt;script lang=&quot; »

Vue tagsview实现多页签导航功能流程详解

目录 一、效果图 二、实现思路 1. 新建 tags-view.js 2. 在Vuex里面引入tags-view.js 3. 新建tabsView组件 4. 新建ScrollPane组件 5. 引入tabsView组件 6. 使用keep-alive组件进行页签的缓存 总结 一、效果图 »

基于SqlSugar的开发框架循序渐进介绍(14)-- 基于Vue3+TypeScript的全局对象的注入和使用

刚完成一些前端项目的开发,腾出精力来总结一些前端开发的技术点,以及继续完善基于SqlSugar的开发框架循序渐进介绍的系列文章,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和使用。我们知道在Vue2中全局注入一个全局变量使用protoType的方式,很方便的就注入了,而Vu... ... »

wuhuacong