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)


相关推荐

  • 对 FLAG_ACTIVITY_NEW_TASK、FLAG_ACTIVITY_CLEAR_TOP、FLAG_ACTIVITY_SINGLE_TOP 的理解

    对 FLAG_ACTIVITY_NEW_TASK、FLAG_ACTIVITY_CLEAR_TOP、FLAG_ACTIVITY_SINGLE_TOP 的理解为了看得更清晰,以下使用代称newtask:FLAG_ACTIVITY_NEW_TASKcleartop:FLAG_ACTIVITY_CLEAR_TOPsingletop:FLAG_ACTIVITY_SINGLE_TOP文章目录default单独singletop单独cleartopcleartop+singletopnewtask单独newtasknewtask+sin…

  • java中byte的用法_nt宫颈长度多少是正常

    java中byte的用法_nt宫颈长度多少是正常1.概念JavaNIOAPI自带的缓冲区类功能相当有限,没有经过优化,使用JDK的ByteBuffer操作更复杂。故而Netty的作者TrustinLee为了实现高效率的网络传输,重新造轮子,Netty中的ByteBuf实际上就相当于JDK中的ByteBuffer,其作用是在Netty中通过Channel传输数据。2.优势可以自定义缓冲类型;通过内置的复合缓冲类型,实现透明的零拷贝(ze…

  • win10启动文件丢失或损坏如何解决_miflash出现灾难性故障

    win10启动文件丢失或损坏如何解决_miflash出现灾难性故障原本昨天一切正确的电脑,今天打开电脑想新建一个文件夹的时候,竟无法成功,提示【一个意外错误使你无法创建该文件夹。如果你继续受到此错误,可以使用错误代码来搜索有关此问题的帮助。错误0x8000FFFF:灾难性故障】。小编真的是无奈啊,还能怎么办,上网搜索呗,出现的这个问题的磁盘还是之前的机械硬盘,以为已经把磁盘重新格盘,删除分区,重建分区,应该是没有问题了把,结果出现了几次问题都在这个机械硬盘里…

  • stringtokenizer是什么意思_string copy

    stringtokenizer是什么意思_string copyStringTokenizer可以将一个字符串分解为一个一个的单词或者标记。常用方法如下:methodcontentintcountTokens()返回nextToken方法被调用的次数。booleanhasMoreTokens()返回是否还有分隔符。booleanhasMoreElements()返回是否还有分隔符。StringnextTo…

  • QCustomPlot开发笔记(一):QCustomPlot简介、下载以及基础绘图[通俗易懂]

    QCustomPlot开发笔记(一):QCustomPlot简介、下载以及基础绘图[通俗易懂]QCustomPlot开发笔记系列整理集合,这是目前使用最为广泛的Qt图表类(Qt的QWidget代码方向只有QtCharts,Qwt,QCustomPlot),使用多年,系统性的整理,过目并整理了原有文档,本系列旨在系统解说并逐步更新其各种Demo示例。

    2022年10月10日
  • excel截取字符串函数_截取函数 excel

    excel截取字符串函数_截取函数 excelExcel中共提供了三种函数来对字符串进行截取操作left(text,num):用于对一个文本字符串,从左向右提取指定个数的字符right(text,num):用于对一个文本字符串,从右向左提取指定个数的字符MID(text,start_num,num_chars):从一个文本字符串的指定位置开始,截取指定个数的字符…

    2022年10月22日

发表回复

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

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