使用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)
              
              ... // 釋放內容及其它處理
        })
    })
}