将组件直接绑定到vue实例上面的写法

怎么将组件直接绑定到vue实例上面?

在实际开发过程中,有多种使用vue组件的方式,有在组件中引入,直接挂载到vue进行全局使用,也有直接挂载到vue实例上面当成vue的一个属性来使用的。下面通过代码来实现将组件直接绑定到vue实例。

第一步写个vue组件叫demo

<template><view><view v-if="showFlag" @touchmove.stop.prevent @mousewheel.stop.prevent class="u-demo"><view class='demo'><view><image src="../../static/images/demo.png" class="esuc" aria-hidden="true"></image></view><view class="content">{{ content }}</view></view></view></view>
</template><script>export default {name: 'demo',data() {return {showFlag: false,content: '弹出框里面的内容',showCancel: false}},}
</script><style scoped>.u-demo {position: fixed;z-index: 999;background:rgba(0,0,0,.6);height:2000px;width:100%;top:0;left:0;right:0;bottom:0;overflow:hidden;}.demo {position:fixed;width:260rpx;height:172rpx;background:rgba(0,0,0,.7);color:#fff;font-size:30rpx;text-align:center;padding-top:44rpx;padding-bottom:44rpx;top:520rpx;bottom:0;left:0;right:0;z-index:100;margin:0 auto;}.esuc {width:108rpx;height:108rpx;margin-bottom:20rpx;}
</style>

第二步,写个demo.js 文件,然后在这里把demo组件绑定到构造器上面

import Vue from 'vue'
// 弹窗页面
import uDemo from './demo.vue'
// 弹窗构造器js
const popDemo = Vue.extend(uDemo);
// 生成弹窗的方法
uDemo.install = function(data) {let instance = new popDemo({data}).$mount();document.body.appendChild(instance.$el); // 挂载Vue.next(()=>{// 首次打开显示弹窗instance.showFlag = truesetTimeout(function() {  // 1.5s后隐藏弹窗instance.showFlag = false},1500)})
}

第三步,在main.js 文件中将demo.js文件直接挂载到vue实例上面

import uDemo from '@/components/uDemo/demo.js'
Vue.prototype.$alert = uDemo.install

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

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

相关文章

SwiftUI中stroke属性的使用

在 SwiftUI 中&#xff0c;可以使用 stroke 属性来绘制形状的轮廓线。stroke 属性接受一个 Color 类型的参数&#xff0c;指定轮廓线的颜色。 以下是一个示例代码&#xff0c;演示如何在 SwiftUI 中使用 stroke 属性绘制矩形的轮廓线&#xff1a; import SwiftUIstruct Conte…

linux小记(1)

基本概念&#xff1a;不依靠扩展名来区分文件类型 好处&#xff1a;除了文本文件其他所有windows文件都无法在Linux下运行&#xff0c;包括病毒木马。 坏处&#xff1a;所有的软件都需要对linux单独开发 习惯用后缀来区分文件&#xff0c;方便管理。 -压缩包&#xff1a;*.…

第十五届蓝桥杯软件赛模拟赛第三期(c++,python,java通用)

注&#xff1a;1.填空题用最简单的方式&#xff08;暴力递归或枚举&#xff09;得出答案即可。 2.编程题若无思路可用暴力递归或枚举也能拿到不少的分数。 第一题 【问题描述】 请问 2023 有多少个约数&#xff1f;即有多少个正整数&#xff0c;使得 2023 是这个正整数的整数倍…

【ESP32 IDF】UART串口

文章目录 前言一、数据传输的基本概念1.1 串行与并行通信1.2 单工/半双工/全双工通信1.3 同步/异步通信1.4 波特率1.5 UART 四要素 二、串口的使用2.1 配置UART串口2.2 配置UART引脚2.3 安装串口驱动2.4 获取环形缓冲区的数据长度2.5 读取数据2.6 发送数据 总结 前言 UART&…

第十二篇:学习python数据清洗

文章目录 一、啥是数据清洗二、将表格数据导入pandas中1. 准备工作2. 引入csv文件2.1 引入pandas库2.2 读取文件/修改名称3.2 快速浏览数据2.4 修改名字2.5 查找缺失值2.6 删除缺失值 3. 引入Excel文件3.1 引入pandas库3.2 读取Excel文件的人均GDP数据3.3 查看数据类型和non-nu…

Android中的几种定位方式调用详解

目前&#xff0c;移动端大致通过三种方式来进行设备定位&#xff1a;GPS、基站、wifi。本文就详细的讲解一下这几种定位方式和实现方法。 前言 android中我们一般使用LocationManager来获取位置信息&#xff0c;这里面有四中provider&#xff1a; public static final Strin…

怎样获取html网页中<ul >中的数据?

您可以使用Python中的BeautifulSoup库来获取HTML网页中<ul>标签中的数据。以下是一个示例代码&#xff1a; rom bs4 import BeautifulSoup import requests# 发送HTTP请求并获取网页内容 url "http://example.com" # 替换为目标网页的URL response request…

YOLOv8从入门到入土使用教程!(一)训练模型

⭐⭐⭐瞧一瞧看一看&#xff0c;新鲜的YOLOv9魔改专栏来啦&#xff01;⭐⭐⭐ 专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;主力高效涨点&#xff01;&#xff01;&#xff01; 一、本文介绍 本文将演示如何使用YOLOv8进行训练及预测&#xff01; 二…

线性dp 最长公共子序列(二分版本)

本题由于1e5的数据&#xff0c;n方的做法不再适用&#xff0c;但是简单的一维并不能满足动态转移。这时&#xff0c;我们就可以考虑引入最长上升子序列来处理 用样例来看 5 序列&#xff1a;3 2 1 4 5序号&#xff1a;1 2 3 4 5序列&#xff1a;1 2 3 4 5序号&#xff1a;3 2…

1.1 Java 注解(Annotation)

1.1 注解&#xff08;Annotation&#xff09; 1.1.1 什么是注解 注解的定义&#xff1a;它提供了一种安全的类似注释的机制&#xff0c;用来将任何信息或元数据&#xff08;metadata&#xff09;与程序元素&#xff08;类、方法、成员变量等&#xff09;进行关联。为程序的元…

九型人格测试,2号人格助人型的职业分析

九型人格测试中的助人型&#xff0c;也叫二号人格&#xff0c;解读专业选择和职业选择。 助人型人格&#xff0c;在九型人格中&#xff0c;被视作一种给予者&#xff0c;他们总是喜欢帮助别人&#xff0c;有一个观念&#xff1a;“我不帮助别人&#xff0c;就没有人愿意喜欢我…

透明玻璃屏幕为什么那么贵

透明玻璃屏幕之所以价格较高&#xff0c;主要是由于以下几个方面的原因&#xff1a; 技术研发与创新&#xff1a;透明玻璃屏幕作为一种先进的显示技术&#xff0c;其研发和制造过程涉及到许多复杂的技术。这些技术的研发和创新需要投入大量的资金和时间。此外&#xff0c;透明玻…

鸿蒙应用native开发入门以及运行native项目报错spawn EPERM问题解决以及so包调用

目录 DevEco Studio新建native项目 新建第一个native项目 解决spawn EPERM报错 点击运行 分析流程

无冬之夜:增强版 Neverwinter Nights Mac 激活版

Neverwinter Nights是一款角色扮演游戏。游戏的剧情发生在虚构的城市Neverwinter&#xff0c;玩家扮演一个冒险者&#xff0c;在这个城市中探索并完成各种任务。游戏中有许多不同的职业、种族、技能和法术可供玩家选择。游戏的主要特点包括多人游戏模式、自定义模块和工具包&am…

【Mc生存】插火把

【Mc生存】插火把 题目描述 话说有一天 linyorson 在“我的世界”开了一个 n n n \times n nn 的方阵&#xff0c;现在他有 m m m 个火把和 k k k 个萤石&#xff0c;分别放在 ( x 1 , y 1 ) ∼ ( x m , y m ) (x_1, y_1) \sim (x_m, y_m) (x1​,y1​)∼(xm​,ym​) 和 …

【书生·浦语大模型实战营】第5节 课后作业

LMDeploy 的量化和部署 0. 课程链接1. 课后作业1.1 基础作业1.2 进阶作业&#xff08;可选做&#xff09; 0. 课程链接 链接&#xff1a;https://github.com/InternLM/tutorial/blob/main/lmdeploy/lmdeploy.md 1. 课后作业 1.1 基础作业 使用 LMDeploy 以本地对话、网页Gra…

大模型技术在测试领域应用的方向思考

方向1&#xff1a;利用大模型技术生成测试用例 方向2&#xff1a;利用大模型技术进行测试用例推荐 如何利用大模型技术生成测试用例 大模型技术&#xff0c;如自然语言处理&#xff08;NLP&#xff09;中的大型预训练模型&#xff0c;如BERT、GPT等&#xff0c;已经在许多领…

HTML5:七天学会基础动画网页5

CSS3渐变 (可以给背景颜色设置一个渐变的效果) 线性渐变:Linear Gradients(从直线上向远处见面) 语法: background:linear-gradient(direction&#xff0c;color-stop1&#xff0c;color-stop2…)&#xff1b; direction:方向 to left, to right, 90deg 径向渐变:Radial …

Python Flask Web + PyQt 前后端分离的项目—学习成绩可视化分析系统

简介 使用工具&#xff1a; Python&#xff0c;PyQt &#xff0c;Flask &#xff0c;MySQL 注&#xff1a;制作重点在网页端&#xff0c;因此网页端的功能更全 WEB界面展示: 系统登录分为管理员&#xff0c;老师&#xff0c;学生3部分 管理员统一管理所有的账号信息以及登录…

Jenkins发送邮件、定时执行、持续部署

集成Allure报告只需要配置构建后操作即可。但如果是web自动化&#xff0c;或是用HTMLTestRunner生成报告&#xff0c;构建后操作要选择Publish HTML reports&#xff0c;而构建中还要添加Execute system Groovy script插件&#xff0c;内容&#xff1a; System.setProperty(&q…