vin-box

组件库基于 vue3 ，主要应用于构建大屏数据展示页面（数据可视化），鉴于每次开发都需要复制粘贴，因此打算收录常用资源。

组件库部分组件，依赖于Datav因其组件库不支持 vue3，因此参考其源码进行重新实现。

组件库分为多种种类，如功能、装饰、边框、文字标题、图表等多种类别。

组件的宽高皆为 100%，用于根据父容器宽高自适应。

由于组件皆为大屏数据展示使用，因此，demo 统一使用神色背景，组件文字等也都为浅色，如需建立白底的数据展示，需自行修改组件内容颜色。

安装

用如下方式进行安装

npm i vin-box -S
# or
yarn add vin-box

引入

你可以引入整个 vin-box，或是根据需要仅引入部分组件。我们先介绍如何引入完整的。

完整引入

在 main.js 中写入以下内容：

import { createApp } from "vue";
import VinBox from "vin-box";
import App from "./App.vue";
import "vin-box/lib/styles/index.css";

const app = createApp(App);
app.use(VinBox);
app.mount("#app");

以上代码便完成了 vin-box 的引入。需要注意的是，样式文件需要单独引入。

按需引入

如果你只希望引入部分组件，比如 Icon，那么需要在 main.js 中写入以下内容

import { createApp } from "vue";
import { Icon } from "vin-box";
import App from "./App.vue";
import "vin-box/lib/styles/components/icon.css";

const app = createApp(App);
app.use(Icon);
app.mount("#app");

特别提醒:按需引用仍然需要导入样式，即在 main.js 或根组件 import 'vin-box/lib/styles/index.css';

完整组件列表参考源代码