qq_37899792的博客

原创 vue树形组件封装（移动端）

最近在做移动端的项目，由于没有找见移动端树形组件，所以封装了一个。包含加载所有数据的功能以及懒加载功能。以下是目录结构以下是完成后的ui 点击左侧切换“展开”、“收起” 点击右侧其他操作然后直接上代码以下是懒加载的例子，一次性全部加载的就不放了组件说明：* 组件说明：树形组件 itemActive:是否需要高亮显示 Boolean data:...

原创 el-from表单 点击enter键时 触发搜索

el-from表单加上 @keyup.enter.native 可以让表单中的所有form-item在点击enter键时，触发搜索。

原创 vue项目中定时器无法清除

路由切换过快的时候，切换到了其他页面（page2,page3...）时，当前页面（page1）的beforeDestroy函数已经触发了，但是当前页面（page1）的定时器还没有触发。当切换到其他页面（page2,page3...）的时候，当前页面（page1）的定时器才执行。) 的定时器是在一系列前置请求之后，才触发的。【此定时器前面有一堆请求，等这堆请求完成之后，定时器才会被触发】如果是当前的路由名称，才开始执行定时器。当前页面有定时器，并且定时器在离开页面时，有清除。当前页面 (假设当前页面为。

原创 vue3使用pinia-plugin-persistedstate 持久化不生效的问题

【即使以前生效的，在这里定义以下，也会失效。得写到路由拦截器里面才行】如下图所示，需要在路由拦截器里面写。

原创 vue3+element Plus+ts 自定义主题色，以及生成主题色各种透明度

本篇文章的主体思路是从element Plus官网引申而来

原创 vue3：28— Vue 2 对 Vue 3 的所有非兼容性改变。（vue3学习笔记终）

......更多内容请点击上面链接，到官网查看。

原创 vue3：27—全局API转移到应用对象

【代码】vue3：27—全局API转移到应用对象。

原创 vue3：26—新的内置组件

元素定位发生错误，即不再相对 viewport 进行定位，而是相对整个filter属性的容器元素(父元素)进行定位。这个时候就需要用到teleport了。使用 Suspense 包裹组件，并配置好default 与 fallback。Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。等待异步组件时渲染一些额外内容，让应用有更好的用户体验。滤镜属性的时候，会导致内部。什么是Teleport?当在元素中的css使用了。

原创 vue3：25—其他API

shallowRefshallowRef:：只能修改第一层数据下图代码中。changeName和changeAge不起作用shallowReactive：只能修改第一层数据。

原创 vue3：24—组件通信方式

1. pubsub2. $bus3. mitt接收数据的:提前绑定好事件(提前订阅消息)提供数据的:在合适的时候触发事件发布消息)安装mitt//调用mitt得到emitter,emitter能绑事件、触发事件/*** //绑定事件console.log('被调用')})//触发事件},1000)emitter.all.clear()//全部解绑},3000)*/子组件中单独引入使用。【另一种方法时：添加到全局变量中，也是可以的，这里只单独引入了一下】

原创 vue3：23—自定义hooks

具备可复用功能，才需要抽离为 hooks 独立文件函数名/文件名以 use 开头，形如: useXX引用时将响应式变量或者方法显式解构暴露出来；

原创 找不到模块“vue-router”或其相应的类型声明。ts(2307)

然后选择“Extensions：Show Built-in Extensions”。step4：禁用（工作区） 【Disable (Workspace)】step3：在插件搜索框内输入。

原创 element-ui el-table中根据按钮的多少来计算操作栏的宽度以及根据显示按钮的数量动态计算是否需要展示更多

【代码】element-ui el-table中根据按钮的多少来计算操作栏的宽度。

原创 基于 Element UI 适用于 Vue 2 版本的虚拟列表选择器组件el-select

基于 Element UI 适用于 Vue 2 版本的虚拟列表选择器组件。

原创 ipv4正则和ipv6正则

斯蒂芬·瑞恩（Stephen Ryan）写了一个非常有用的正则表达式，可用于匹配任何一个合法的IPv6地址。以下为正则表达式的代码。

原创 vue2中render函数学习思维导图

vue2之render+jsx从细节入手，彻底掌握。

原创 publicPath：打包时的配置

vue项目，执行打包命令后，会在项目的根目录中自动创建一个文件夹。,dist中的文件就是打包后的文件，只需要放到服务器中即可。【默认情况下，用的绝对路径，需要放到服务器的根目录打开。经过 publicPath：'./' 配置之后。默认情况下打包后的index.html引入情况如下。

原创 vue3:23、vue2到vue3的变化

同一元素上使用的v-if和v-for优先级已更改，但不推荐同时使用v-if和v-for 组件事件需要在emits选项中声明 destroyed 生命周期选项被重命名为 unmounted beforeDestroy生命周期选项被重命名为beforeUnmount 自定义指令的API已更改为与组件生命周期一致 新增了三个组件:Fragment支持多个根节点、Suspense可以在组件渲染之前的等待时间显示指定内容 Teleport可以让子组件能够在视觉上跳出父组件(如父组件overflow:hidd

原创 vueuse里的useElementVisibility

【代码】vueuse里的useElementVisibility。

原创 使用 nvm管理 node.js【以及nodejs不同版本下载地址】

node.js不同版本下载地址：

原创 vue3：22、vue-router的使用

【代码】vue3：22、vue-router的使用。

原创 vue3：21、配置代码检查工作流(husky)

pnpm安装lint-staged。pnpm安装husky-init。配置package.json。修改husky的配置。

原创 vue3：20、Eslint配合Prettier完成代码风格配置

【代码】vue3：20、Eslint配合Prettier完成代码风格配置。

原创 vue3：19、pnmp（包管理器）

原创 vue3：18、Pinia持久化（pinia-plugin-persistedstate）

main.js中引入。

原创 vue3：17、Pinia的storeToRefs

在组件中解构store中的数据时，数据会丢失响应式。此时需要用到storeToRefs。

原创 vue3：16、Pinia的基本语法

【代码】vue3：16、Pinia的基本语法。

原创 vue3：15、手动添加Pinia到vue项目

原创 vue3：14、Pinia(vuex的替代品)

原创 vue3：13、Vue3.3新特性-defineModel

旧版本的语法新版本语法。

原创 vue3：12、Vue3.3新特性-defineOptions 【Vue3如何给组件命名】

在vite.config.js里配置script里定义组件的名称。

原创 vue3：11、provide和inject

原创 vue3：10、组合式API-标签的ref属性和defineExpose宏函数

【代码】vue3：10、组合式API-模板引用和defineExpose宏函数。

原创 vue3：9、组合式API-父子通信 宏函数defineProps

vue3中宏函数可以不用引入 【define...】

原创 vue3：8、组合式API-生命周期函数

生命周期整体分为四个阶段，分别是:创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。注意：vue是先加载子组件，再加载父组件。App.vue总是最后挂载的。

原创 vue3：7、组合式API-watch和watchEffect

点我sum+1

原创 vue3：6、组合式API-computed

【代码】vue3：6、组合式API-computed。

原创 vue3：5、组合式API-reactive和ref函数(vscode通过volar插件自动添加.value)

【代码】vue3：5、组合式API-reactive和ref函数。

原创 vue3：4、组合式API-拉开序幕的setup

使用 语法糖（底层帮你return了）setup每次都要return，好麻烦。

原创 vue3：3、项目目录和关键文件

关于vsvode的更改。