vue.js实现全局调用MessageBox组件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue.js实现全局调用MessageBox组件,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3454字,纯文字阅读大概需要5分钟。
内容图文
![vue.js实现全局调用MessageBox组件](/upload/InfoBanner/zyjiaocheng/298/e6d3bcb256cd4681961d1e4de5626017.jpg)
组件模板
// /src/components/MessageBox/index.vue <template> <p class="message-box" v-show="isShowMessageBox"> <p class="mask" @click="cancel"></p> <p class="message-content"> <svg class="icon" aria-hidden="true" @click="cancel"> <use xlink:href="#icon-delete" rel="external nofollow" ></use> </svg> <h3 class="title">{{ title }}</h3> <p class="content">{{ content }}</p> <p> <input type="text" v-model="inputValue" v-if="isShowInput" ref="input"> </p> <p class="btn-group"> <button class="btn-default" @click="cancel" v-show="isShowCancelBtn">{{ cancelBtnText }}</button> <button class="btn-primary btn-confirm" @click="confirm" v-show="isShowConfimrBtn">{{ confirmBtnText }}</button> </p> </p> </p> </template> <script> export default { props: { title: { type: String, default: '标题' }, content: { type: String, default: '这是弹框内容' }, isShowInput: false, inputValue: '', isShowCancelBtn: { type: Boolean, default: true }, isShowConfimrBtn: { type: Boolean, default: true }, cancelBtnText: { type: String, default: '取消' }, confirmBtnText: { type: String, default: '确定' } }, data () { return { isShowMessageBox: false, resolve: '', reject: '', promise: '' // 保存promise对象 }; }, methods: { // 确定,将promise断定为resolve状态 confirm: function () { this.isShowMessageBox = false; if (this.isShowInput) { this.resolve(this.inputValue); } else { this.resolve('confirm'); } this.remove(); }, // 取消,将promise断定为reject状态 cancel: function () { this.isShowMessageBox = false; this.reject('cancel'); this.remove(); }, // 弹出messageBox,并创建promise对象 showMsgBox: function () { this.isShowMessageBox = true; this.promise = new Promise((resolve, reject) => { this.resolve = resolve; this.reject = reject; }); // 返回promise对象 return this.promise; }, remove: function () { setTimeout(() => { this.destroy(); }, 300); }, destroy: function () { this.$destroy(); document.body.removeChild(this.$el); } } }; </script> <style lang="scss" scoped> // 此处省略 ... </style>
给组件添加全局功能
vue.js官方文档中有开发插件的介绍。具体实现代码如下:
// /src/components/MessageBox/index.js import msgboxVue from './index.vue'; // 定义插件对象 const MessageBox = {}; // vue的install方法,用于定义vue插件 MessageBox.install = function (Vue, options) { const MessageBoxInstance = Vue.extend(msgboxVue); let currentMsg, instance; const initInstance = () => { // 实例化vue实例 currentMsg = new MessageBoxInstance(); let msgBoxEl = currentMsg.$mount().$el; document.body.appendChild(msgBoxEl); }; // 在Vue的原型上添加实例方法,以全局调用 Vue.prototype.$msgBox = { showMsgBox (options) { if (!instance) { initInstance(); } if (typeof options === 'string') { currentMsg.content = options; } else if (typeof options === 'object') { Object.assign(currentMsg, options); } return currentMsg.showMsgBox(); } }; }; export default MessageBox;
全局使用
// src/main.js import MessageBox from './components/MessageBox/index'; Vue.use(MessageBox);
页面调用
按照之前定义好的方法,可以在各个页面中愉快的调用该组件了。
this.$msgBox.showMsgBox({ title: '添加分类', content: '请填写分类名称', isShowInput: true }).then(async (val) => { // ... }).catch(() => { // ... });
最后来张效果图
希望大家对Vue.js组件知识由一个更清晰的掌握,大家赶紧动手操作一下吧。
相关推荐:
什么是Vue.js组件?Vue.js组件用法汇总
深入探讨Vue.js组件和组件通信
详细介绍c#消息提示框messagebox的使用
以上就是vue.js实现全局调用MessageBox组件的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的vue.js实现全局调用MessageBox组件全部内容,希望文章能够帮你解决vue.js实现全局调用MessageBox组件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。