随笔分类 -  vue

vue3 keepAlive缓存指定组件实现
摘要：最近遇到的实际应用场景：最外层的列表页需要缓存用户的筛选条件，最开始想到的就是使用keepAlive缓存组件，但是不能简单的外层套一个keepAlive,这样会使每个页面组件都缓存，但是当用户点击菜单时需要移除组件的缓存状态。这就是需要借助官方提供的两个 include实现，通过pinia管理需要缓 阅读全文
posted @ 2025-03-28 16:25 _只码农 阅读(83) 评论(0) 推荐(0)
Vue3 网站应用实现微信扫码登录功能
摘要：主要思路是调用接口获取重定向地址，并且需要进行UrlEncode，如果是内嵌在自己应用内，需要在页面上准备一个容器放置二维码。扫码后会跳转到重定向地址，此时路由会多几个参数，只需要监听路由参数的变化并触发对应方法即可。可参考官方文档 网站应用微信登录开发指南 下面是内置的方法步骤1：在index.h 阅读全文
posted @ 2024-03-19 15:45 _只码农 阅读(2605) 评论(0) 推荐(0)
完美实现按下鼠标移动元素功能
摘要：先上代码 1 const handleChangePosition = () => { 2 const element = canvasBox.value as HTMLDivElement; 3 let startX = 0, startY = 0, initialX = 0, initialY 阅读全文
posted @ 2024-01-18 15:39 _只码农 阅读(48) 评论(0) 推荐(0)
ElementPlus引入汉化文件报错踩坑
摘要：按照官网的方法引入zhCn import zhCn from 'element-plus/dist/locale/zh-cn.mjs' 编辑器报错：Could not find a declaration file for module 'element-plus/dist/locale/zh-cn 阅读全文
posted @ 2023-07-20 17:40 _只码农 阅读(1992) 评论(0) 推荐(0)
vue3+ts 报错 Cannot find module '../xxx/xxx.vue' or its corresponding type declarations(找不到对应的模块“@/views/xxx.vue”或其相应的类型声明)
摘要：解决方法在env.d.ts中加入下面代码 declare module '*.vue' { import { DefineComponent } from "vue" const component: DefineComponent<{}, {}, any> export default compo 阅读全文
posted @ 2023-06-05 15:59 _只码农 阅读(6467) 评论(0) 推荐(0)
vue3+ts 挂载全局过滤器函数及踩坑总结
摘要：VUE3中移除了 filter，可以用全局函数替代 const app = createApp(App) //挂载全局函数 app.config.globalProperties.$filters = { userTypeFilter(type:number):string { return typ 阅读全文
posted @ 2023-03-09 20:50 _只码农 阅读(1743) 评论(0) 推荐(0)
vue3监听路由变化
摘要：1.onBeforeRouteUpdate路由守卫 import { useRouter, onBeforeRouteUpdate } from 'vue-router' let route = useRouter() onBeforeRouteUpdate(to=>{ console.log('t 阅读全文
posted @ 2022-08-11 16:22 _只码农 阅读(3028) 评论(0) 推荐(0)
vue3中其他的改变
摘要：1.全局API的转移 2.x全局api(Vue) 3.x全局api(app) Vue.config.xxx app.config.xxx Vue.config.productionTip 移除 Vue.component app.component Vue.directive app.directi 阅读全文
posted @ 2021-12-22 16:13 _只码农 阅读(99) 评论(0) 推荐(0)
vue3中suspense的使用
摘要：1.作用：suspense在等待异步组件时额外渲染一些内容，使用户拥有更好的体验。 2.使用： 引入异步组件，Child需要在components里注册 import {defineAsyncComponent} from 'vue' // import demo from './component 阅读全文
posted @ 2021-12-22 15:34 _只码农 阅读(2780) 评论(0) 推荐(0)
vue3中teleport使用
摘要：<template> <!-- vue3中模版结构可以没有根标签 --> <div class="father"> <div class="child"> <teleport to='body'> <input type="text" v-model="keyword"> <h3>{{keyword 阅读全文
posted @ 2021-12-21 16:52 _只码农 阅读(277) 评论(0) 推荐(0)
vue3响应式数据判断
摘要：1.isRef：检查一个值是否为ref对象 2.isReactive：检查一个对象是否为reactive对象 3.isReadonly：检查一个对象是否为readOnly创建的只读代理 4.isProxy：检查一个对象是否由reactive和readonly创建的代理 阅读全文
posted @ 2021-12-21 16:24 _只码农 阅读(112) 评论(0) 推荐(0)
vue3 provide和inject
摘要：作用：实现祖孙组件之间的通信 实现：父组件中有一个provide选项来提供数据，后代组件中有一个inject选项来使用这些数据 1.祖组件中 import { provide} from 'vue' export default { name: 'App', setup(){ let testDat 阅读全文
posted @ 2021-12-21 16:21 _只码农 阅读(61) 评论(0) 推荐(0)
vue3 customRef
摘要：作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。 //自定义ref--myRef function myRef(value){ let timer return customRef((track,trigger)=>{ return { //return必写，官方要求必须返回 阅读全文
posted @ 2021-12-21 16:02 _只码农 阅读(110) 评论(0) 推荐(0)
vue3中toRef和toRefs，shallowRef和shallowReactive
摘要：toRef：创建一个ref对象，其value值指向对象的某个属性 语法： const name = toRef(person,'name') toRefs：作用同toRef，可以同时创建多个ref对象 应用：要将响应式对象中的某个属性单独给外部使用时 使用： 1.在页面中引入 import {rea 阅读全文
posted @ 2021-12-14 17:02 _只码农 阅读(212) 评论(0) 推荐(0)
vue3里watch和watchEffect的使用
摘要：1.在页面中引用watch import {reactive,watch, ref} from 'vue' 2.在setup函数中使用watch监听ref定义的数据 //监听ref所定义的一个数据 newValue改变后新数据，变化前的旧数据 watch(sum,(newValue,oldValue 阅读全文
posted @ 2021-12-13 16:14 _只码农 阅读(555) 评论(0) 推荐(0)
vue3中使用computed计算属性
摘要：1.引用computed 2.在setup中使用 上面是computed的简写，没有考虑计算属性修改的情况，只能读。 下面是computed的完整写法（读和写） 页面中使用： 阅读全文
posted @ 2021-12-07 16:23 _只码农 阅读(648) 评论(0) 推荐(0)