当前位置:Gxlcms > JavaScript > vue.js开发实现全局调用的MessageBox组件实例代码

vue.js开发实现全局调用的MessageBox组件实例代码

时间:2021-07-01 10:21:17 帮助过:10人阅读

前言

一开始接触到vue中的组件的时候,对于组件的理解还是不够充分的,最近在开发个人博客项目中,一开始就没准备使用一些现在比较流行的UI库(毕竟是个人项目,多练练手还是好的),所以需要自己开发几个全局组件,这里以MessageBox为例记录下vue.js如何开发全局组件。所谓全局变量是针对vue实例下说的,即所有的vue实际都可以运用到这个组件,局部组件就是针对某个实例来说的,只有这个vue实例下才能发挥作用,下面话不多说了,来一看看详细的介绍吧。

源码

github地址:Talk is cheap. Show me the code.

本地下载地址:http://xiazai.jb51.net/201711/yuanma/vue-messagebox(jb51.net).rar

组件模板

  1. // /src/components/MessageBox/index.vue
  2. <template>
  3. <div class="message-box" v-show="isShowMessageBox">
  4. <div class="mask" @click="cancel"></div>
  5. <div class="message-content">
  6. <svg class="icon" aria-hidden="true" @click="cancel">
  7. <use xlink:href="#icon-delete" rel="external nofollow" ></use>
  8. </svg>
  9. <h3 class="title">{{ title }}</h3>
  10. <p class="content">{{ content }}</p>
  11. <div>
  12. <input type="text" v-model="inputValue" v-if="isShowInput" ref="input">
  13. </div>
  14. <div class="btn-group">
  15. <button class="btn-default" @click="cancel" v-show="isShowCancelBtn">{{ cancelBtnText }}</button>
  16. <button class="btn-primary btn-confirm" @click="confirm" v-show="isShowConfimrBtn">{{ confirmBtnText }}</button>
  17. </div>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. export default {
  23. props: {
  24. title: {
  25. type: String,
  26. default: '标题'
  27. },
  28. content: {
  29. type: String,
  30. default: '这是弹框内容'
  31. },
  32. isShowInput: false,
  33. inputValue: '',
  34. isShowCancelBtn: {
  35. type: Boolean,
  36. default: true
  37. },
  38. isShowConfimrBtn: {
  39. type: Boolean,
  40. default: true
  41. },
  42. cancelBtnText: {
  43. type: String,
  44. default: '取消'
  45. },
  46. confirmBtnText: {
  47. type: String,
  48. default: '确定'
  49. }
  50. },
  51. data () {
  52. return {
  53. isShowMessageBox: false,
  54. resolve: '',
  55. reject: '',
  56. promise: '' // 保存promise对象
  57. };
  58. },
  59. methods: {
  60. // 确定,将promise断定为resolve状态
  61. confirm: function () {
  62. this.isShowMessageBox = false;
  63. if (this.isShowInput) {
  64. this.resolve(this.inputValue);
  65. } else {
  66. this.resolve('confirm');
  67. }
  68. this.remove();
  69. },
  70. // 取消,将promise断定为reject状态
  71. cancel: function () {
  72. this.isShowMessageBox = false;
  73. this.reject('cancel');
  74. this.remove();
  75. },
  76. // 弹出messageBox,并创建promise对象
  77. showMsgBox: function () {
  78. this.isShowMessageBox = true;
  79. this.promise = new Promise((resolve, reject) => {
  80. this.resolve = resolve;
  81. this.reject = reject;
  82. });
  83. // 返回promise对象
  84. return this.promise;
  85. },
  86. remove: function () {
  87. setTimeout(() => {
  88. this.destroy();
  89. }, 300);
  90. },
  91. destroy: function () {
  92. this.$destroy();
  93. document.body.removeChild(this.$el);
  94. }
  95. }
  96. };
  97. </script>
  98. <style lang="scss" scoped>
  99. // 此处省略 ...
  100. </style>

给组件添加全局功能

vue.js官方文档中有开发插件的介绍。具体实现代码如下:

  1. // /src/components/MessageBox/index.js
  2. import msgboxVue from './index.vue';
  3. // 定义插件对象
  4. const MessageBox = {};
  5. // vue的install方法,用于定义vue插件
  6. MessageBox.install = function (Vue, options) {
  7. const MessageBoxInstance = Vue.extend(msgboxVue);
  8. let currentMsg, instance;
  9. const initInstance = () => {
  10. // 实例化vue实例
  11. currentMsg = new MessageBoxInstance();
  12. let msgBoxEl = currentMsg.$mount().$el;
  13. document.body.appendChild(msgBoxEl);
  14. };
  15. // 在Vue的原型上添加实例方法,以全局调用
  16. Vue.prototype.$msgBox = {
  17. showMsgBox (options) {
  18. if (!instance) {
  19. initInstance();
  20. }
  21. if (typeof options === 'string') {
  22. currentMsg.content = options;
  23. } else if (typeof options === 'object') {
  24. Object.assign(currentMsg, options);
  25. }
  26. return currentMsg.showMsgBox();
  27. }
  28. };
  29. };
  30. export default MessageBox;

全局使用

  1. // src/main.js
  2. import MessageBox from './components/MessageBox/index';
  3. Vue.use(MessageBox);

页面调用

按照之前定义好的方法,可以在各个页面中愉快的调用该组件了。

  1. this.$msgBox.showMsgBox({
  2. title: '添加分类',
  3. content: '请填写分类名称',
  4. isShowInput: true
  5. }).then(async (val) => {
  6. // ...
  7. }).catch(() => {
  8. // ...
  9. });

最后来张效果图


总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

人气教程排行