手把手实现一个element ui 的message

写在前面

相信很多用过前端UI框架的同学都用到过一些全局通用的 提示，像element的this.$message,还有vant的this.$toast 像这样的

废话不多说，现在就来实现一个自己的this.$message我们的预期\ast \ast 当我输入this.$shmily（‘博主好帅’）的时候就弹出一个五颜六色的星星，然后慢慢消失，并且提示博主好帅 ** just like this

let’s do it

1.项目里新建一个文件夹，放src下面，我是放在pages下面的，你们随意～
2.新建一个index.vue 文件 和一个index.js 文件
3.这里为了能看到效果我在路由文件里面。直接注册一个/message ,访问下 看到hello message 就注册成功了

4.开始画星星，手动画貌似有点麻烦，所以我们直接用一下element的图标

// index.vue
<template>
	<div class="message">
		<div class="moon">
			<i class="el-icon-moon"></i>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {}
	},
	methods: {},
	created() {}
}
</script>
<style lang='scss' scoped>
.message {
	width: 100px;
	height: 100px;
	.moon {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 60px;
		color: red;
	}
}
</style>

效果

并没有想要的心心，将就月亮代替吧
有点少，给他让一个固定大小的容器内，随机分布十个，且颜色随机

// index.vue
<template>
	<div class="message" v-if="canShow">
		<div class="moon">
			<i class="el-icon-moon" v-for="(item,index) in moonList" :style="{top:item.top,left:item.left,color:item.color}"></i>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			canShow: false,
			// 渲染月亮
			moonList: [
				{
					left: '',
					color: '',
					top: ''
				}
			],
			color: [
				// 这里就不给rgb了，就在这个颜色里面随机
				'red',
				'yellow',
				'pink',
				'black',
				'purple',
				'cyan'
			]
		}
	},
	methods: {
		// 随机去生成月亮的颜色和位置
		createMoon(num) {
			this.canShow = true
			//接受需要生成几个的参数
			for (var i = 1; i < num; i++) {
				this.moonList.push({
					// 这里是距离左边的位置 不让它跑出去的话 应该是moon盒子的宽度减去月亮的大小
					left: this.creteRadom(800 - 60) + 'px',
					top: this.creteRadom(500 - 60) + 'px',
					// 颜色
					color: this.color[this.creteRadom(this.color.length - 1)]
				})
			}
			setTimeout(() => {
				this.canShow = false
				this.moonList = []
			}, 3000)
		},
		// 生成随机数
		creteRadom(total) {
			let num = Math.floor(Math.random() * total) + 1
			return num
		}
	},
	created() {}
}
</script>
<style lang='scss' scoped>
.message {
	width: 100px;
	height: 100px;
	.moon {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 60px;
		width: 800px;
		height: 500px;
		border: 1px solid #000;
		color: red;
		.el-icon-moon {
			position: absolute;
		}
	}
}
</style>

有兴趣的同学可以自己优化下样式，懒癌犯了
5.组件基本完善了，现在我们需要输入this.$shmily(10)他就给我随机十个心，不，是月亮，我们接下来配置下index.js
步骤如下

// index.js
import index from './index.vue'
import Vue from 'vue'
//通过extend构造器 创建一个‘子类’
const Shmily = Vue.extend(index)
//创建shmily的实例  并且挂载到元素上
const shmily = new Shmily()
let init = () => {
  shmily.$mount()
  document.body.appendChild(shmily.$el)
}
let caller = (num) => {
  init()
  shmily.createMoon(num)
}
export default {
  //main.js中  Vue.use会自己调用install来完成  让$shmily 指向 caller函数，并且接受参数传递给组件里面的createMoon 函数
  install(Vue) {
    Vue.prototype.$shmily = caller
  }
}

当然最重要的别忘了 main.js中

//main.js 路径可能不一样 
import Shmily from './pages/message/index.js' 
Vue.use(Shmily)

最后看效果

小结：理想和现实总是有差距