首页 > 其他分享 >Vue3 注册及使用全局方法

Vue3 注册及使用全局方法

时间:2024-09-24 11:34:42浏览次数:8  
标签:const popToast PopToast js vip 注册 Vue3 全局 isVip

一、背景

自己的一个考公网站,需求是 用户登录系统,但是用户去查看功能时要判断当前用户是否有是会员,如果不是会员,那么查看其他功能时需要弹窗说不是vip,如果是会员则可以直接查看。

二、实现

首先上截图。

  1.Vue3 全局注册方法 1.新建popToast.js
import Cookies from "js-cookie";

// 添加一个全局方法,将方法拦截,判断是否是vip
const isVip = Cookies.get("isVip");

const popToast = (fn, params) => {
	debugger
	if(isVip === 'false'){ // 非vip
		alert("不是vip")
	}else {
		fn(params)

	}
}

export default popToast
2.main.js
import PopToast from "@/components/utils/popToast";

app.config.globalProperties.$PopToast=PopToast
export default app;

3.在Vue文件

import context from "@/main" // 需要在前面main.js中导出app
const $PopToast = context.config.globalProperties.$PopToast;
@click="$PopToast(popDetailUrl,o)"

三、遇到的报错

四、参考博客

https://www.cnblogs.com/cosmicbison/p/17181730.html

标签:const,popToast,PopToast,js,vip,注册,Vue3,全局,isVip
From: https://www.cnblogs.com/lcaiqin/p/18428806

相关文章

  • MySQL主从复制中启用GTID(全局事务标识符)模式
    在MySQL中启用GTID(全局事务标识符)模式进行主从复制涉及几个步骤。GTID为每个事务赋予一个唯一的标识符,从而简化了复制过程和故障恢复。以下是启用GTID模式的基本步骤:首先确保两台数据库目前数据保持一致1.准备工作确保您使用的MySQL版本支持GTID。GTID从MySQL5.6版本开始支持......
  • React的useId,现在Vue3.5终于也有了!
    前言React在很早之前的版本中加了useId,用于生成唯一ID。在Vue3.5版本中,终于也有了期待已久的useId。这篇文章来带你搞清楚useId有哪些应用场景,以及他是如何实现的。关注公众号:【前端欧阳】,给自己一个进阶vue的机会useId的作用他的作用也是生成唯一ID,同一个Vue应用里面每次调用......
  • 申请注册商标为何要多准备些名称!
    经常遇到有的企业就准备一个名称申请注册下来商标,也有这种可能,但是相对比较小,基本上都有近似名称,截至今年6月,我国国内有效注册商标量达到4590.9万件,平均每4个经营主体就拥有1件有效商标。据普推知产商标老杨的经验,商标名称两三个字基本上都有近似,在没有通用字词组合下,差不多......
  • vue3.0使用v-md-editor预览markdown文件
    1.安装依赖npmi@kangc/v-md-editor-S2.在main.js文件中引用注册组件import{createApp}from'vue';//预览组件以及样式importVMdPreviewfrom'@kangc/v-md-editor/lib/preview';import'@kangc/v-md-editor/lib/style/preview.css';importgithubThe......
  • Python中的全局变量
    在本文章中,我们来讨论一下python中的全局变量,我们将学习如何定义全局变量,然后如何在函数中访问它们,以及如何在函数中修改全局变量的值。全局变量:python的代码结构一般按照shebang、import模块、全局变量、函数定义、执行代码的顺序进行编写,可以看出全局变量的定义处于比较靠......
  • 前后端分离Vue3+SpringBoot社团活动报名管理系统
    目录功能和开发技术介绍具体实现截图开发核心技术介绍:技术创新点vue3和vue2的区别:核心代码部分展示非功能需求分析系统开发流程系统运行步骤软件测试源码获取功能和开发技术介绍本课题拟采用主流的MVC架构、开发工具idea、java语言编程、MySQL数据库技术、Vue.js技......
  • Rosetta 二:手把手教你用Rosetta的全局对接模块
    文章目录1.跟着官网下载2.跟着官网的样例做对接1.导航到配体文件夹2.准备受体2.1先导航到蛋白受体文件夹2.2下载3BLP的pdb文件并用clean_pdb.py脚本预处理蛋白质2.3把处理好的蛋白放到docking文件夹3.准备配体参数3.1导航到ligand_prep3.2配体文件3.分析......
  • vue3常用的组件间通信
    一propsprops可以实现父子组件通信,props数据是只读。1.基本用法在父组件中,你可以这样传递props:<template><ChildComponentmessage="Hello,Vue3!"/></template><scriptsetup>importChildComponentfrom'./ChildComponent.vue';</scrip......
  • 查询 B 站注册时间
    有时候想看看自己玩B站多少年了,想知道自己什么时候注册的。此外,据说注销B站账户的话也得提供详细注册日期。‍通过创作中心查看登录网页版B站,点击右上角的创作中心,然后就能看到在B站多少天了:​‍‍然后可以找一些在线工具进行计算,例如https://calcdate.buyaocha.......
  • 要优化WiFi 7无线网卡的性能,可以通过调整注册表来实现。下面是一些常见的优化设置,可以
    要优化WiFi7无线网卡的性能,可以通过调整注册表来实现。下面是一些常见的优化设置,可以将其保存为.reg文件:CopyCodeWindowsRegistryEditorVersion5.00;优化WiFi7无线网卡设置[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters]"TcpAckFreque......