早前写过一篇关于vue自定义弹出询问框、输入框、提示框的贴子，当时只是实现了组件化，组件需要在各个业务模板进行引用，不能全局化使用，不太方便，本次将其改进成了全局使用，具体的业务模块不需要引入组件，直接调用main.js注册的全局方法即可。

涉及技术点：

遮罩层样式，自定义组件，子组件套用组件，子组件调用父组件方法，组件属性监听，输入框默认获得焦点，输入框数据双向绑定、组件注册

效果图如下：

询问框：

输入框：

提示框

Toast

询问框组件代码

{{caption}}{{msg}}取消确定 export default {name: 'MsgBox', props: {caption:{},show: {},msg:{},callback:{}},data() {return {}},methods: {init() {this.show = true;},close() {this.show = false;this.callback("close")},confirmClick() {this.show = false;this.callback("yes")//this.$emit('confirm');},cancelClick() { this.show = false;this.callback("no")}}}.dlg-msg-box {border-radius: 5px;width: 350px;height: 160px;background-color: #fff;padding: 30px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}

输入框组件代码

{{caption}}取消确定  export default {name: 'InputBox',props: {caption:{},value:{},show: {},callback: {}},watch: {show(val){if (val == true) {this.$nextTick(() => {this.$refs.getfocus.focus();})}},value(val){this.inputValue = val;}},data() {return {}},methods: { close() {this.show = false;},init() {this.show = true;},confirmClick() {if (this.inputValue == "") {this.$showToast({msg: '内容未填写',duration: 2000}) } else {this.callback(this.inputValue)}},cancelClick() { this.show = false;}}}.dlg-input-box {border-radius: 5px;width: 350px;height: 160px;background-color: #fff;padding: 30px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}

提示框组件代码

{{caption}}{{msg}}确定 export default {name: 'MsgShow',props: {caption:{},show: {},msg:{},callback:{}},data() {return {}},methods: {init() {this.show = true;},close() {this.show = false;},confirmClick() {this.show = false;this.callback("yes");}}}.dlg-show {border-radius: 5px;width: 300px;height: 140px;background-color: #fff;padding: 30px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}

toast组件代码

{{msg}} export default {name: 'Toast', props: {show: {},msg:{},duration: {type: Number,default: 2000}},data() {return {timerDuration: null}},watch: {show(n) {if (!n && this.timerDuration) {clearTimeout(this.timerDuration)this.timerDuration = null}}},methods: {init() {this.show = truethis.timerDuration = setTimeout(() => {this.show = false}, this.duration)},clear() {this.show = false} }}.dlg-show1 {border-radius: 5px;width: 300px;background-color: #ffffff;padding: 10px;height: 30px;position: absolute;margin-left: auto;margin-right: auto;top: 20px;left: 0;right: 0;bottom: 0;}

js代码

import MsgBox from '@/components/MsgBox.vue'let ConfirmConstructor, instanceconst showMsgBox = {install(Vue) {ConfirmConstructor = Vue.extend(MsgBox)instance = new ConfirmConstructor().$mount()document.body.appendChild(instance.$el)Vue.prototype.$showMsgBox = options => {Object.assign(instance, options)instance.init()}}}export default showMsgBox
import InputBox from '@/components/InputBox.vue'let ConfirmConstructor, instanceconst showInputBox = {install(Vue) {ConfirmConstructor = Vue.extend(InputBox)instance = new ConfirmConstructor().$mount()document.body.appendChild(instance.$el)Vue.prototype.$showInputBox = options => {Object.assign(instance, options)instance.init()}}}export default showInputBox
import MsgShow from '@/components/MsgShow.vue'let ConfirmConstructor, instanceconst showMsgShow = {install(Vue) {ConfirmConstructor = Vue.extend(MsgShow)instance = new ConfirmConstructor().$mount()document.body.appendChild(instance.$el)Vue.prototype.$showMsgShow = options => {Object.assign(instance, options)instance.init()}}}export default showMsgShow
import Toast from '@/components/Toast.vue'let ConfirmConstructor, instanceconst showToast = {install(Vue) {ConfirmConstructor = Vue.extend(Toast)instance = new ConfirmConstructor().$mount()document.body.appendChild(instance.$el)Vue.prototype.$showToast = options => {Object.assign(instance, options)instance.init()}Vue.prototype.$showToast.clear = () => {instance.clear()}}}export default showToast

调用代码

vue自定义全局弹出询问框、输入框、提示框、toast询问框输入框提示框Toast/* 名称：vue自定义全局弹出询问框、输入框、提示框、toast 功能：自定义属于自己的弹出窗，涉及到技术点：遮罩层样式，自定义组件，子组件套用组件，子组件调用父组件方法，组件属性监听，输入框默认获得焦点，输入框数据双向绑定 作者：唐赢时间：2023-3-5*/export default {name: 'Main',data () {return {}},methods: {MsgBoxClick() {this.$showMsgBox({caption:"询问",msg: '确定要删除该条记录吗？',callback:(data) => {if (data == "yes") {this.$showToast({msg: '点了确定',duration: 2000})} else {this.$showToast({msg: '点了取消',duration: 2000})}}})},InputBoxClick() {this.$showInputBox({caption:"提示",inputValue: '标题1',callback:(data) => {console.log("最新的值", data);}})}, MsgShowClick() {this.$showMsgShow({caption:"提示",msg: '操作完毕！',callback:(data) => {console.log(data);}})},ToastClick(){this.$showToast({msg: '网络错误',duration: 2000})}},}.body {display: flex;justify-content: center;margin-top: 73px;width: 100%;}.table {background-color: #fff;width: 1080px;min-height: 800px;box-shadow: 0px 3px 6px rgba(0, 0, 0, .1);margin-bottom: 10px;}.filter {display: flex;height: 60px;align-items:center;background-color: #fff;font-size: 18px;justify-content: center;border-bottom: 1px solid rgba(0, 0, 0, .2);;}

main.js代码

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import "./assets/css/base.css"import ShowToast from './assets/js/toast'import ShowInputBox from './assets/js/inputBox'import ShowMsgBox from './assets/js/msgBox'import ShowMsgShow from './assets/js/msgShow'Vue.use(ShowToast)Vue.use(ShowInputBox)Vue.use(ShowMsgBox)Vue.use(ShowMsgShow)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({el: '#app',router,components: { App },template: ''})

操作演示地址：https://lusun.com/v/cR9piucUW1r

源码地址：https://download.csdn.net/download/gdgztt/87535048