board-preview v1.0.6

BoardPreview 情报板预览组件

传入指定格式的报文，根据报文内容展示实际预览效果。

安装

# npm
npm install board-preview

# yarn
yarn install board-preview

# pnpm
pnpm install board-preview

使用

支持全局注册及手动导入

全局注册

import { createApp } from 'vue';
import App from './App.vue';
import BoardPreview from 'board-preview';

const app = createApp(App);
app.use(BoardPreview);
app.mount('#app');

手动导入

查看下方使用示例

使用示例

<template>
  <div style="width: 400px; height: 200px;">
    <BoardPreview :content="content" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { BoardPreview } from 'board-preview';

const content = ref(''); // 报文数据
</script>

BoardPreview组件会自动获取父级的宽高，并调整内部的宽高比例，以保证可以按原比例完整显示出来。

props

报文数据示例：

{
  "regionList": [
    {
      "id": "index",
      "col": 1,
      "row": 1,
      "position": { "x": 64, "y": 16 },
      "size": { "w": "640", "h": "64" },
      "data": "前方1公里有障碍物占道 请注意避让",
      "motion": {
        "joinmode": 0,
        "joinspeed": 0,
        "leavemode": 0,
        "leavespeed": 0,
        "flickercount": 0,
        "flickerspeed": 0
      },
      "type": "text",
      "retentiontime": 5,
      "fontcolor": "255000000",
      "fonttype": "黑体",
      "fontsize": 32,
      "backgroundcolor": "000000000",
      "imgfile": "",
      "imgtype": "",
      "imgsize": "",
      "brightness": 50
    }
  ]
}