使用Vue.extend( ) 模仿 elementui 创建一个类似 message 消息提示框
提示:记录工作中遇到的需求及解决办法
文章目录
- 前言
- 一、目录结构
- 二、代码
- 1. 创建 m-Toast.vue 文件
- 2. 创建 global.js 文件
- 3. 在 main.js 文件中导入 global.js 文件
- 4. 在 App.vue 文件中使用 全局方法创建的 组件
前言
在此之前一直不明白Vue.extend( )干什么用的,如何使用,看了一些视频,再结合vue文档,浅浅的理解了一些,以及一些简单的应用,如有不对请指出。
我将使用脚手架生成一个vue2项目来解释。
提示:以下是本篇文章正文内容,下面案例可供参考
一、目录结构

二、代码
1. 创建 m-Toast.vue 文件
<template><div class="message"><div class="text">{{ text }}</div></div>
</template>
<script>
export default {name: 'm-Toast',props: {text: {type: String,default: ''},},mounted () {this.timer = setTimeout(() => {this.$destroy()clearTimeout(this.timer);}, 2000)},destroyed () {clearTimeout(this.timer);document.body.removeChild(this.$el)},methods: {},
}
</script>
<style scoped>
.message {min-width: 380px;background-color: #f0f9eb;color: #67c23a;position: fixed;padding: 15px 15px 15px 20px;top: 20px;left: 50%;z-index: 2022;font-size: 14px;transform: translate(-50%, 0);
}.text {overflow: hidden;align-items: center;
}
</style>
2. 创建 global.js 文件
import Vue from "vue";
import Toast from "./components/m-Toast.vue";/** 创建 Toast对应的Vue子类(构造器)* 结合vue文档 和 视频,* extends 的参数可以通过导入一个写好的组件* 或者 是函数 ,例如: * {* template: '<div class="message">* <div class="text">{{ text }}</div>* </div>',* data: function () {* return {* text: '测试',* }* }* }* 下面我选择通过导入组件的方法,因为方便使用样式,结构更明了*/
let ToastSubclass = Vue.extend(Toast)// 全局挂载到原型上方便调用
Vue.prototype.$toast = function (text) {// 创建实例let ToastConstructor = new ToastSubclass({// 就是在调用组件的时候,给组件传递属性值propsData: {text}});/** 挂载(渲染组件)* 使用 $mount() 但不传挂载点,返回一个完整的 Vue 组件实例*/ToastConstructor.$mount()// 把渲染后的真实DOM插入到BODY中即可document.body.appendChild(ToastConstructor.$el)
}
3. 在 main.js 文件中导入 global.js 文件
import Vue from 'vue'
import App from './App.vue'
// 导入 global.js 文件
import './global.js'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
4. 在 App.vue 文件中使用 全局方法创建的 组件
<template><div id="app"><button @click="config">按钮</button></div>
</template><script>export default {name: 'App',data () {return {count: 0}},mounted () {},methods: {config () {this.$toast(`测试${this.count++}`)}}
}
</script><style></style>相关文章:
使用Vue.extend( ) 模仿 elementui 创建一个类似 message 消息提示框
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、目录结构二、代码1. 创建 m-Toast.vue 文件2. 创建 global.js 文件3. 在 main.js 文件中导入 global.js 文件4. 在 App.vue 文件中使用 全局方法创建的 组件 前言 在此之前一直不明白Vue.extend( )干什么用的…...
ansible部署二进制mysql 8
1、配置文件 ll /ansible -rw-r--r-- 1 root root 836 Sep 22 12:09 my.cnf -rw-r--r-- 1 root root 810 Sep 22 07:21 mysql.service -rw-r--r-- 1 root root 2731 Sep 22 12:32 mysql.yam2、my.cnf内容 rootbole:/ansible# cat my.cnf [mysql] #设置m…...
【2023工业3D异常检测文献】基于混合融合的多模态工业异常检测方法Multi-3D-Memory (M3DM)
Multimodal Industrial Anomaly Detection via Hybrid Fusion 1、Background 随着3D传感器的发展,最近发布了具有2D图像和3D点云数据的MVTec-3D AD数据集,促进了多模态工业异常检测的研究。 无监督异常检测的核心思想是找出正常表示与异常之间的差异。…...
基于微信小程序的宿舍报修系统的设计与实现(lw+演示+源码+运行)
摘 要 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对成果信息管理混乱,出错率高,信息安全性差&am…...
前端练习总结(1)
前端实习练习题 前端实习笔试题0920 visibility:hidden display:none把鼠标移到按钮并点击时 hover active focus的顺序代码输出结果1代码输出结果2CSS中哪些属性可以继承cookie sessionStorage localstorage区别面向对象基本特征有哪些,请具体说明下列关于v-model的说法,哪项…...
计算机网络自顶向下(1)---网络基础
目录 1.网络的分类 2.网络协议 3.网络分层结构 1.OSI七层模型 2.TCP/IP四层模型 3.网络与OS的关系 4.网络传输基本流程 1.协议报头 5.网络中的地址管理 1.IP地址 2.端口号 6.传输层协议 1.TCP协议 2.UDP协议 3.网络字节序 7.socket 1.网络的分类 局域网&…...
Pandas -----------------------基础知识(五)
索引和列操作函数缺失值 索引和列操作 # 1 加载数据 # 1.1 从链家租房数据集中获取天通苑租房区域的所有数据存储在df2中 # 1.2 从df2中获取价格列存储在df2_price对象 import pandas as pd df pd.read_csv(/root/pandas_code_ling/data/b_LJdata.csv) df2 df[df[区域] 天通苑…...
RabbitMQ 高级特性——重试机制
文章目录 前言重试机制配置文件设置生命交换机、队列和绑定关系生产者发送消息消费消息 前言 前面我们学习了 RabbitMQ 保证消息传递可靠性的机制——消息确认、持久化和发送发确认,那么对于消息确认和发送方确认,如果接收方没有收到消息,那…...
每天一道面试题(20):锁的发生原因和避免措施
死锁的发生原因和避免措施 一、概述 在多线程编程中,死锁是一个常见的问题。理解死锁的成因和避免策略是提升程序稳定性和性能的重要能力。 二、普通人 vs 高手的回答 普通人回答: “临场发挥…” 高手回答: “死锁是指两个或多个线程在执…...
2024淘宝双11活动,收下这份必买好物推荐清单
双11如何真正值得购买的好物呢?为了帮助大家把握住这次难得的购物良机,我们特别推出了这份“2024淘宝双11必买好物推荐清单”。这份清单涵盖数码电子、家居生活、个护健康等多个领域的优质产品。无论你是科技爱好者,还是注重生活品质的消费者…...
vue-cli,element-plus,axios,proxy
一、vue-cli vue-cli俗称vue脚手架,是vue官方提供的快速生成vue 工程化项目的工具。 1.官网:https://cn.vuejs.org/ 中文官网: https://cli.vuejs.org/zh/ 特点:基于webpack,功能丰富且易于扩展,支持创建vue2和vu…...
《Zeotero的学习》
学习视频链接 Zeotera的安装 官网点击download,选择合适的版本进行下载,并安装插件。 下载完成之后,点击安装包,一路默认就可以。如果不想下载在C盘,可以在步骤中选择自定义路径。 Zeotero的注册 官网进行注册&am…...
大数据复习知识点1
1、HDFS和MapReduce的起源:HDFS起源于Google的GFS论文,它是为了解决大规模数据集的存储问题而设计的。而MapReduce则是Google为了解决大规模数据处理问题而提出的一种并行计算模型。 2、YARN的作用:YARN是Hadoop的资源管理器,它负…...
9.26 Buu俩题解
[CISCN2019 华东北赛区]Web2 看wp写完之后写的 知识点 存储型XSS与过滤绕过sql注入 题解 好几个页面,存在登录框可以注册,存在管理员页面(admin.php) ->既然存在管理员页面,且直接访问admin.php提示我们 说明存在身份验证࿰…...
Mitsuba 渲染基础
Mitsuba 渲染基础 0. Abstract1. 安装 Mitsuba21.1 下载 Mitsuba2 源码1.2 选择后端 (variants)1.3 编译 2. [Mitsuba2PointCloudRenderer](https://github.com/tolgabirdal/Mitsuba2PointCloudRenderer)2.1 Mitsuba2 渲染 XML2.2 Scene 场景的 XML 文件格式2.2.1 chair.npy to…...
深入理解 WebSocket:实时通信的利器
深入理解 WebSocket:实时通信的利器 1. 什么是 WebSocket? WebSocket 是一种网络通信协议,它允许服务器和客户端之间建立持久的双向通信通道,适用于高频率、低延迟的数据交换场景。在传统的 HTTP 通信中,每次请求都需…...
OpenEuler配置本地yum源
0x00 服务器版本 将本地镜像传输至服务器 操作步骤如下 # 创建一个目录用于挂载光盘映像 mkdir /media/cdrom/# 将光盘映像挂载到指定目录 mount /kvm/openeuler.iso /media/cdrom/#进入Yum仓库配置目录 cd /etc/yum.repos.d/# 备份原有的 openEuler.repo 文件 mv openEuler.…...
论文不同写作风格下的ChatGPT提示词分享
学境思源,一键生成论文初稿: AcademicIdeas - 学境思源AI论文写作 在学术论文写作中,不同的写作风格能显著影响文章的表达效果与读者的理解。无论是描述性、分析性、论证性,还是批判性写作风格,合理选择和运用恰当的写…...
单点登录(SSO)基础
单点登录(SSO, Single Sign-On) 是一种身份认证机制,允许用户在多个独立的应用系统中只进行一次登录操作,即可访问所有授权的应用或服务,而无需每次切换应用时都进行登录。SSO 提高了用户体验的便捷性,同时…...
设置VsCode搜索时排除文件,文件列表中隐藏文件
按照《VsCode gdb gdbserver远程调试C程序》中介绍的方法,配置好VsCode后,打开一个C/C工程,发现左侧的面板会显示编译时生成的中间文件(比如.d和.o文件)。我们可以通过设置隐藏掉一些我们不需要打开的文件以简洁面板…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...
