1、利用继承创建公共类,调用时实例化并使用
重点是:复用实例化方法
set-account-modal.vue
/*
** 一个普通的vue组件选项对象
*/
<template>
<mtd-modal
width="450px"
:visible="visible" :title="title" closable
@input="handleClose">
<div class="content">
<mtd-form ref="form" :rules="rules" :model="form">
<mtd-form-item required prop="value" label="值">
<mtd-textarea
placeholder="描述信息"
clearable
v-model="form.value"
style="width: 260px;"
rows="3" maxlength="2048">
</mtd-textarea>
</mtd-form-item>
</mtd-form>
</div>
<div slot="footer">
<mtd-button
@click="handleClose">取消</mtd-button>
</div>
</mtd-modal>
</template>
<script>
import { setConfig } from '@/api/api';
export default {
name: 'SetConfigModal',
data () {
return {
loading: false,
visible: false,
type: 'add',
title: '账号设置',
name: '',
value: '',
clusterName: '',
// 呼出该modal的tablemodule组件,用于处理modal与table的交互
tableVm: null,
form: {
name: '',
value: ''
},
rules: {
}
};
}
};
</script>
<style scoped lang="postcss">
</style>
popModal.js
/*
** 将公共组件类,通过data实例化成不同的根实例。
*/
import Vue from 'vue';
const popModal = (modalConstructor, options) => {
options = options || {};
const instance = new modalConstructor({
el: document.createElement('div'),
data: options
});
document.body.appendChild(instance.$el);
Vue.nextTick(() => {
instance.visible = true;
});
return instance;
};
export default popModal;
*.vue
/*
**
*/
import setAccountModal from './set-account-modal.vue';// 组件选项对象
import popModal from './popModal.js';// 实例化组件类
const modalConstructor = Vue.extend(setAccountModal);// 创建新Vue构造器
const options = {
title: '新建配置项',
tableVm: this.$refs.tableVm,
clusterOptions: this.clusterOptions
};
popModal(modalConstructor, options);// 实例化新Vue构造器,并传入参数