vue.extend解决vue页面转构造函数暴露js供全局使用

 用途: 解决在一些微前端项目中, B工程使用A工程的弹窗代码

// MaterialListPlugin.js文件, 在项目入口引入
// eg: 在main.js中添加一行 import '@/components/MaterialListPlugin.js'import Vue from 'vue'
import MaterialListPlugin from '@/components/MaterialListPlugin.vue' // 简单的弹窗示例function showDialog(options) {const Dialog = Vue.extend(MaterialListPlugin)const app = new Dialog().$mount(document.createElement('div'))// options:{} 绑定this中的属性for (const key in options) {app[key] = options[key]}document.body.appendChild(app.$el) //注入htmlreturn app // 返回实例以供页面调用
}Vue.prototype.$MyMaterial = showDialog

页面调用: this.$MyMaterial().onShow() // onShow是vue页面的方法, 唤起弹窗的

// MaterialListPlugin.vue文件 (简单的弹窗示例)
<template><my-dialog :visible="dialogShow"><div class="my-dialog-content">// 弹窗内容</div><template v-slot:footer><t-button @click="onHide">取消</t-button><t-button @click="onConfirm">确认</t-button></template></my-dialog>
</template><script>
export default {name: 'materialWordPlugin',data() {return {dialogShow: false,}},methods: {// 弹窗显示onShow() {this.dialogShow = true},// 弹窗隐藏onHide() {this.dialogShow = false},// 确定按钮onConfirm() {this.onHide()},},
}
</script>

参考: Vue中Vue.extend()的使用及解析_vue.js_脚本之家

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/30003.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电脑丢失dll文件一键修复的方法有哪些?分析dll文件修复的多种策略

我们经常会遇到各种各样的问题&#xff0c;其中之一就是DLL文件的丢失。DLL文件&#xff08;动态链接库&#xff09;是操作系统和应用程序正常运行所必需的文件&#xff0c;当这些文件丢失或损坏时&#xff0c;可能会导致软件无法正常启动&#xff0c;甚至影响系统的稳定性。对…

SpringMVC系列二: 请求方式介绍

RequestMapping &#x1f49e;基本使用&#x1f49e;RequestMapping注解其它使用方式可以修饰类和方法可以指定请求方式可以指定params和headers支持简单表达式支持Ant 风格资源地址配合PathVariable 映射 URL 绑定的占位符注意事项和使用细节课后作业 上一讲, 我们学习的是Spr…

植物大战僵尸杂交版2024最新手机版下载!功能全面升级,战斗更刺激!

植物大战僵尸杂交版2024——让游戏更加有趣&#xff01; 嘿&#xff0c;各位游戏爱好者们&#xff01;&#x1f31f;今天我要给你们介绍的是一个全新版本的植物大战僵尸——植物大战僵尸杂交版2024。这款游戏不仅保留了原版的经典元素&#xff0c;还增加了许多新的特性和玩法&a…

操作系统 大作业

1、现有成绩文件按“姓名 学校 年级 班级 分数”五列组成&#xff0c;编写Shell脚本&#xff0c;将某目录下所有成绩文件&#xff08;≥3个&#xff09;合并为一个&#xff0c;形成“姓名 班级 分数”三列&#xff0c;并按成绩排序&#xff0c;输出年级排名前十。同时输出60以下…

实现一个渐进优化的 Linux cp 命令

1&#xff0c;第1版 copy 先写个轮廓 selfcp.c &#xff1a; #include <stdio.h>int main() {FILE *source, *destination;char ch;source fopen("H222.txt", "r");if (source NULL) {printf("Error opening source file!\n");retur…

8.华为两台交换机的三种连接方式access 、trunk、undo portswitch

目的&#xff1a;两台三层交换机的三种连接方式 1.access 2.trunk 3.undo portswitch 模拟机不支持此配置&#xff0c;实体机支持 第一种access CE1配置 [~HUAWEI]vlan batch 10 [~HUAWEI]int Vlanif 10 [~HUAWEI-Vlanif10]ip add 10.10.10.1 24 [~HUAWEI]int g1/0/0 [~HUAWE…

Web前端连接Redis:深入探索、实践挑战与未来展望

Web前端连接Redis&#xff1a;深入探索、实践挑战与未来展望 在当今日益复杂且多变的网络环境中&#xff0c;Web前端与后端数据库的交互方式正在经历着前所未有的变革。其中&#xff0c;Redis作为一种高性能、开源的键值存储系统&#xff0c;逐渐成为了前端开发者的新宠。然而…

小马识途营销顾问谈小红书平台运营推广策略

近年来&#xff0c;互联网平台层出不穷&#xff0c;小红书作为大多数年轻女性比较喜欢使用的软件之一&#xff0c;拥有很高的流量&#xff0c;目前已经成为网络推广渠道中商品的一个重要营销阵地。很多的品牌开始利用小红书平台做推广&#xff0c;那么如何运营小红书?是否投放…

卫士通电科网安安全IpSec网关Ukey开发对接

官方公开的开发文档&#xff0c;有几个坑&#xff0c;着重说一下踩坑的记录过程。 1、通过官方的客户端接口模拟程序获取前端参数&#xff1a;随机数和token 2、java程序调用官方sdk&#xff0c;postman请求测试&#xff1a; 3、贴出关键的java集成类&#xff1a; import cn.h…

shell脚本 函数

函数 shell的函数 定义&#xff1a;将命令序列按照格式写在一起。格式指的是函数的固定格式。两种格式。 for i in {} do 命令序列 done if [ ] then 命令序列 fi 作用&#xff1a;方便重复使用。函数库&#xff0c;集中在一起&#xff0c;随时可以传参调用。大的工…

Spring延迟Bean的初始化

在Spring中&#xff0c;ApplicationContext默认会在容器初始化时创建并配置所有定义为单例&#xff08;Singleton&#xff09;的Bean。这有助于在应用程序启动时立即发现任何配置错误或依赖问题。然而&#xff0c;在某些情况下&#xff0c;你可能希望延迟Bean的初始化&#xff…

pause 容器

概述 通过容器资源隔离的原理中知道容器之间是通过 NameSpace 和 cgroups 隔离开的&#xff0c;但是 pod 中的网络和存储却是共享的. kubernetes 为了解决网络共享问题&#xff0c;引入了 pause 容器&#xff0c;又叫Infra容器&#xff0c;在kubelet的配置中有KUBELET_POD_IN…

Vim和Nano简介

**Vim**&#xff1a; - Vim 是一个文本编辑器&#xff0c;它是 Vi 编辑器的一个改进版本&#xff0c;Vi 编辑器最初由 Bill Joy 在1976年为 BSD Unix 开发。 - Vim 由 Bram Moolenaar 开发&#xff0c;其第一个版本在1991年发布。Vim 的设计理念是“持继改进”&#xff0c;它的…

SpringMVC系列五: SpringMVC映射请求数据

SpringMVC映射请求数据 &#x1f49e;获取参数值说明应用实例 &#x1f49e;获取http请求消息头&#x1f49e;获取JavaBean对象使用场景说明应用实例注意事项和细节 &#x1f49e;获取servlet api说明应用实例注意事项和细节 上一讲, 我们学习的是SpringMVC系列四: Rest-优雅的…

VUE 项目用 Docker+Nginx进行打包部署

一、Docker Docker 是一个容器化平台&#xff0c;允许你将应用程序及其依赖项打包在容器中。使用 Docker&#xff0c;你可以创建一个包含 Vue.js 应用程序的容器镜像&#xff0c;并在任何支持 Docker 的环境中运行该镜像。 二、Nginx Nginx 是一个高性能的 HTTP 服务器和反向…

Eureka 学习笔记(1)

一 、contextInitialized() eureka-core里面&#xff0c;监听器的执行初始化的方法&#xff0c;是contextInitialized()方法&#xff0c;这个方法就是整个eureka-server启动初始化的一个入口。 Overridepublic void contextInitialized(ServletContextEvent event) {try {init…

React useRef 组件内及组件传参使用

保存变量&#xff0c; 改变不引起渲染 import { useRef} from react; const dataRef useRef(null) ... dataRef.current setTimeout(()>console.log(...),1000)绑定dom const inputRef useRef(null) <input ref {inputRef} />绑定dom列表 - ref 回调 const ite…

无声短视频:成都柏煜文化传媒有限公司

无声短视频&#xff1a;视觉艺术的独特魅力 在数字化时代的浪潮中&#xff0c;短视频以其简短、直观、易于传播的特点迅速崛起&#xff0c;成为当下最热门的媒体形式之一。而在众多的短视频类型中&#xff0c;无声短视频以其独特的视觉表达方式&#xff0c;逐渐吸引了越来越多…

mysql竖表变横表不含聚合

文章目录 前言一、vertical_table二、转换1.要将其转换为横表形式&#xff0c;例如&#xff1a;2.sql 总结 前言 在MySQL中将竖表转换为横表&#xff08;也称为行转列操作&#xff09;&#xff0c;不涉及聚合函数&#xff0c;通常可以通过使用条件判断和自连接来实现。假设有一…

Intelij IDEA中Mapper.xml无法构建到资源目录的问题

问题场景&#xff1a; 在尝试把原本在eclipse上的Java Web项目转移至Intelij idea上时&#xff0c;在配置文件均与eclipse一致的情况下出现了如下报错&#xff1a; org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): cn.umbrella.crm_core.…