vue-plugin-hiprint开发记录二（构建可拖拽元素）

1.编写可拖拽元素的html（defaultElementTypeProvider默认模块）

<!-- 样式完全自定义 -->

 <div class="flex-row justify-center flex-wrap">
            <div class="title">基础元素</div>
            <div class="ep-draggable-item item" tid="defaultModule.text">
              <i class="iconfont sv-text" />
              <span>文本</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.image">
              <i class="iconfont sv-image" />
              <span>图片</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.longText">
              <i class="iconfont sv-longText" />
              <span>长文</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.table">
              <i class="iconfont sv-table" />
              <span>表格</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.barcode">
              <i class="iconfont sv-barcode" />
              <span>条形码</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.qrcode">
              <i class="iconfont sv-qrcode" />
              <span>二维码</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.html">
              <i class="iconfont sv-html" />
              <span>html</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.customText">
              <i class="iconfont sv-text" />
              <span>自定义</span>
            </div>


            <div class="title">辅助元素</div>
            <div class="ep-draggable-item item" tid="defaultModule.hline">
              <i class="iconfont sv-hline" />
              <span>横线</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.vline">
              <i class="iconfont sv-vline" />
              <span>竖线</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.rect">
              <i class="iconfont sv-rect" />
              <span>矩形</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.oval">
              <i class="iconfont sv-oval" />
              <span>圆形</span>
            </div>



            <!-- <div class="title">其他元素</div>
            <div
              id="provider-container"
              class="container rect-printElement-types"
            ></div> -->
          </div>

注意事项如下：

• 必须先 init 对应 provider；
• tid 与 defaultElementTypeProvider 中对应，如defaultModule.oval中的oval就是tid标识；
• 元素dom 必须包含 class="ep-draggable-item"；

2.初始化provider并构建可拖拽元素

<script setup>
import { onMounted } from "vue";
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
// 初始化 provider
hiprint.init({
  providers: [defaultElementTypeProvider()],
});
/**
 * 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */
onMounted(() => {
  buildLeftElement();
});
/**
 * 构建左侧可拖拽元素
 * 注意: 可拖拽元素必须在 hiprint.init() 之后调用
 * 而且 必须包含 class="ep-draggable-item" 否则无法拖拽进设计器
 */
const buildLeftElement = () => {
  // eslint-disable-next-line no-undef
  hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
};
</script>