使用组件

$ npm i --save @tovoo/visual

注册

参考 Ant Design Vue 注册使用方法

如果你使用的 Vite，你可以使用 unplugin-vue-components 来进行按需加载，需要向 plugins 添加以下方法 可实现自动加载组件及对应

import { ScreenBox, ScreenLoading } from '@tovoo/visual';
import '@tovoo/visual/es/screen-box/style/css'; //vite只能用 @tovoo/visual/es 而非 @tovoo/visual/lib
import '@tovoo/visual/es/screen-loading/style/css'; //vite只能用 @tovoo/visual/es 而非 @tovoo/visual/lib

或者

向 plugins 添加以下方法 可实现自动加载组件及对应样式

// vite.config.js
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';

import { TovooResolver } from '@tovoo/visual/resolver';

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      Components({
        resolvers: [
          TovooResolver(),
        ],
      }),
    ],
  };
});

// App.vue
<template>
  <t-screen-loading v-if="!show" loading-text="正在加载中，请稍后...121111" />
    <t-screen-box v-else :size="[1920, 1080]">
    <div>ScreenBox</div>
    <div>ScreenBox123123</div>
  </t-screen-box>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const show = ref(false);

onMounted(() => {
  setTimeout(() => {
    show.value = true;
  }, 2000);
});
</script>

ScreenBox

属性说明如下：

| 属性 | 说明 | 类型 | 默认值 | | :----- | :----- | :----- | :----- | | size | 大屏尺寸 | Array | [1920, 1080] |

ScreenLoading

属性说明如下：

| 属性 | 说明 | 类型 | 默认值 | | :----- | :----- | :----- | :----- | | type | loading类型 | string | 1 | | loadingText | loading文字 | string | 正在加载中，请稍后... | | backgroundColor | loading背景颜色 | string | #000000 | | textColor | loading文字颜色 | string | #ffffff |