使用vue和d3.js实现的dialog,messagebox,confirm,alert弹框

使用Vue与d3.js制作的一款弹框插件

演示地址

---

使用与安装

//安装

npm install

//运行

npm run build

---

使用到的工具

• gulp

• rollup

• vue

• d3

• jsdoc

• sass

---

目录结构

---

实现思路

使用d3.js和vue.js做好控件后在公共接口处进行控件实例化

关键代码：

import modalbase from './modal.vue'
let ModalConstructor = Vue.extend(modalbase)

export const ModalFactory = function (options = {}) {
    
    ... //进行propsData的设置
    
    instance = new ModalConstructor({
      el: document.createElement('div'),
      propsData: defaultOptions
    })
    
    ... //绑定事件及其它操作
    
    document.body.appendChild(instance.$el)
    
    return new Promise(function(resolve,reject){
        instance.open().then(function(){
              instance
                  .$el
                  .parentNode
                  .removeChild(instance.$el)
              
              ... // 释放内容及其它处理
        })
    })
}