DragBox拖拽盒子组件

约 718 字大约 2 分钟

...

2026-06-01

温馨提示

Designer设计器组件默认内置了很多 DragBox 组件. 比如拖拽元素，属性，页面结构等等.

Designer设计器组件参数可以自定义内置 DragBox 的参数，样式.

示例代码

<template>
  <div style="width: 100vw; height: 97vh;">
    <Designer>
      <template #other>
        <DragBox
          target="SVPrint"
          drag-key="test"
          drag-style="width:200px;height:200px;left:238px;top:95px"
          :show="true"
          :otherIconRender="otherIconRender"
        >
          <template #iconTitle>
            <i class="svicon sv-print"></i>
            <span>自定义拖拽框</span>
          </template>
          <template #body>
            <div>自定义拖拽框内容</div>
          </template>
        </DragBox>
      </template>
    </Designer>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Designer, Header, Preview, DragBox } from '@sv-print/vue3';

const otherIconRender = ref((target) => {
  // 自行插入
  console.log(target);
});
</script>

组件参数

参数键名	数据类型	默认值	说明
target	string	`SVPrint`	容器 Id 或 ClassName
dragKey	string	`default`	必填, 拖拽标识
dragStyle或style	string	`""`	必填, 默认位置,大小
mode	string	`default`	模式: "default", "top", "left", "bottom", "right", "fixed"
show	boolean	`false`	是否显示
showOtherIcon	boolean	`true`	是否显示其他按钮
otherIconRender	function	`undefined`	其他按钮渲染器
cache	boolean	`true`	是否缓存位置
cacheAnimation	boolean	`true`	加载缓存位置时是否过渡动画
radius	number	`4`	圆角半径
edgeSize	number	`10`	贴边吸附后的大小

组件插槽

插槽名称	描述
iconTitle	图标标题(mode:default 才显示)
otherIcon	右侧图标(mode:default 缩小，关闭之前)
body	内容区域

高级用法

通过插件机制，给设计器组件添加 DragBox 组件.

import type { PluginOptions } from 'sv-print';
import { DragBox, createSlots } from 'sv-print';
// import { DragBox } from '@sv-print/vue3';  // 也可以使用 vue3 版本的 DragBox 组件, 写法就是 vue3 组件的挂载方式；
interface PluginConfig {}
const onDesignedHook = (pluginConfig: PluginConfig): HookOptions => ({
  hook: 'onDesigned',
  name: 'xxx OnDesigned',
  description: 'xx插件 添加 DragBox 组件',
  priority: 1,
  run: ({ designerUtils }) => {
    // 确保 DOM 就绪
    setTimeout(() => {
      const $svPrint = globalThis.$('#SVPrint');
      if (!$svPrint || !$svPrint.length) {
        console.warn('[xxx] #SVPrint not found');
        return;
      }
      // 创建 svelte3 插槽
      const slots = createSlots({
        iconTitle: globalThis.$(`<i class="svicon sv-print"></i><span>自定义拖拽框</span>`)[0],
      });
      // 这是 svelte3 组件的挂载方式.
      const dragBox = new DragBox({
        target: $svPrint[0],
        props: {
          dragKey: 'test',
          dragStyle: 'width:200px;height:200px;left:238px;top:95px',
          show: true,
          $$scope: {},
          $$slots: slots,
        },
      });
      // 挂载到 utils 中. 方便api调用
      designerUtils.xxxDragBox = dragBox;
    }, 0);
  },
});
const plugin = (pluginConfig: PluginConfig): PluginOptions => ({
  name: 'dragboxPlugin',
  description: 'xx插件 添加 DragBox 组件',
  hooks: [onDesignedHook(pluginConfig)],
  leastHiprintVersion: '0.3.0',
});

版权所有

版权归属：sv-print

许可证：署名 4.0 国际 (CC-BY-4.0)