uniapp中全局页面挂载组件(H5)

news2024/11/20 21:28:39

前言 我们已经学习了
uniapp中全局页面挂载组件(小程序)
有些小伙伴问在H5怎么做那让我们试一试

直接上代码

//引用组件
import dialog from './index.vue';
//我这里要把小程序的方法和h5方法写一起所以用了混入
import mixins from './mixins.js'
//使用Vue构造器
const DialogConstructor = Vue.extend(dialog)
//创建组件的Dom
let DialogConstructorDom = {
	el: document.createElement('div'),
	...mixins//将方法放入到dom中
}
//生成已经创建的实例
let hsDialogDom = new DialogConstructor(DialogConstructorDom)
//利用原生dom方法,将dom插入到body中
document.body.appendChild(hsDialogDom.$el)
//调用组件中的方法
hsDialogDom.open()// 这个就是组件里的方法

1.其实就是使用Vue的extend创建一个“子类”
2.然后把相关参数(挂载到哪个元素上、相应的方法、参数等等)、new之后就生成了一个实例
3.将dom插入到页面中某个元素上
4.然后后面可以调用组件的方法

Vue.extend方法官方文档
官方的文档使用的是另一种方法挂载到某个元素上 其实都是可以的
在这里插入图片描述

结合这个方法可以同时插入到小程序和H5页面上

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

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

相关文章

OJ项目【登录】——验证码、失败登录多次账户冻结、用户密码加密,我是如何实现的?

目录 前言 1、验证码 1.1、引入pom 1.2、前端核心代码 1.3、后端核心代码 2、账户冻结 2.1、思路: 2.2、核心代码示例: 3、密码加密——加盐算法 3.1、思路: 3.2、代码实现示例: 4、小结:展示我的项目 4…

[牛客习题]“幸运的袋子”

习题链接:幸运的袋子_牛客题霸_牛客网 题目分析 由题意可知:“幸运的袋子”的概念是——小球的数值之和大于小球的数值之积。 假如现在有5个小球:1,1,3,5,7,并将他们编号a0~a4.我们…

Vue项目路由加前缀

Vue项目路由加前缀 vue-cli3.0配置 1)静态资源前缀 vue.config.js /module.exports 配置 publicPath:“/前缀” 2)路由前缀 route/index.js export default new Router({ base:”/前缀" , }) 参考文章:https://blog.csd…

【Java学习之道】网络编程的基本概念

引言 这一章我们将一同进入网络编程的世界。在开始学习网络编程之前,我们需要先了解一些基本概念。那么,我们就从“什么是网络编程”这个问题开始吧。 一、网络编程的基本概念 1.1 什么是网络编程 网络编程,顾名思义,就是利用…

netca_crypto.dll找不到怎么修复?详细解决办法和注意事项

当你在使用计算机时,突然出现了一个错误提示:“netca_crypto.dll 找不到”。不知道该如何解决这个问题?其实要解决是非常的简单的,今天我们将为你提供几种修复 netca_crypto.dll 找不到的解决方法和一些注意事项。在深入探讨修复方…

普通螺纹基本牙型尺寸及拧紧力矩.exe

一、概要 本软件功能主要是通过输入螺纹原始三角形高度P,螺栓规格(公称直径)d,材料的屈服应力σs,计算出公称应力截面积As、外螺纹小径d1、外螺纹小径d2、拧紧力矩T等参数。 开发本软件的原因主要有以下几点: 提高设计效率:通过这款软件,工程师可以快速计算螺纹的基本牙…

转行网络安全是否可行?

一、前言 其实很多的IT大佬之前也不是专门学计算机的,都是后期转行的。而且大学学什么专业,对后期的工作真的没有太大关系,这也是现在高校的教育现状。有80%的学生都是通过临时抱佛脚,考前冲刺拿到毕业证书的。下面就带大家详细分…

2023年淘宝天猫双11红包领取活时间什么时候开始领天猫淘宝双十一红包优惠券?

2023年淘宝天猫双11红包领取活动开始与结束时间 2023年10月24日20:00开始领取至11月11日23:59结束; 2023年淘宝天猫双11红包活动使用开始与结束时间 第一波:2023年10月31日20:00开始使用至11月3日23:59 第二波:2023年11月10日20:00开始使用…

服务安全-应用协议rsync未授权ssh漏洞复现

目录 服务攻防-应用协议rsync&ssh漏洞复现漏洞复现配置不当-未授权访问-rsync文件备份OpenSSH 用户名枚举漏洞libssh身份验证绕过漏洞 服务攻防-应用协议rsync&ssh漏洞复现 漏洞复现 配置不当-未授权访问-rsync文件备份 rsync默认端口:873 rsync是Linux下…

代码随想录Day20 回溯算法 LeetCode77 组合问题

以下内容更详细解释来自于:代码随想录 (programmercarl.com) 1.回溯算法理论基础 回溯法也叫回溯搜索法,是搜索法的一种,我们之前在二叉树中也经常使用到回溯来解决问题,其实有递归就有回溯,有的时候回溯隐藏在递归之下,我们不容易发觉,今天我们来详细介绍一下什么是回溯,它能…

深圳寄包裹到德国

深圳,作为全球最发达的城市之一,以其高效的物流服务在全球范围内享有盛名。如果你正在寻找一种方式将包裹从深圳寄送到德国,那么本文将为你提供详细的步骤和建议。 第一步:了解国际邮寄的基本信息 首先,你需要了解包裹…

10.16课上

煎饼排序 第一步找剩余数组里的最大值&#xff0c;然后从头到这里翻转一次&#xff0c;这样最大值就到了开头&#xff0c;再把开头从当前结尾翻转一次&#xff0c;就把当前的最大值翻转到了最后 class Solution { public:vector<int> pancakeSort(vector<int>&am…

吃瓜教程-模型的评估与选择

在训练集上的误差称为训练误差&#xff08;training error&#xff09;或经验误差&#xff08;empirical error&#xff09;。在测试集上的误差称为测试误差&#xff08;test error&#xff09;。学习器在所有新样本上的误差称为泛化误差&#xff08;generalization error&…

Apipost一键压测已支持导入CSV文件

最近更新中Apipost对UI页面进行了一些调整&#xff0c;另外一键压测功能支持参数化&#xff01;本篇文章将详细介绍这些改动&#xff01; API调试页面的细节改动 在请求区填入请求参数或脚本时会有相应的标识 如在Query中填入多个参数时上方会展示数量 在预、后执行脚本中写…

Vue3.0 项目结构及组件

main.js文件 // vue中main.js的作用 // main.js是项目的入口文件&#xff0c;项目中所有的页面都会加载main.js,所以main.js,主要有三个作用&#xff1a; // 1.实例化Vue。 // 2.放置项目中经常会用到的插件和CSS样式。例如&#xff1a; 网络请求插件:axios和vue-resource、图…

vue小写数字转大写-例如:11转为十一

vue小写数字转大写-例如&#xff1a;11转为十一 在Vue中&#xff0c;可以使用自定义过滤器&#xff08;Custom Filter&#xff09;来将数字转换为大写的形式。 下面是一个示例&#xff1a; // main.js import Vue from vue;Vue.filter(toChineseNumber, function (value) {c…

2.3 初探Hadoop世界

文章目录 零、学习目标一、导入新课二、新课讲解&#xff08;一&#xff09;Hadoop的前世今生1、Google处理大数据三大技术2、Hadoop如何诞生3、Hadoop主要发展历程 &#xff08;二&#xff09;Hadoop的优势1、扩容能力强2、成本低3、高效率4、可靠性5、高容错性 &#xff08;三…

Bitquiz重塑Learn to Earn热潮,用户零投入让学习创造价值

Axie 带来的暴富效应、StepN 带来的出圈效应&#xff0c;近期Bigtime 在熊市中的大火&#xff0c;为加密参与者带来的赚取效应&#xff0c;X to Earn 重新成为整个市场关注的重点&#xff0c;GameFi 再次站在了风口浪尖。 大家开始寻找下一个Bigtime&#xff0c;希望能够抓住一…

设计模式_迭代器模式

迭代器模式 介绍 设计模式定义案例迭代器模式行为型&#xff1a;关注对象与行为的分离 提供了一种统一的方式来访问多个不同的集合两个集合&#xff1a;使用了不同的数据存储方式 学生 和 警察 查询显示出集合的内容 &#xff0c;使用相同的代码 问题堆积在哪里解决办法不同…

在IE浏览器下fixed定位容器随着滚动条出现抖动问题(实测有效)

在ie浏览器下使用fixed定位的容器随着滚动条滚动出现晃动&#xff0c;这种问题比较常见&#xff0c;以下我们给两个解决方案。 方案一 把滑动滚动取消 方案二 在vue组件的created生命周期中添加此代码 document.addEventListener(wheel,function(event) {event.preventDefa…