qq_39404437的博客

Vue3知识点学习，包含vue2.6向vue3进阶的知识点，@vue/composition-api体验版讲解，jsx语法讲解，插槽讲解等

export 是用于sass文件和js文件关联的，用此可以将sass中样式类似于es6语法中export导出，并在其他样式或者js文件中直接使用，但是 目前只适用于demo：应用组件。

vue3 + tsx 实现音乐播放器

关于树形结构的新增同级节点等四种操作，各种参数配置完全继承el-tree，本篇使用vue2 + element-ui。

【vue】模板写法中用纯css实现左右拖拽效果resize-bar 这个类 overflow设置为scroll，并且左侧内容区宽度和滚动条dom宽度一致，以此来实现拖动控制宽度。因为不设置的话，主动调用折叠收缩将直接将另一侧宽度设置为0，那将无法将被折叠的dom再次拖拽了，当然此值可以根据你想要的来设置。因为不设置实际像素值的话，那拖拽滚动条的位置 只能在dom偏上方，而不能实现在滚动条任意位置拖拽。

vue中使用axios的完整配置TS版。

封装了，用更灵活的方式来使用vuex，主要使用的是vuex的createNamespacedHelpers方法，此方法是createNamespacedHelpers 在vuex@^3.1.1 及以上都有。

【通用表格组件】vue3 + element-ui + tsx 实现通用表格组件

在项目开发中，遇到在表格中一次性加载完的需求，且加载数量不少，有几百几千条，并且每条都可能有自己的下拉框，输入框来做编辑功能，此时普通的el-table肯定会导致浏览器卡死，那么怎么办呢？

这是npm官网上对patch-package的说明，其意思就是可以让大家立即对npm依赖的源码进行自定义修改。其实大多数时候是不需要自己去改依赖源码的，毕竟大多数情况你写的代码肯定没别人作者自己写得好，但是遇到bug了，自己去及时改还是可以的

本地vue项目遇到图片跨域怎么解决？常规的方法我就不说了，啥配置图片服务器设置，nginx代理都不说了，下面来说个重点disableHostCheck： 本地项目代理到指定域名下。

【Canvas】手把手教你Canvas绘制PDF及截图林大大来啦~最近在搞pdf文件的预览、缩放、拖动和截图，才发现其实要比普通图片的缩放拖动截图麻烦的多。

vue2+element-ui的通用表格组件封装

1、canvas略解林大大又来更新啦~这次主要做的是关于canvas图像绘制的部分，要实现的功能主要是绘制、对canvas的放大以及那我们先来大概了解下canvas：1、canvas略解宽高是必须加上的，当然你也可以选择动态宽高，可以设置宽高百分比喔，canvas用于在页面上绘制图像（可以是自己的图片，也可以绘制自定义矢量图形：矩形等），其实我们不用担心大量的重绘canvas，现在浏览器完全扛得住这压力，非常流畅丝滑。

vue学习（6）自定义指令详解及常见自定义指令

vue2.6更新后推出v-slot来代替之前的slot-scope和slot使用子组件child.vue父组件老版使用方式slot-scope和slot的具名插槽作用域新版使用方式v-slot的具名插槽作用域其实大家都会发现，子组件其实是没有变化的，区别在于父组件修改了写法，v-slot集成了slot和slot-scope，简化了写法，另外v-slot还可以动态具名2、v-slot动态具名。...

eslint常见报错集合

多个vue项目间数据通用;vuex持久化存储;localstorage存储

@vue/repl 源码级bug及临时解决方案

不废话，直接上代码假设你在vuex的a模块中想要调用b模块的action或者mutations，那么直接在你a模块写下面代码：dispatch('b/actionB', data, { root: true })commit('b/commitB', data, { root: true })关键点就是要加{ root: true }......

基于openlayers6开源地图开发的WMap，完全开源免费，目前共计提供16个类

vue在线组件交互/vue3在线代码编译

总体配置其实和vue2 的 el-pagination差不多，不过将页码和页数的调用事件回调了回来，我们这里既可以单独使用这个分页组件，也可以和我前面写得 通用表格组件 一起使用，通用表格组件里内置了本分页组件。// 本页条数改变emit('pagination', { page: currentPage, limit: val })// 页数改变emit('pagination', { page: val, limit: pageSize })<template> &lt

【通用表格组件】vue3 + element-ui + template 实现通用表格组件

这里比较完美的实现了表单通用组件的封装，因为在做PC 端 element项目时，我们很多时候都会用到表单，具体实现如下：withDefaults，defineProps, defineEmits 都是vue3.2 setup 新用法，这些都需要你vite版本在2.5以上，才支持这些新用法<template> <div class="form"> <el-form ref="ruleForm" :model="allParams.params".

这里基本el-dialog大部分功能都集成了，主要注意的是before-close回调事件的注意props.beforeClose ? props.beforeClose(done) : done && done()这里是通过属性绑定的方式来回调beforeClose的，意思是你如果想使用此功能的话，就要在组件调用时，通过:before-close方式来， 常规的 确认按钮，通过 @confirm来调用，取消按钮不需要绑定时间，右上角关闭按钮，如果不想在这里做逻辑处理，只想关闭..

vue2及vue3.0版本下，单个或多个echart 可以直接在data里定义但是在vue3.2 setup下，多个echart 无法使用ref或者reactive 定义，因为echart实例化下无法访问到proxy代理里的数据，所以我们在设置 resize时，会爆出这样的问题，并且无法继续向下执行，所以我们 可以直接let echart0: any = null切记不要用const，不然无法重新赋值，也不要用ref或者reactive定义，因为拿不到proxy代理数据，所以我的做法是

在app.vue文件里vue2 的 mounted生命周期下 或 vue3的 onMounted生命周期下// 监听页面刷新前，将vuex数据存在本地window.addEventListener("beforeunload", () => { localStorage.setItem("stateInfo", JSON.stringify(this.$store.state));});// 刷新后，将本地对应数据替换到vuex，并将本地对应数据删除if (localStorag.

我这里只写父子/爷孙组件间方法调用（传值的那啥emit，on， eventbus我就不在这里写了）vue2中的写法爷组件控制孙组件的锚点跳转（父子组件间方法调用类似）// 孙组件<template> <div ref="item"></template>methods:{nav (index) { this.$refs.item[index].scrollIntoView(true) }]// 爷组件methods:{ .