概述

Excalidraw是一个非常好用的画图板工具，但是是用React写的，本文分享一种在Vue项目中使用的方法。

效果

image.png image.png

实现

Excalidraw简介

这篇文章(Excalidraw 完美的绘图工具：https://zhuanlan.zhihu.com/p/684940131)介绍的很全面，大家移步可以过去看看。

使用

• 官方文档：https://docs.excalidraw.com/docs

1. 引入依赖

npm install react react-dom @excalidraw/excalidraw
# 或
yarn add react react-dom @excalidraw/excalidraw

2.添加配置

修改vite.config.js，添加如下配置：

export default defineConfig({
  ...,
  define: {
    'process.env': {}
  },
})

3.页面使用

在Vue文件中的使用方式如下：

<template>
  <div class="container">
    <div class="header">
      LZUGIS
    </div>
    <div class="excalidraw" id="excalidraw"></div>
    <div class="footer">
      @lzugis 2024
    </div>
  </div>
</template>

<script>
import { createRoot } from "react-dom/client";
import React from "react";
import { Excalidraw } from "@excalidraw/excalidraw";

let root = null;

export default {
  data() {
    return {};
  },
  mounted() {
    root = createRoot(document.getElementById('excalidraw'));
    root.render(
      React.createElement(Excalidraw, {
        // props
      })
    );
  },
  unmounted() {
    root.unmount();
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .header {
    height: 3rem;
    line-height: 3rem;
    padding: 0 1rem;
    font-size: 1.2rem;
    background-color: #038fe5;
    color: white;
  }
  .footer {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background-color: #038fe5;
    color: white;
  }
  .excalidraw {
    flex-grow: 1;
  }
}
</style>