使用Vue.extend( ) 模仿 elementui 创建一个类似 message 消息提示框

提示:记录工作中遇到的需求及解决办法

文章目录

  • 前言
  • 一、目录结构
  • 二、代码
      • [1. 创建 m-Toast.vue 文件](#1. 创建 m-Toast.vue 文件)
      • [2. 创建 global.js 文件](#2. 创建 global.js 文件)
      • [3. 在 main.js 文件中导入 global.js 文件](#3. 在 main.js 文件中导入 global.js 文件)
      • [4. 在 App.vue 文件中使用 全局方法创建的 组件](#4. 在 App.vue 文件中使用 全局方法创建的 组件)

前言

在此之前一直不明白Vue.extend( )干什么用的,如何使用,看了一些视频,再结合vue文档,浅浅的理解了一些,以及一些简单的应用,如有不对请指出。

我将使用脚手架生成一个vue2项目来解释。


提示:以下是本篇文章正文内容,下面案例可供参考

一、目录结构

二、代码

1. 创建 m-Toast.vue 文件

js 复制代码
<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 文件

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 文件

js 复制代码
import Vue from 'vue'
import App from './App.vue'
// 导入 global.js 文件
import './global.js'

Vue.config.productionTip = false

new Vue({
	render: h => h(App),
}).$mount('#app')

4. 在 App.vue 文件中使用 全局方法创建的 组件

js 复制代码
<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>
相关推荐
二川bro20 分钟前
Vue 项目中 package.json 文件的深度解析
前端·vue.js·json
请叫我欧皇i35 分钟前
vue2使用ezuikit-js播放萤石视频
开发语言·javascript·ecmascript
IT专家-大狗2 小时前
Google Chrome Canary版官方下载及安装教程【适用于开发者与进阶用户】
开发语言·javascript·chrome·ecmascript
喜欢便码6 小时前
JS小练习0.1——弹出姓名
java·前端·javascript
chase。6 小时前
【学习笔记】MeshCat: 基于three.js的远程可控3D可视化工具
javascript·笔记·学习
千野竹之卫7 小时前
3D珠宝渲染用什么软件比较好?渲染100邀请码1a12
开发语言·前端·javascript·3d·3dsmax
sunbyte7 小时前
初识 Three.js:开启你的 Web 3D 世界 ✨
前端·javascript·3d
孙_华鹏9 小时前
手撸一个可以语音操作高德地图的AI智能体
前端·javascript·coze
拉不动的猪9 小时前
设计模式之--------工厂模式
前端·javascript·架构
WDeLiang10 小时前
Vue学习笔记 - 逻辑复用 - 组合式函数
vue.js·笔记·学习