当前位置: 首页 > news >正文

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

前言 我们已经学习了
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页面上

相关文章:

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

前言 我们已经学习了 uniapp中全局页面挂载组件(小程序) 有些小伙伴问在H5怎么做那让我们试一试 直接上代码 //引用组件 import dialog from ./index.vue; //我这里要把小程序的方法和h5方法写一起所以用了混入 import mixins from ./mixins.js //使用…...

设计模式(1)-设计模式前置基础知识

1,设计模式概述 1.1 软件设计模式的产生背景 "设计模式"最初并不是出现在软件设计中,而是被用于建筑领域的设计中。 1977年美国著名建筑大师、加利福尼亚大学伯克利分校环境结构中心主任克里斯托夫亚历山大(Christopher Alexand…...

【05】基础知识:React组件实例三大核心属性 - props

一、props 了解 理解 1、每个组件对象都会有 props(properties的简写)属性 2、组件标签的所有属性都保存在 props 中 作用 通过标签属性从组件外向组件内传递变化的数据 注意 组件内部不要修改 props 数据 二、案例 需求:自定义用来…...

JOSEF约瑟 漏电继电器 JD1-200 工作电压:380V 孔径:45mm 50~500mA

JD1系列漏电继电器 系列型号 JD1-100漏电继电器 JD1-200漏电继电器 JD1-250漏电继电器 JD1系列漏电继电器原为分体式固定式安装,为适应现行安装场合需要,上海约瑟继电器厂在产品原JD1一体式漏电继电器基础上进行产品升级,开发出现在较为…...

[题] 差分矩阵 #差分

题目 差分矩阵 题解 只有一个操作: void insert(int x1, int y1, int x2, int y2, int c){b[x1][y1] c;b[x2 1][y1] - c;b[x1][y2 1] - c;b[x2 1][y2 1] c; }利用差分的思想,扩展到二维上。 insert函数作用是将矩阵之内的数全部加上c,…...

Studio One6.5最新版本新增了对Linux的支持

音乐制作人们,这是你们翘首以待的消息。数字音频工作站(DAW)已经成为音乐制作专业人士重要工具之一。 遗憾的是,对于 Linux 用户而言,选择十分有限。最受欢迎的选择通常是开源 DAW,如 Ardour、Audacity和闭…...

大模型引发“暴力计算”,巨头加速推进液冷“降温”

点击关注 文|姚悦 编|王一粟 一进入部署了液冷服务器的数据中心,不仅没有嘈杂的风扇声,甚至在不开空调的夏日也完全没有闷热感。 在大模型引发“暴力计算”的热潮下,数据中心的上下游,正在加紧推进液冷“…...

git log 美化配置

编辑 vim ~/.gitconfig 添加配置 [alias]lg log --graph --abbrev-commit --decorate --dateformat:%m-%d %H:%M:%S --formatformat:%C(bold blue)%h%C(reset) - %s %C(bold yellow)% d%C(reset) %n %C(dim white) (%ad) - %an%C(reset) --allgit lg 效果...

Spark 的主要组件及任务分工

Spark 是一个开源的分布式计算框架,旨在处理大规模数据集的快速计算和分析。下面是 Spark 的主要组件及其任务分工的详细介绍: Driver(驱动器):【任务调度】 负责整个 Spark 应用程序的执行和协调。解析用户程序&#…...

Apache Spark 中的 RDD是什么

目录 RDD容错性 RDD进行迭代计算 RDD是Resilient Distributed Dataset的缩写,是Apache Spark中的一个关键概念。RDD是一种分布式的内存抽象,用于将数据划分为不同的片段以进行并行计算。RDD是一个只读的数据集,可以分布在集群的不同节点上&…...

idea自动封装方法

例如 package com.utils;import java.lang.reflect.Field; import java.sql.*; import java.util.ArrayList; import java.util.List; import java.util.ResourceBundle;/*** author hrui* date 2023/10/13 13:49*/ public class DBUtils {private static ResourceBundle bund…...

js正则表达式

1.字符类 \w 匹配字母数字下划线,相当于[0-9A-Za-z_] \s 匹配单个空白字符,包括空格、制表符、回车符、换行符 \b 匹配一个词的边界 2.边界符 如果不加任何边界符,则表示包含。以下只要包含即可 // /123/ 匹配内容是否包含有123var rg …...

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

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

[环境搭建]OpenHarmony开发环境搭建

文章目录 1. 开发工具1.1 虚拟机1.2 Ubuntu镜像 2 虚拟机安装和配置2.1 虚拟机安装2.2 生成SSH KEY2.3 配置国内apt源&更新2.4 sh修改为bash2.5 下载OpenHarmony依赖工具2.6 python软链接2.7 samba配置 3. gitee账号注册4. 配置git和Repo4.1 git配置4.2 Repo 1. 开发工具 …...

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

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

安科瑞预付费系统在某大型连锁农贸市场的设计应用

安科瑞 崔丽洁 摘要 本远程预付费管理系统采用智能远程预付费电表(DTSY1352-NK/DDSY1352-NK系列),NB智能远传水表,采集各商户实时用电量、用电量总数,通过平台定时结算,结算账户余额,从而进行智…...

Spring Boot Bean 注入的常用方式教程

Spring Boot Bean 注入是一种将依赖对象引入到应用程序组件中的机制,它有助于实现松耦合和可测试的代码。这种注入方式允许我们将依赖关系委托给 Spring 容器来管理,从而提高了代码的可维护性和可读性。Spring Boot 提供了多种 Bean 注入方式&#xff0c…...

Java项目调用Python脚本(基于idea)

前期准备 1.首先需要在本地环境中安装配置python环境 Python(含PyCharm及配置)下载安装以及简单使用(Idea) 博主本次使用python版本为py3.7.3 2.idea安装python插件 位置:File->Settings->Plugins->python->安装后重启即可 3.引入jython依赖 &l…...

前端 JS 经典:i,i++,++i区别

1. 概念 用于对变量进行自增操作。它们的区别在于返回值不同。 i 表示先使用 i 的值,再将 i 加 1,返回的是 i 自增前的值。 i 表示先将 i 加 1,再使用 i 的值,返回的是 i 自增后的值。 i 表示直接使用 i 的值,不进…...

EF Core 7.0 新特性之批量修改

概要 EF Core 7.0 提供了一个可以将LINQ查询和批量修改相结合的方法ExecuteUpdate。由于数据修改是以批量更新的方式完成,所以可以减少数据库的往返次数。 本文将主要介绍ExecuteUpdate的使用方法。 代码和实现 基本案例 本文我们使用银行分行,ATM机…...

Vue_Bug error0308010Cdigital envelope routinesunsupported

Bug描述: error0308010Cdigital envelope routinesunsupported 解决方法: Just add this to the top of vue.config.js : const crypto require(crypto);/*** md4 algorithm is not available anymore in NodeJS 17 (because of lib SSL 3).* In that…...

中科院提出“思维传播”,极大增强ChatGPT等模型复杂推理能力

中国科学院自动化研究所与耶鲁大学计算机系研究人员联合发布了,一份名为《思维传播:用大型语言模型进行基于类比的复杂推理》的论文。 ChatGPT等大型语言模型展示出了超强的创造能力,只需简单的文本提示就能生成小说、营销创意、简历等各种文本内容。但…...

ubuntu20.04安装opencv 3.2.0 报错

安装记录 Error 1: cmake时报错 CMake Error at cmake/OpenCVCompilerOptions.cmake:21 (else): A duplicate ELSE command was found inside an IF block. Fix: 修改opencv-3.2.0/cmake/OpenCVCompilerOptions.cmake文件 注释掉21和22行 else()message(STATUS "Unabl…...

KubeVela交付

有什么用我也不想说了,这个是k8s CI/CD,进阶玩家玩的了,比你们喜欢Arg CD更科学,更现代 在 Kubernetes 中安装 KubeVela helm repo add kubevela https://charts.kubevela.net/core helm repo update helm install --create-namespace -n v…...

【SpringCloud-10】SCA-nacos

前言: 前面介绍的springcloud,可以看做第一代,称为:SCN(spring cloud Netflix); 接下来介绍的是第二代:SCA(spring cloud alibaba); SCA主要有以下组件&#…...

卡顿分析与布局优化

卡顿分析与布局优化 大多数用户感知到的卡顿等性能问题的最主要根源都是因为渲染性能。Android系统每隔大概16.6ms发出VSYNC信 号,触发对UI进行渲染,如果每次渲染都成功,这样就能够达到流畅的画面所需要的60fps,为了能够实现60fp…...

【Vivado HLS Bug】Ubuntu环境下Vivado HLS导出IP报错:HLS ERROR: [IMPL 213-28]

Export IP Invalid Argument / Revision Number Overflow Issue (Y2K22) (xilinx.com)一.问题描述: 在Ubuntu20.04环境中使用Vivado HLS导出IP时报错:HLS ERROR: [IMPL 213-28] 二.解决方法: 1.从如下链接中下载官方补丁Export IP Invalid…...

2022最新版-李宏毅机器学习深度学习课程-P14 批次(batch)与动量(momentum)

一、batch 回顾epoch、shuffle batch size大还是小?都有好处 大batchsize的好处 由于GPU有并行计算的能力,左边并不一定用时更长 反而是,batch size小的时候,要跑完一个epoch所用的update时间更长,所以时间方面的比较…...

谜题(Puzzle, ACM/ICPC World Finals 1993, UVa227)rust解法

有一个5*5的网格,其中恰好有一个格子是空的,其他格子各有一个字母。一共有4种指令:A, B, L, R,分别表示把空格上、下、左、右的相邻字母移到空格中。输入初始网格和指令序列(以数字0结束),输出指…...

acwing算法基础之数据结构--双链表

目录 1 知识点2 模板 1 知识点 一般的结构体写法为, struct BiListNode {int val;BiListNode *left;BiListNode *right; };但我们不用这个,而用数组模拟双链表,此时,用编号为0的结点表示头结点,用编号为1的结点表示尾…...

国家信用信息公示系统湖北/西安网络优化哪家好

​​ 💭 写在前面:本文将学习《深入理解计算机系统》的第六章 - 关于异常控制流和系统级 I/O 。CSAPP 是计算机科学经典教材《Computer Systems: A Programmers Perspective》的缩写,该教材由Randal E. Bryant和David R. OHallaron 合著。 本…...

网站正在建设中中文模板/平台优化是指什么

1、传统媒体不传统 当今媒体圈,最热门的词汇莫过于“新媒体”。新媒体究竟是什么,10个人大概会给10个不同的定义。我现在给一个比较靠谱的定义:新媒体是基于大数据的一种传播方式。 媒体是什么?媒体就是传播信息的媒介。这句话里有两个要害。…...

wordpress多页面传变量/永久免费建个人网站

JSP标签执行顺序 首先来看一下简单标签接口的方法以及它的生命周期 一、SimpleTag接口的方法 1、doTag():void 2、getParent():JspTag 3、setJspBody(javax.servlet.jsp.tagext.JspFragment b…...

广西建设职业技术学院官方网站/如何优化搜索引擎的搜索功能

描述平面上有一个三角形,它的三个顶点坐标分别为(x1, y1), (x2, y2), (x3, y3),那么请问这个三角形的面积是多少。输入输入仅一行,包括6个单精度浮点数,分别对应x1, y1, x2, y2, x3, y3。输出输出也是一行,输出三角形的…...

北京网站制作飞沐/b站视频推广

16 网关 16.1 概念 服务治理,服务注册发现,服务调用,熔断。已经学完。 微服务基本模块已经有了,也可以做微服务了。但完成一个复杂的业务,可能需要多个微服务合作来完成,比如下单,需要用户服…...

wordpress cname/优化法治化营商环境

1.No matching distribution found for virtualenv 查询了好多资料,最终找到问题所在: 2.根据上述果然报错ping: www.baidu.com: Temporary failure in name resolution 解决: 最终成功下载虚拟环境 3.cuda编程问题:根据代码运行环…...