vue-ganttastic在vue3中使用示例
下载
npm install @infectoone/vue-ganttastic以全局使用为例
//main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ganttastic from '@infectoone/vue-ganttastic'
const app= createApp(App)
app.use(ganttastic)
app.mount('#app')
<template>
<div class="gantt-div">
<g-gantt-chart
chart-start="2021-07-12 00:00"
chart-end="2021-07-14 00:00"
precision="day"
bar-start="myBeginDate"
bar-end="myEndDate"
>
<g-gantt-row :bars="row1BarList" />
<g-gantt-row :bars="row2BarList" />
<g-gantt-row :bars="row3BarList" />
</g-gantt-chart>
</div>
</template>
<script setup>
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
// 全局使用中文
dayjs.locale('zh-cn');
import { ref } from "vue"
const row1BarList = ref([
{
myBeginDate: "2021-07-12 00:00",
myEndDate: "2021-07-13 12:00",
ganttBarConfig: {
// each bar must have a nested ganttBarConfig object ...
id: "unique-id-1", // ... and a unique "id" property
label: "Lorem ipsum dolorn"
}
}
])
const row2BarList = ref([
{
myBeginDate: "2021-07-13 00:00",
myEndDate: "2021-07-13 23:59",
ganttBarConfig: {
id: "another-unique-id-2",
hasHandles: true,
label: "Hey, look at me",
style: {
// arbitrary CSS styling for your bar
background: "#e09b69",
borderRadius: "20px",
color: "black"
},
class: "foo" // you can also add CSS classes to your bars!
}
}
])
const row3BarList = ref([
{
myBeginDate: "2021-07-13 00:00",
myEndDate: "2021-07-13 00:01",
ganttBarConfig: {
id: "another-unique-id-3",
hasHandles: true,
label: "Hey, look at me",
style: {
// arbitrary CSS styling for your bar
background: "#e09b69",
borderRadius: "20px",
color: "black"
},
class: "foo" // you can also add CSS classes to your bars!
}
}
])
</script>
<style scoped>
.gantt-div{
width: 100%;
height: 600px;
overflow: auto;
}
</style>