Vue.extend详解,自定义toast弹窗

Vue.extend详解,自定义toast弹窗Vue.extend方法,返回的是一个扩展实例构造器可以理解为组件类的一个构造函数,其属性都为组件内的对应的属性//定义一个组件的构造函数constdivComponent=Vue.extend({ template:`<divv-on:click=”click”>{{text}}</div>`, data(){ return{ text:’helloword’ } }, methods:{ click(){ consol

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

Vue.extend方法,返回的是一个扩展实例构造器

可以理解为组件类的一个构造函数,其属性都为组件内的对应的属性

//定义一个组件的构造函数
const divComponent = Vue.extend({ 
   
	template:`<div v-on:click="click">{ { text } }</div>`,
	data() { 
   
		return { 
   
			text: 'hello word'
		}
	},
	methods:{ 
   
		click(){ 
   
			console.log("click")
		}
	}
})
//调用new方法 实例化组件并挂载dom上
new divComponent().$mount('#app');
//或者直接传入一个el参数来挂载
new divComponent({ 
   el:"#app"})
好比当我想自定义一个toast弹窗,即可使用Vue.extend实现
//先定义好toast.vue组件模板 如下
<template>
	<div class="container">
		<div> { 
    text } </div>
	</div>
</template>
//新建toast.js 
import Vue from 'vue';
import toast from './toast.vue'
//创建构造器 将组件放进去
const ToastConstructor =  Vue.extend(toast);
//定一个触发toast显示的方法 并且写好显示的规则、参数等
function showToast(text,duration=2200){ 
   
	const toastDOM = new ToastConstructor({ 
   
		el:document.createElement("div"),
		data(){ 
   
			return{ 
   
				text:text
			}
		}
	})
	//添加到body中
	document.body.appendChild(toastDOM.$el)
	//自动消失
	setTimeout(()=>{ 
   
		let dom = toastDOM.$el
		dom.parentNode.removeChild(dom)
	},duration)
}
//按照vue规则,定义全局方法需要暴露一个 install 方法,如default导出为方法则可当做install使用 因此这样写
function toastRegistry(){ 
   
	Vue.prototype.$toast = showToast
}
export default toastRegistry
//最后在main.js中使用Vue.use(toastRegistry)引用即可
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189942.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 树莓派自动连接蓝牙_树莓派能搜到wifi但是连不上

    树莓派自动连接蓝牙_树莓派能搜到wifi但是连不上将USB无线网卡插入树莓派任一USB接口,插上网线,接通电源;在个人电脑上通过ssh连接树莓派,默认帐号是pi,默认密码是raspberry(如何通过ssh连接树莓派,请自行网上查找,当然如果树莓派已

  • 淘宝最新钓鱼网站源码及教程_挖鱼源码网

    淘宝最新钓鱼网站源码及教程_挖鱼源码网大家好,我是陈文生,今天教大家一下如何搭建一个精仿QQ空间的钓鱼网站(PHP)有什么不会直接联系我(QQ:2771628927)先看一下效果文生QQ:2771628927我们看一下后台文生QQ:2771628927活不多说了,直接源码吧…

  • 【转】java对象转JSONObject、JSONObject转java对象及String转JSONObject

    【转】java对象转JSONObject、JSONObject转java对象及String转JSONObjectJSONObjectjo=(JSONObject)JSONObject.toJSON(javaBean);Studentstu=JSONObject.parseObject(jo,Student.class);JSONObjectjo=JSON.parseObject(str);原文:https://blog.csdn.net/qq_42407917/article/details/100151588

  • python下载及安装

    python下载及安装1, 许多新学员不知道开始学Python需要安装什么,需要准备什么,特地写下这篇文档给一脸懵逼的新同学们作为指导文档。2, 首先,学Python需要有一台电脑,这是必须的。老师的

  • python系列文章(基础,应用,后端,运维,自动化测试,爬虫,数据分析,可视化,机器学习,深度学习系列内容)

    python基础教程python基础系列教程——Python的安装与测试:python解释器、PyDev编辑器、pycharm编译器python基础系列教程——Python库的安装与卸载python基础系列教程——Python3.x标准模块库目录python基础系列教程——Python中的编码问题,中文乱码问题python基础系列教程——python基础语法全解python…

  • Kafka集群原理

    Kafka集群原理Kafka是一个分布式的、可水平扩展的、基于发布/订阅模式的、支持容错的消息系统。一、集群成员Kafka使用Zookeeper来维护集群成员的信息。每个broker都有一个唯一标识符,这个标识符可以在配置文件里指定,也可以自动生成。在broker启动的时候,它通过创建临时节点把自己的ID注册到Zookeeper。Kafka组件订阅Zookeeper的/broker/ids路径,当有broker加入集群或退出集群时,这些组件就可以获得通知。ZooKeeper两.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号