一、背景
1.1、需求
项目：nuxt2 + vue2
希望通过编程方式的调用打开对话框，展现我们想要的内容。
1.2、效果
二、代码
2.1、插件 plugins/dialog.js
import Vue from 'vue';
import { Dialog } from 'element-ui';
// 本文使用了Dialog组件，也可以使用自己开发的组件，这样就更加灵活了，根据自己的项目实际需要来定export default function programmingMethodToCallComponents(context, inject) {// context：Nuxt.js 提供的上下文对象，包括 $axios（用于 HTTP 请求）、store（Vuex 状态管理）// inject：用于将某些功能注入到全局上下文const { $axios, store, route } = context;const initInstance = (text, component, options = {}) => {const { attrs, ...otherOptions } = options;const instance = new Vue({router: store.$router,$axios,store,components: { CurrentComponent: component },data() {return {dialogVisible: false,};},methods: {open() {this.dialogVisible = true;},},render() {return (<Dialogref="dialog"title="提示"visible={this.dialogVisible}attrs={otherOptions}><div>{{ text }}</div></Dialog>);},});instance.$mount();document.body.appendChild(instance.$el);return instance.open();};inject('dialog', initInstance);
}
2.2、页面使用 pages/dialog.vue
<template><div><div @click="programmingMethodToCallComponents">dialog</div></div>
</template><script>
export default {components: {},data() {return {};},mounted() {},methods: {programmingMethodToCallComponents() {this.$dialog('我是dialog')},},
};
</script>
<style lang="less" scoped>
</style>
2.3、nuxt.config.js
plugins: [{src: '../plugins/dialog'}
]
