Dhtmlx KanBan 付费版使用

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>
相关推荐
前端九哥14 分钟前
我删光了项目里的 try-catch,老板:6
前端·vue.js
顽疲26 分钟前
SpringBoot + Vue 集成阿里云OSS直传最佳实践
vue.js·spring boot·阿里云
一 乐1 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理
百锦再1 小时前
Python、Java与Go:AI大模型时代的语言抉择
java·前端·vue.js·人工智能·python·go·1024程序员节
菩提树下的凡夫1 小时前
前端vue的开发流程
前端·javascript·vue.js
Zz燕2 小时前
G6实战_手把手实现简单流程图
javascript·vue.js
極光未晚2 小时前
乾坤微前端项目:前端处理后台分批次返回的 Markdown 流式数据
前端·vue.js·面试
前端赵哈哈2 小时前
Vite 构建后产品详情页图片失效?从路径匹配到映射表的完美解决
前端·vue.js·vite
明月与玄武3 小时前
JS 自定义事件:从 CustomEvent 到 dispatchEvent!
前端·javascript·vue.js
Zhencode3 小时前
vue之异步更新队列
前端·javascript·vue.js