vue 全局弹窗内容自定义

最近项目中要用到二次确认组件，因为考虑到多出使用多次回调所以普通的公共组件满足不了。
我需要的是this.massage();这种，所以就自己封装了一个，全局都可以使用

在 src/components 下创建公共组件 visible.vue

visible.vue

<!-- 二次确认组件 -->
<template>
	<section class='visible'>
		<el-dialog :visible.sync="visible" top="35vh" :destroy-on-close="true" width="752px">

			<div class="title">

				<h1>{
   
   {title}}</h1>

				<i @click="visible = false" class="iconfont iconguanbiicon-"></i>

			</div>

			<div class="fieos">

				<div class="pont_item">

					<img width="25px" height="25px" class="mr20" src="@/assets/image/[email protected]" alt="">

					<p>{
   
   {text}}</p>

				</div>

				<div class="pont_item flex_justify_end">

					<el-button @click="visible=false">取消</el-button>

					<el-button @click="onSub" type="primary">确定</el-button>

				</div>

			</div>

		</el-dialog>
	</section>
</template>
   
<script>
export default {

	data() {
		return {
            visible:true
		};
	},

	methods: {
        onSub(){
            this.determine(true)
            
            setTimeout(()=>{
                this.visible = false;
            },200)
        }
	},

};
</script>

assets/js创建 plug.js

import vue from 'vue'
import toastComponent from '@/components/visible.vue'

// 返回扩展实例构造器
const ToastConstructor = vue.extend(toastComponent)

// 三个参数 determine是回调函数，点击确认回调
function showVisible(title = '提示', text = '文本', determine = () => {}) {
    const toastDom = new ToastConstructor({
        el: document.createElement('div'),
        data() {
            return {
                title,
                text,
                determine,
            }
        }
    })
    document.body.appendChild(toastDom.$el)
}

// 注册为全局组件
function registryToast() {
    vue.prototype.$visible = showVisible
}

export default registryToast

main.js 引入plug.js

import visible from './assets/js/plug';
Vue.use(visible)

在组件中使用

this.$visible('删除科室', '是否删除此科室？', res => {
	console.log(res);// 点击了确认
 })

vue 全局弹窗内容自定义

猜你喜欢