Vue&Element UI 一点点小封装(1)

如果App.vue内有3个弹窗组件a、b、c;a可以弹出b、c;b可以弹出c,代码怎样组织比较好?

  • 思路1:所有弹窗均写在App.vue中,a、b弹出子弹窗时回调在App.vue中处理,使用三个变量分别去控制弹窗的展示
  • 思路2:App.vue内只有a;a内部包含b、c;b内部包含c,弹窗内部去控制子弹窗的展示

一点点小想法

以上两个思路均要控制多个弹窗的展示/关闭逻辑,且需要侵入App.vue代码,如果本身App.vue代码已经很复杂,会造成更令人崩溃的代码体积。

一点点小问题

能不能去掉页面与弹窗之间的关联?

能不能在任意位置进行弹窗的呼出/关闭?

一点点小封装

  1. 获取所有vue组件
const allFiles = require.context('./', true, /\.vue/);
let allComponents = [];
allFiles.keys().forEach(path => {
    const com = allFiles(path)
    let lastIndex = path.lastIndexOf('/');
    const comName = path.substring(lastIndex + 1).split('.vue')[0];
    if (comName) {
        allComponents.push({
            name: comName,
            path,
            component: com.default || com
        });
    }
})
复制代码
  1. 绑定全部组件 or 弹窗组件
let _bindComponents = function(coms) {
    coms.map(item => {
        Vue.component(item.name, item.component)
    })
}
复制代码
  1. 根据v-for和component动态组件语法创建弹窗容器
let dom = document.getElementById(this._veqsConfig.id);
const Dialogs = Vue.extend({
    template: 
        `<div>
            <component v-for="(dialog, index) in dialogs" v-if="dialog.isShow" :is="dialog.dialogType" :dialog="dialog"></component>
        </div>`,
    data() {
        return {
            dialogs: []
        }
    }
});
this._Dialogs = new Dialogs().$mount();
dom.appendChild(this._Dialogs.$el);
复制代码

小封装的使用

main.js

//绑定实例及原型
import veqs from './veqs';
veqs._bindInstance({
  id: 'app',
  autoBindComponents: true
});
Vue.prototype.veqs = veqs;
复制代码

App.Vue

// 激活弹窗
let dialogConfig = {
    dialogType: 'aDialog',      // 弹窗组件名称
    item: {}
}
this.veqs._addDialogFunc(dialogConfig);
// 关闭弹窗
dialogConfig.close();
复制代码

现在无论怎样的层级,都可以实现视图与弹窗的分层,应该可以很简单的实现文初的一点点小需求了

欢迎讨论!

具体代码 vue-element-quick-start

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章