Vue.install插件开发简单示例

最新推荐文章于 2024-09-14 05:04:14 发布

jojo付啾啾

最新推荐文章于 2024-09-14 05:04:14 发布

阅读量880

点赞数

分类专栏： vue 文章标签： Vue.install插件开发简单示例

本文链接：https://blog.csdn.net/DreamFJ/article/details/93084472

版权

vue 专栏收录该内容

80 篇文章 3 订阅

订阅专栏

<html>
	<style>
		@keyframes rotate
		{
			0%   {transform:rotateX(0)}
			50%  {transform:rotateX(180deg)}
			100% {transform:rotateX(0deg)}
		}
		.loading{
			animation:rotate 2s infinite;
		}
	</style>
	<body>
		<div id="app">
			{{msg}}
			<button @click="test">click</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
		let MyPlugin = {}
		MyPlugin.install = function(Vue,options){
			let defaultLoading = {
				data:function(){
					return {
						isShow:false,
						msg:""
					}
				},
				methods:{
					show(msg){
						this.msg = msg||"toast消息"
						this.isShow = true
					},
					close(){
						this.isShow = false
					}
				},
				template:`<div class="loading" v-show="isShow" style="width:400px;height:200px;line-height:200px;text-align:center;border:1px solid red;">
							{{msg}} default loading
						  </div>`
			}
			let Loading = Vue.extend(defaultLoading)
			
			let loading = new Loading({
				el:document.createElement('div'),
			})
			document.body.appendChild(loading.$el)
			Vue.prototype.$loading = {
				show:loading.show.bind(loading),
				close:loading.close.bind(loading)
			}
		}
		let LoadingComponent = {
			data:function(){
				return {
				}
			},
			props:['isShow','msg'],
			template:`<div style="width:400px;height:200px;line-height:200px;text-align:center;border:1px solid red;">
						{{msg}}
					  </div>`
		}
		Vue.use(MyPlugin,{loadingComponent:LoadingComponent})
		new Vue({
			el:"#app",
			data:{
				isShow:false,
				msg:"xxx"
			},
			methods:{
				test(){
					this.isShow = !this.isShow
					this.isShow?this.$loading.show():this.$loading.close()
				}
			}
		})
		</script>
	</body>
</html>