TypeScript
复制代码
<template>
<div v-if="isShowToolbar" ref="toolbarRef" class="kanban-toolbar"></div>
<div ref="kanbanRef" class="kanban"></div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import { kanban } from "./lib/kanban.dev.js";
import "./lib/kanban.css";
import { kanbanProps } from "./kanban";
import zhCN from "./locale/zh-CN";
defineOptions({ name: "Kanban" });
const {
columns,
columnsConfig,
cards,
cardConfig,
cardHeight,
editor,
editorConfig,
history,
readonly,
locale,
isToolbar,
} = defineProps(kanbanProps);
const kanbanRef = ref();
const kanbanInstance = ref();
const toolbarRef = ref();
const toolbarInstance = ref();
const isShowToolbar = computed<boolean>(() => isToolbar);
const { Kanban, Toolbar, defaultEditorShape } = kanban;
onMounted(() => {
kanbanInstance.value = new Kanban(kanbanRef.value, {
cards: cards,
cardShape: cardConfig,
columns: columns,
columnShape: columnsConfig,
editor: editor,
editorShape: editorConfig,
cardHeight: cardHeight,
history: history,
readonly: readonly,
locale: locale === "cn" ? zhCN : "en",
});
toolbarInstance.value = new Toolbar(toolbarRef.value, {
api: kanbanInstance.value.api,
});
});
defineExpose({
instance: kanbanInstance,
});
</script>
