qq_37656005的博客

最近很多小伙伴问到使用jsplumb进行多列拖拽连线怎么实现？安装 npm install --save jsplumb引入</script>使用<template><h3>jsplumb使用 ( 多列 )</h3></div></div></div></div>//jsplumb使用// 缓存实例化的jsplumb对象]);{ name: '数据2-1', nodeId: 'data2-1' },{ name: '数据2-2', nodeId: 'data2-2' },

vue3+vant4 实现移动端网页调用手机摄像头实现扫描二维码，并返回二维码附带信息功能

元素，并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特性的值，可以动态切换渲染的组件。在 Vue 中使用动态组件，可以使用。例子2： v-for循环动态组件渲染。例子1： 单组件渲染。

弹窗中接口请求返回图片，用于前端展示，接口还没返回数据，此时关闭弹窗，需要中断接口请求tab标签页根据后端返回数据，依次渲染，频繁切换标签，需要中断接口请求for循环中请求接口，遇到跳出循环情况，也需要中断接口请求跳转路由，离开页面时，可能也需要中断接口请求下面就是根据以上问题，找到的解决方案。

localForage 是一个快速而简单的 JavaScript 存储库。通过使用异步存储（IndexedDB 或 WebSQL）和简单的类 localStorage 的 API ，localForage 能改善 Web 应用的离线体验。在不支持 IndexedDB 或 WebSQL 的浏览器中，localForage 使用 localStorage

为了实现网页接入飞书授权登录工作，将飞书登录的二维码嵌入到网页中。当用户扫码成功后会返回 tmp_code，即可用来完成后续的授权登录流程。

之前不理解Hooks和自定义封装的utils函数有什么区别，它们都是函数，逐步理解到utils函数没有vue里面的响应式api，而自定义Hooks可以使用响应式api，比如：ref、reactive、onMounted等等。loading大家都不陌生，在项目请求接口时需要显示loading加载提示用户正在请求中的操作，在加载完成隐藏loading，显示返回的数据。使用Hooks是为了让项目整体的开发代码质量更加高，开发功能更加便捷，效率更高。个人理解：Hooks 就是 钩子 的意思，在特定时机执行的函数。

vue3项目中实现在canvas画布上实现画节点和连线功能，要求可以撤销重做。

vue 动态引入和移除第三方js 和 css文件页面中经常会引入第三方库的情况，有些组件有vue版本，直接安装依赖引入就可以，但是有一些组件不支持vue，就需要单独在页面中引入js和css，如果直接全局在index.html中引入会造成资源浪费，下面是使用Vue3语言讲解如何局部引入和移除的代码示例：

vue3.x + elementui-plus实现v-for动态循环生成ref后进行表单验证本例子是根据vue3.x 和elementui的 多form表单进行表单验证，验证通过后再进行提交操作

vite+vue3+axios proxy配置代理服务器解决本地运行跨域问题配置后，重新启动运行项目，就可以正常访问接口了需要注意的是：在打包后，部署后tomcat下，还是会跨域，所以想要彻底解决问题，还是需要后端接口代码加上跨域的相关配置

执行 import XXX from ‘XXX.js’ 报错，The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准，不能按需导入。在所需的.vue文件里单独引入，最后在head标签里生成js和css，离开页面时移除。在index.html里利用script全局引入。

vue3自定义指令，防止按钮多次点击执行操作自定义节流操作在src下新建directive文件夹，新建index.ts文件

vue3.x 父子组件通信是经常会遇到的父组件给子组件传参可以通过 props 来实现，父组件调用子组件方法和获取子组件数据 通过 xxxRef.value.子组件方法() 和 xxxRef.value.子组件数据 实现子组件调用父组件方法使用 emit 来实现祖孙组件传值和调用方法使用 provide / Inject 来实现今天介绍的是vue3.x子组件调用父组件方法并获取方法的返回值如何实现，正常首先会想到是方法里面勇return返回值，就能获取到，但是实际是行不通的，要使用callback

VUE3祖孙组件传值调用方法父子组件传参可以通过 *props* 和 *emit* 来实现，但是当组件的层次结构比较深时，*props* 和 *emit* 就太繁琐了。vue为了解决这个提出了 *provide / Inject*

vue3 axios统一添加响应拦截器，针对接口返回值判断，如果返回未登录信息，直接跳转到登录页。在main.ts 或 main.js里加入代码。

vue3如何获取动态循环生成的refvue3.x $nextTick和 $refs用法

vue3 axios统一添加headers 和单独某一个接口添加headers的语法是不一样的，其中接口添加headers需要区分请求方式是GET还是POST,下面依次介绍3种情况

采用Vue3的语法讲述如何实现在一定区域内用鼠标滚轮缩放图片以及在该区域内拖拽图片，在下面的应用里还会使用到父子组件传值，调用方法，以及compute计算，自定义指令等

vue3 使用自定义指令，全局注册，局部注册，必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。局部注册自定义指令，实现输入框自动获取焦点;全局注册自定义指令，实现防止按钮连续重复点击事件（防抖）

vue3 使用computed计算属性demo1: 简单使用computed<template> <div :style="{'width': width}" style=" height: 100px;background: #0a0"></div></template><script lang="ts" setup> import {ref, reactive, computed} from 'vue' const

VUE3 实现前台图片标注功能包括：鼠标左键拖动添加矩形框标记区域，鼠标点击已绘制的矩形； 选中矩形，并绘制不同选中效果； 鼠标在已绘制的矩形中按住左键拖动，选中并移动矩形；选中矩形后鼠标在选中矩形四个角按住拖动，可缩放矩形；选中矩形后点击键盘删除按键，可删除矩形；获取矩形框位置坐标大小；图片缩放功能、鼠标滚轮缩放

vue3 + eleemetuiPlus 实现鼠标左键拖拽画矩形框 框选列表功能，仿照桌面框选功能效果如图： vue3鼠标框选 代码：<template> <div class="box-img" @mousedown="handleMouseDown"> <div class="mask" v-show="positionLi

Vue3 iframe引用本地文件以及根据内容调整iframe高度首先在public文件夹下新建文件夹static,将需要引入的html页面放入进去template写引入iframe <iframe src="static/word/index.html" id="testFrame" name="myiframe" frameborder="0" width="100%" scrolling="no" style="min-height: 500px;" ></iframe

如果想在vue2里面使用jsplumb 可以查看 文章，下面讲解如何在vue3.x 里面使用jsplumb进行拖拽连线

vue3.x 父组件向子组件传值

vue3.x 父组件调用子组件方法或值

vue3 批量注入elementUI icon组件, 解决用字符串做下标报错问题， Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘typeof import("…/node_modules/@element-plus/icons/types/index”)’

问题描述：vue3 新增路由对象或者是属性类型后，会报错，vue3源码里没有定义这个属性 TS2322: Type ‘{ path: string; name: string; hidden: false; component: () => Promise<typeof import("*.vue")>; }’ is not assignable to type ‘RouteRecordRaw’. Object literal may only specify known properties

**vue for循环中按顺序执行axios请求**需求：前端利用for循环遍历一个接口获取信息，利用promise可以保证每次接口遍历正常后统一保存返回的数据

vue3.x 子组件调用父组件方法或值

watch-监听器(侦听器)，作用是用来侦测响应式数据的变化，可以得到newValue和oldValue，Vue3中watch使用有了一些细微的变化，下面举几个例子看一下是如何应用的以获取浏览器地址栏路由为例：1.监听单个值引入：import {…, watch} from “vue”;import {useRouter} from ‘vue-router’;export default { setup() { const route = useRouter(); //获取当前路由

vue3 + vite打包后，切换到另一个页面，再切换回来，echarts不触发更新， 是因为离开页面时实例并没有被销毁的，再次进入这个页面的时候，不会触发生命周期函数来更新数据。可以在echarts那个页面的钩子函数中打个断点，看看能不能走到生命周期里面去。如果没有走进去，那么就证明当你离开这个页面时，没销毁echart实例，或者是你app.vue里面有keep-alive，有缓存导致的.可以在离开页面时销毁echart import { onMounted, onBeforeUnmount} fr

vue3 动态的导入图片vue3 如果使用的是typescript开发，就会出现require引入图片报错，require is not defined 不能像使用vue2 这样imgUrl: require(’…/assets/test.png’) 导入，是因为typescript不支持require所以用import导入，下面介绍如何解决： 使用await import(’@/assets/img/22.png’);demo.vue<template> <img :

关于vue3.0 + vite + ts 打包的坑我的项目是用vue3.0.x+ vite2.4.x + ts 4.3.x版本开发的，引入一些elementui,axios,vuex等插件，用npm run build 打包的时候报了一大堆错，后来发现原来是vue-tsc --noEmit && vite build的问题报错详情：package.json文件默认配置如下："scripts": { "dev": "vite", "build": "vue-tsc -

vue3.x $nextTick和 $refs用法在会使用vue2.x语法后，正在学习vue3语法，记录一下 $nextTick和 $refs用法，下面是一个demo,实际演示如何使用话不多说直接上代码（这里ui用的是elementUi）<template> <el-button type="" @click="clickShow">显示弹窗</el-button> <el-dialog v-model="flag" width="500