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

使用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 消息提示框

提示&#xff1a;记录工作中遇到的需求及解决办法 文章目录 前言一、目录结构二、代码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传感器的发展&#xff0c;最近发布了具有2D图像和3D点云数据的MVTec-3D AD数据集&#xff0c;促进了多模态工业异常检测的研究。 无监督异常检测的核心思想是找出正常表示与异常之间的差异。…...

基于微信小程序的宿舍报修系统的设计与实现(lw+演示+源码+运行)

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对成果信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&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 保证消息传递可靠性的机制——消息确认、持久化和发送发确认&#xff0c;那么对于消息确认和发送方确认&#xff0c;如果接收方没有收到消息&#xff0c;那…...

每天一道面试题(20):锁的发生原因和避免措施

死锁的发生原因和避免措施 一、概述 在多线程编程中&#xff0c;死锁是一个常见的问题。理解死锁的成因和避免策略是提升程序稳定性和性能的重要能力。 二、普通人 vs 高手的回答 普通人回答&#xff1a; “临场发挥…” 高手回答&#xff1a; “死锁是指两个或多个线程在执…...

2024淘宝双11活动,收下这份必买好物推荐清单

双11如何真正值得购买的好物呢&#xff1f;为了帮助大家把握住这次难得的购物良机&#xff0c;我们特别推出了这份“2024淘宝双11必买好物推荐清单”。这份清单涵盖数码电子、家居生活、个护健康等多个领域的优质产品。无论你是科技爱好者&#xff0c;还是注重生活品质的消费者…...

vue-cli,element-plus,axios,proxy

一、vue-cli vue-cli俗称vue脚手架&#xff0c;是vue官方提供的快速生成vue 工程化项目的工具。 1.官网&#xff1a;https://cn.vuejs.org/ 中文官网: https://cli.vuejs.org/zh/ 特点&#xff1a;基于webpack&#xff0c;功能丰富且易于扩展&#xff0c;支持创建vue2和vu…...

《Zeotero的学习》

学习视频链接 Zeotera的安装 官网点击download&#xff0c;选择合适的版本进行下载&#xff0c;并安装插件。 下载完成之后&#xff0c;点击安装包&#xff0c;一路默认就可以。如果不想下载在C盘&#xff0c;可以在步骤中选择自定义路径。 Zeotero的注册 官网进行注册&am…...

大数据复习知识点1

1、HDFS和MapReduce的起源&#xff1a;HDFS起源于Google的GFS论文&#xff0c;它是为了解决大规模数据集的存储问题而设计的。而MapReduce则是Google为了解决大规模数据处理问题而提出的一种并行计算模型。 2、YARN的作用&#xff1a;YARN是Hadoop的资源管理器&#xff0c;它负…...

9.26 Buu俩题解

[CISCN2019 华东北赛区]Web2 看wp写完之后写的 知识点 存储型XSS与过滤绕过sql注入 题解 好几个页面&#xff0c;存在登录框可以注册&#xff0c;存在管理员页面(admin.php) ->既然存在管理员页面&#xff0c;且直接访问admin.php提示我们 说明存在身份验证&#xff0…...

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&#xff1a;实时通信的利器 1. 什么是 WebSocket&#xff1f; WebSocket 是一种网络通信协议&#xff0c;它允许服务器和客户端之间建立持久的双向通信通道&#xff0c;适用于高频率、低延迟的数据交换场景。在传统的 HTTP 通信中&#xff0c;每次请求都需…...

OpenEuler配置本地yum源

0x00 服务器版本 将本地镜像传输至服务器 操作步骤如下 # 创建一个目录用于挂载光盘映像 mkdir /media/cdrom/# 将光盘映像挂载到指定目录 mount /kvm/openeuler.iso /media/cdrom/#进入Yum仓库配置目录 cd /etc/yum.repos.d/# 备份原有的 openEuler.repo 文件 mv openEuler.…...

论文不同写作风格下的ChatGPT提示词分享

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 在学术论文写作中&#xff0c;不同的写作风格能显著影响文章的表达效果与读者的理解。无论是描述性、分析性、论证性&#xff0c;还是批判性写作风格&#xff0c;合理选择和运用恰当的写…...

单点登录(SSO)基础

单点登录&#xff08;SSO, Single Sign-On&#xff09; 是一种身份认证机制&#xff0c;允许用户在多个独立的应用系统中只进行一次登录操作&#xff0c;即可访问所有授权的应用或服务&#xff0c;而无需每次切换应用时都进行登录。SSO 提高了用户体验的便捷性&#xff0c;同时…...

设置VsCode搜索时排除文件,文件列表中隐藏文件

按照《VsCode gdb gdbserver远程调试C程序》中介绍的方法&#xff0c;配置好VsCode后&#xff0c;打开一个C/C工程&#xff0c;发现左侧的面板会显示编译时生成的中间文件&#xff08;比如.d和.o文件&#xff09;。我们可以通过设置隐藏掉一些我们不需要打开的文件以简洁面板…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...