随笔分类 - Vue
vue3 类组件装饰器模式配置
摘要：2024年10月31日 vue3 支持装饰器模式插件 借助插件vue-facing-decorator实现类组件装饰器转换 npm install --save-dev vue-facing-decorator @rollup/plugin-babel @babel/plugin-proposal-
varlet库loading组件模版使用转函数式调用方法
摘要：2024年5月8日10:34:19 varlet库loading组件模版使用转函数式调用方法 鉴于在H5中varlet.Snackbar在axios请求封装函数中总是会产生阻塞现象问题，而varlet.loading又不能函数式调用。 // loading.vue <script lang="ts"
vue3控制台打印Cannot access 'xxx' before initialization错误
摘要：2024年3月18日20:25:22 Cannot access 'xxx' before initialization watchEffect里收集了函数依赖，而变量形式函数定义在watchEffect之后时，控制台报错 Cannot access 'xxx' before initializat
vue3 v3-easyui messager消息框封装
摘要：2024年1月7日21:38:30 关于messager消息框封装，官方文档漏了很多配置（例如tip），由于无法通过某个属性控制显隐，所以不能封装成组件的形式在模板使用，而且也不符合消息框的使用设想。例如封装好后在网络请求调用，就不能是组件形式，所以通过类似hook函数封装。封装如下： /** me
vue3 v3-easyui dialog没有属性控制显隐，自动显示的问题
摘要：2024年1月7日21:11:37 vue3 v3-easyui中dialog没有属性控制显隐的问题 网上都是通过v-if或是v-show，个人感觉不优雅，通过观察源码得知dialog.closedState属性可以控制，v3-easyui源码如下： 个人封装代码如下： /** modal.vue
ref回调形式的模版引用
摘要：2023年11月30日11:41:02 ref回调形式的模版引用 掉坑里，记录下。v-for 循环拿取 ref 模版引用两种保险方式 <template> <a-form> <a-form-item v-for='(f, idx) in formField' :key='idx'> <templat
记一次业务监控流flv播放的封装
摘要：2023年11月27日20:31:09 记一次业务监控流flv播放的封装 vue3封装flvjs，用于监控流。包括：判断可播放、推流、停流、播放、销毁功能。 /** useRender.ts */ import flvjs from "flv.js"; import type FlvJs from
defineExpose失效的问题
摘要：2023年11月15日22:08:11 记录下vue3在setup语法糖下defineExpose失效的问题 父子组件都使用setup语法糖的情况下，子组件defineExpose导出方法后，父组件通过 childRef.value?.closeRegionCamera() 调用子组件方法出现 un
vue九宫格播放
摘要：2023年9月12日22:09:19 vue实现九宫格自适应播放 业务要实现九宫格的播放，同时也要做到拖拽放大的自适应，两种思路方法，一种是通过九宫格播放容器的宽高进行单元格尺寸的计算再搭配flex等css实现自适应，工作量较大；第二种是通过ui组件库自带的grid布局，这里用ant-design-
vue3同一页面内重复引用同一操作dom的组件产生的问题
摘要：2023年8月28日12:39:40 vue3同一页面内标签<component>重复引用同一组件，且该组件内使用css选择器进行dom操作导致页面内相同组件发生变化的问题解决记录 组件内进行dom操作，需要通过js方法进行选择器的元素获取，但当vue3全部渲染完毕后，页面内有多个id为test9的
Vue3之ref取render形式组件jsx元素节点
摘要：2023年7月28日22:16:06 ref 取 render 方式组件节点 一开始注意到组件 setup 和 render 一起使用的情况，好奇怎么通过 ref 取到 render 中 jsx 里的节点，一开始试了以下的尝试，结果是 undefined 的： import { defineComp
