nuxt2-vue2：通过编程方式调用对话框 el-dialog

一、背景

1.1、需求

项目：nuxt2 + vue2
希望通过编程方式的调用打开对话框，展现我们想要的内容。
1.2、效果

二、代码

2.1、插件 plugins/dialog.js

1. import Vue from 'vue';
2. import { Dialog } from 'element-ui';
3. // 本文使用了Dialog组件，也可以使用自己开发的组件，这样就更加灵活了，根据自己的项目实际需要来定
5. export default function programmingMethodToCallComponents(context, inject) {
6.   // context：Nuxt.js 提供的上下文对象，包括 $axios（用于 HTTP 请求）、store（Vuex 状态管理）
7.   // inject：用于将某些功能注入到全局上下文
8.   const { $axios, store, route } = context;
10.   const initInstance = (text, component, options = {}) => {
11.     const { attrs, ...otherOptions } = options;
12.     const instance = new Vue({
13.       router: store.$router,
14.       $axios,
15.       store,
16.       components: { CurrentComponent: component },
17.       data() {
18.         return {
19.           dialogVisible: false,
20.         };
21.       },
22.       methods: {
23.         open() {
24.           this.dialogVisible = true;
25.         },
26.       },
27.       render() {
28.         return (
29.           <Dialog
30.             ref="dialog"
31.             title="提示"
32.             visible={this.dialogVisible}
33.             attrs={otherOptions}
34.           >
35.             <div>{{ text }}</div>
36.           </Dialog>
37.         );
38.       },
39.     });
40.     instance.$mount();
41.     document.body.appendChild(instance.$el);
42.     return instance.open();
43.   };
44.   inject('dialog', initInstance);
45. }

复制代码

2.2、页面利用 pages/dialog.vue

1. <template>
2.   <div>
3.     <div @click="programmingMethodToCallComponents">dialog</div>
4.   </div>
5. </template>
7. <script>
8. export default {
9.   components: {},
10.   data() {
11.     return {};
12.   },
13.   mounted() {},
14.   methods: {
15.     programmingMethodToCallComponents() {
16.       this.$dialog('我是dialog')
17.     },
18.   },
19. };
20. </script>
21. <style lang="less" scoped>
22. </style>

复制代码

 2.3、nuxt.config.js

1. plugins: [
2.     {
3.         src: '../plugins/dialog'
4.     }
5. ]

复制代码

三、欢迎交换指正


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。