[JavaScript知识库]VUE之自定义插件

index.js文件

import promptBox from "./prompt-box.vue"

// 定义插件对象
const PromptBox = {};
// vue的install方法,用于定义vue插件
PromptBox.install = function(Vue,options) {
	//使用Vue构造器，创建一个'子类'
	const PromptBoxInstance = Vue.extend(promptBox);
	let currentPrompt;
	const initInstance = ()=> {
		// 实例化vue实例
		currentPrompt = new PromptBoxInstance();
		let promptBoxEl = currentPrompt.$mount().$el;
		console.log('promptBoxEl',promptBoxEl);
		console.log('document文件',document);
		/* if(plus) {
			ws=plus.webview.currentWebview();
			ws.evalJS(`window.document.body.appendChild(${promptBoxEl})`)
		} else {
			document.body.appendChild(promptBoxEl);
		} */
		
	};
	// 在Vue的原型上添加实例方法,以方便全局调用
	Vue.prototype.$promptBox = {
		showPromptBox (options) {
			console.log('document文件',document);
			if(!currentPrompt) {
				initInstance();
			}
			if(typeof options === 'string') {
				currentPrompt.content = options;
			} else if (typeof options === 'object') {
				Object.assign(currentPrompt, options); //浅拷贝
			}
			//显示弹窗
			currentPrompt.showPromptBox();
		}
	};
};

export default PromptBox;

prompt-box.vue文件

	<!-- 提示框 -->
<template>
	<view class="prompt-box flex" v-show="isShowPromptBox">
		<view class="main-box flex">
			<i class="icon iconfont prompt-icon" :class="iconSrc" v-if="iconSrc"></i>
			<slot></slot>
			<!-- {{content}} -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			iconSrc: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isShowPromptBox: false
			}
		},
		methods: {
			showPromptBox() {
				this.isShowPromptBox = true;
				setTimeout(()=> {
					this.isShowPromptBox = false;
				}, 1000);
			}
		},
	}
</script>

<style lang="less" scoped>
	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.prompt-box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		transition: all 3s ease;
		.main-box {
			flex-direction: column;
			width: 610rpx;
			height: 290rpx;
			background: #3B3B3B;
			border-radius: 16rpx;
			padding: 0 51rpx;
			box-sizing: border-box;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			.prompt-icon {
				margin-bottom: 51rpx;
				font-size: 100rpx;
				font-weight: 500;
			}
		}
	}
</style>

main.js文件中引入注册

// 消息提示框
import PromptBox from "components/prompt-box/index";
Vue.use(PromptBox);

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖