使用vue和d3.js實現的dialog,messagebox,confirm,alert彈框

hyuan 發布于2019-08-20 17:27 / 2467人閱讀

摘要：使用與制作的一款彈框插件演示地址使用與安裝安裝運行使用到的工具目錄結構實現思路使用和做好控件后在公共接口處進行控件實例化關鍵代碼進行的設置綁定事件及其它操作釋放內容及其它處理

使用Vue與d3.js制作的一款彈框插件

演示地址

使用與安裝

//安裝

npm install

//運行

npm run build

使用到的工具

gulp

rollup

vue

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

云服務器 GPU云服務器 alert_confirm d3.js和數據庫 activity實現dialog php使用alert

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83592.html

在Vue項目中使用ElementUI(一)

摘要：這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作，并詢問是否進行此操作時會用到此對話框。。初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

linkin 2019-08-02 15:27 評論0 收藏0
在Vue項目中使用ElementUI(一)

摘要：這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作，并詢問是否進行此操作時會用到此對話框。。初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

shadowbook 2019-08-23 18:27 評論0 收藏0
在Vue項目中使用ElementUI(一)

摘要：這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作，并詢問是否進行此操作時會用到此對話框。。初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

NicolasHe 2019-08-30 11:18 評論0 收藏0
Nuxt.js按需引入 emement-ui

摘要：全面配置文章系列安裝依賴修改修改 ???nuxt.js全面配置??? ???nuxt文章系列??? babel-plugin-component 安裝依賴 npm i -D babel-plugin-component // or yarn add -D babel-plugin-component 修改nuxt.config.js module.exports = { bui...

microcosm1994 2019-08-23 14:08 評論0 收藏0