vue项目中创建全局组件

在项目中需要用到一个确认删除的弹窗，因为有多个地方需要用到这个提示框，不想每次用的时候都要引入一次这个弹窗组件，因此把它做成了一个全局组件；这里使用了element UI的dialog来实现的弹窗效果。
操作步骤如下：
1、在components中创建一个sysTips.vue组件

//sysTips.vue代码
<template>
	<div class="confirmDel">
		<el-dialog custom-class="systips" :title="title" top="35vh" :visible.sync="visible" :close-on-click-modal="false"
		 :before-close="handleClose">
			<span class="delcontent">{{content}}</span>
			<span slot="footer" class="dialog-footer">
				<span class="determine" @click="Determine()">{{determine}}</span>
				<span class="cancel" @click="handleClose">{{cancel}}</span>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				title: '系统提示',
				content: '', //提示内容
				iconName: 'delIcon', //图标名称 closeIcon  delIcon
				cancel: '取 消', //灰色按钮的文字
				determine: '确认删除', //红色按钮的文字
				time: 1000,
				clickDetermine: '', //确定
				clickCancel: '', //取消

			};
		},
		watch: {
			visible(newValue, oldValue) {
				if (!newValue) {
					// 当弹窗状态为隐藏时
					var confirmDels = document.getElementsByClassName('confirmDel');
					if (confirmDels.length >= 2) {
						// 如果页面中类名为confirmDel的元素个数大于等于2时，则删除第一个元素，确保页面中只有一个confirmDel元素
						let confirmdel = confirmDels[0];
						document.body.removeChild(confirmdel);
					}
				}
			}
		},
		methods: {
			close() {
				if (this.type == 1) {
					// 用于弹窗自动关闭的方法
					window.setTimeout(() => {
						this.visible = false
					}, this.time);
				}
			},
			handleClose() {
				// 点击取消按钮时触发的函数
				if (this.clickCancel) {
					this.clickCancel();
				}
				this.visible = false;//关闭弹窗
			},
			Determine() { 
				// 点击确定按钮时触发的函数
				if (this.clickDetermine) {
					this.clickDetermine();
				}
				this.visible = false;//关闭弹窗
			}
		},
	};
</script>
<style>
//样式部分就不写了
</style>

2、在utils中创建一个confirmDel.js文件，用于创建全局组件。

//confirmDel.js文件代码
import Vue from 'vue'
import confirmDel from '@/components/sysTips.vue';

//使用Vue.extend来创建全局组件
const messageBox = Vue.extend(confirmDel)
confirmDel.install = function (options) {
//使用$mount()给组件手动挂载参数
  let instance = new messageBox({
    data: options
  }).$mount()
  
  document.body.appendChild(instance.$el); //将组件插入页面中
  Vue.nextTick(() => {
		// 设置弹窗为显示状态
    instance.visible = true 
  })
}
export default confirmDel

3、在main.js中挂载该弹窗

// main.js中代码片段
import confirmDel from './utils/confirmDel.js'
Vue.prototype.$confirmDel = confirmDel.install; //确认删除弹窗

4、在任意组件中使用

// 组件中使用的代码片段
<template>
	<div>
		<el-button type="danger" plain @click = "handleClick()">删除按钮</el-button>
	</div>
</template>
<script>
  export default{
  	methods: {
		handleClick(){
			// 点击删除按钮触发的事件，到这里就能弹窗提示框了
			// 如title之类的参数，不传的话使用默认值
			this.$confirmDel({
				title:'提示框',
				content:'确认删除该条数据吗？',
				determine:'确认',
				cancel:'取消',
				clickDetermine:()=>{
					// 点击确认按钮触发的函数，在这里可以上axios请求调用接口删除数据库中数据
					console.log("删除成功了！")
				},
				clickCancel:()=>{
					// 点击取消按钮时触发的函数，如果没有需要触发的函数可以不用写这方法
					console.log("取消了啦！")
				}
			})
		},
	}
  }
  </script>

最后

以上就是饱满小霸王为你收集整理的vue项目中创建全局组件的全部内容，希望文章能够帮你解决vue项目中创建全局组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。