随笔分类 - Vue3
Vue3 注册及使用全局方法
摘要：一、背景 自己的一个考公网站，需求是 用户登录系统，但是用户去查看功能时要判断当前用户是否有是会员，如果不是会员，那么查看其他功能时需要弹窗说不是vip,如果是会员则可以直接查看。 二、实现 首先上截图。 1.Vue3 全局注册方法 1.新建popToast.js import Cookies fr
vue3 全屏
摘要：<template> <button @click="toggleFullScreen">Toggle Full Screen</button> </template> <script setup> import { ref } from 'vue'; const isFullScreen = re
Vue 3组件中监听浏览器窗口的大小变化
摘要：const windowWidth = ref(window.innerWidth); onMounted(() => { // 在组件挂载后检查屏幕大小 // 添加事件监听，以便在屏幕大小变化时更新条件 window.addEventListener('resize', checkScreenSi
vue3 双向绑定 dialog
摘要：父组件: <ViewPopupForm v-model="isView"/> 如果不行就 <ViewPopupForm :isView="isView"/> 子组件： const emit = defineEmits(['update:modelValue']) const props = defi
Vue3 的 provide / inject 使用[爷孙通信]
摘要：在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导入 provide/inject 方法。 provide 和 inject 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只
vue3 父子组件双向绑定
摘要：父组件 ParentComponent.vue <!-- ParentComponent.vue --> <template> <div> 子组件输入的数据 <p>Parent Value: {{ parentValue }}</p> 父输入框 <input v-model="parentValue
vue2和vue3自定义指令实现只读模式，禁止用户编辑
摘要：解决代码表单组件大量disable的麻烦，实现只读。只需要在需要的地方加上v-read-only即可达到只读效果，快捷方便。 实现思路 父元素下添加一个遮罩层元素 遮罩层元素的显示隐藏由参数决定 要想简单快捷的实现，最好用的就是写一个遮罩层，通过遮罩来隔绝用户的操作。 原始代码如下： <templa
vue3父组件 调用子组件 方法
摘要：父组件：通过ref获取子组件实例 <template> <div style="text-align:center"> <button @click="callChildMethod">点击获取子组件数据</button> <div> 获取到子组件的数据如下: <div> {{childData}}
Vue3 子【emit 】传父【监听】
摘要：<!-- 父组件 --> <template> <h1>I am ParentComponent</h1> <ChildComponent @child-click="zCf"/> <h2>{{ x }}</h2> </template> <script setup> import ChildCom
vue3 父组件【属性】传值给子组件【props】接收
摘要：父组件文件：parentcomponent.vue 子组件文件：childcomponent.vue 传普通值 传动态值 传对象 传数组 <!-- 父组件 --> <template> <h1>I am ParentComponent</h1> <ChildComponent msg="nice"/
Vue3 使用Element-plus table 显示一行 需要内嵌多行数据
摘要：一、背景 业务需求 需要这种 二、实现 `` 点击查看代码 <el-table ref="singleTableRef" highlight-current-row border :data="state.personData" class="data-table" max-height="600"
Vue3 模版常用语法
摘要：一、背景 二、实现 仅支持表达式 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} {{ author.books.length > 0 ? 'Yes' : 'No' }} <div
vue3 watch 多个值
摘要：1 watch([() => baTable.form.items!.userType, () => baTable.form.items!.totalUsage, () => baTable.form.items!.payCurr], (newValue, oldValue) => { 2 //
