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

hyuan 发布于2019-08-20 17:27 / 2350人阅读

摘要：使用与制作的一款弹框插件演示地址使用与安装安装运行使用到的工具目录结构实现思路使用和做好控件后在公共接口处进行控件实例化关键代码进行的设置绑定事件及其它操作释放内容及其它处理

使用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)
              
              ... // 释放内容及其它处理
        })
    })
}

服务器托管专线服务 alert_confirm d3.js和数据库 activity实现dialog php使用alert

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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