npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-gantt-chart

v1.0.11

Published

基于 Vue 的可拖拽的弹性甘特图

Downloads

58

Readme

Gantt Chart -Javascript - Vue

一个特殊的业务轮子

Demo

预览

Feature

  • 宽高可变自适应
  • 拖拽功能
  • 右击自定义事件
  • 首行粘性

Screenshot

Demo Demo2

Install

npm

npm i vue-gantt-chart --save

yarn

yarn add vue-gantt-chart

Include plugin in your main.js file.

import GanttChart from 'vue-gantt-chart'
import 'vue-gantt-chart/lib/vue-gantt-chart.css';
Vue.use(GanttChart)

Use

Template

<template>
    <GanttChart
        :gantt-data="GanttData"
        :gantt-current-time="GanttCurrentTime"
        :first-line-stick="firstLineStick"
        :time-section="GanttTime"
        :chart-max-height="ChartHeight"
        :float-view-render-fn="floatRender"
        @rightClick.native="handleRightClick"
    >
        <template #side-box="{item}">
          <!--侧边栏组件-->
          <SideComponent :side-info="item" />
        </template>
        <template #container-box="{item}">
          <!--内容栏组件-->
          <ContentComponent :content-info="item" />
        </template>
    </GanttChart>
</template>

API

Attributes

| param | required | type | default | describe | |------------|----------|-------|---------|----------| | timeSection | √ | Array | | 甘特图的时间区间 ['2021/02/21', '2021/02/24']| | gantt-data | √ | Array | | 甘特图的数据来源 []| | gantt-current-time | X | Number | new Date().getTime() | 甘特图时间轴渲染的当前时间 | | first-line-stick | X | Boolean | true | 首行是否粘性| | chartMaxHeight | X | Number | 500 | 甘特图内容最大高度| | show-header | X | Boolean | true | 是否渲染表头| | header-data | X | Array | ['日期', '时间'] | 表头标题| | floatViewRenderFn | X | Function | () => { return (info) => info } | Tip渲染函数 |

gantt-data

gantt-data需要满足特殊的数据格式才能被正常的渲染,外层对象渲染为甘特条需要childArray属性用于承载甘特块,内层对象渲染为甘特块,需要startend用于计算偏移的像素

[
  {
    //整行的甘特块具有的属性
    "childArray":[// 渲染在甘特块上的甘特条
                    {
                      // 甘特条具有的属性
                      "start":"2021/02/26 07:08",// 甘特条渲染的起始时间
                      "end":"2021/02/26 08:44"// 甘特条渲染的结束时间
                    }
                  ]
  }
]
floatViewRenderFn

floatViewRenderFn作为渲染函数用于渲染甘特块的部分数据到甘特块的Tip上.

(info) => `<div>${info.start}</div><div>${info.end}</div>`

Event

| param | describe | |------------|----------| |rightClick|甘特块右击会触发事件,抛出自定义事件对象,甘特块的数据被包含在event.detail中|

Scoped Slot

<template #side-box="{item}">
  <SideComponent :side-info="item" />
</template>
<template #container-box="{item}">
  <ContentComponent :content-info="item" />
</template>

| name | describe | |------------|----------| |#side-box|具名插槽,传递自定义数据项的内容,参数为 { item }| |#container-box|具名插槽,传递自定义数据项的内容,参数为 { item }|

开源协议

MIT