BSDesigner

Appearance

工具栏 ​

img.png

img.png

基础功能 ​

  • 删除按钮：删除当前选中的组件。
  • 图片按钮：插入图片。
  • 交互组件
    • 下拉选择框：插入交互组件。
  • 视频组件：插入视频。
  • 表格组件：插入表格。

img_1.png

  • 缩放按钮：放大或缩小画布。

img_2.png

编辑功能 ​

  • 显示组件边框：显示或隐藏组件的边框。

    • 显示 img_6.png
    • 隐藏 img_5.png

  • 选择大间距：

    • 默认间距 img_3.png
    • 大间距 img_4.png

  • 关闭交互按钮：关闭当前选中的交互组件。

  • 等比例缩放按钮：打开后，修改组件大小时，会保持比例修改。

  • 参考线按钮：打开后，显示参考线。 img_7.png

  • 调整大小/变形按钮： img_8.png

    • 调整大小 img_9.png
    • 变形 img_10.png

  • 数据集 img_11.png

  • 变量设置 img_12.png

  • 组合img_13.png 用于组合多个组件。

  • 取消组合img_14.png 用于取消组合多个组件。

  • 导出数据 img_15.png 导出当前画布的数据。

  • 导入数据 img_16.png 导入数据到当前画布。

  • 历史修改记录 img_17.png 查看历史10分钟内，每分钟保存的修改记录。

扩张功能 ​

img_18.png 在toolbar右方，可以自定义设置

vue

<template>
    <big-screen-designer :components="components" :name="name" :config="options">
        <template #left-extend>left-extend</template>
        <template #right-extend>right-extend</template>
    </big-screen-designer>
</template>
<script>
    import {BigScreenDesigner} from 'big-screen-designer'

    export default {
        components: {
            BigScreenDesigner
        },
        data() {
            return {
                components: [],
                name: '大屏设计器',
                config: {}
            };
        }
    }
</script>