import{_ as n,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const e=""+new URL("base_teleport-vbaCZqqF.png",import.meta.url).href,l={};function o(c,a){return p(),s("div",null,a[0]||(a[0]=[t(`

为工具栏添加按钮

PC端

关于表单头部工具栏添加新的自定义按钮，可以使用vue的teleport组件。首先在需要添加按钮的元素上添加一个任意Id。

<template>
    <div class="page-bg-wrap">
        <a-spin :spinning="loading" tip="加载中...">
            <div class="geg-flow-page">
                <div class="top-toolbar">
                        <!-- 在a-space上添加id approveExtendButton -->
                    <a-space :size="10" wrap id="approveExtendButton" class="second-dev-space">
                        <!-- 这里是原本的按钮 省略 -->
                        
                    </a-space>
                </div>
                <div class="flow-content">
                    <FormInformation :key="randKey" ref="formInformation" :disabled="false" :formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos" :opinions="data.opinions" :opinionsComponents="data.opinionsComponents" />
                </div>
            </div>
            <!-- 无用代码省略 -->
        </a-spin>
    </div>
</template>

然后可以在生成的form.vue文件中或者拆分的CustomDevForm.vue文件中添加teleport组件

<template>
    <Teleport to="#approveExtendButton">
        <a-button style="margin-right: 10px" @click="reInquiry">
            重新查询
        </a-button>
        <a-button style="margin-right: 10px" @click="endInquiry">
            结束查询
        </a-button>
    </Teleport>
</template>

需要注意的是，teleport组件的to属性必须是一个存在的元素的id。不然会报错导致渲染失效。

teleport报错

如果可以判断目标元素不存在，可以用:disabled或者v-if来禁止teleport的使用以避免报错。

<template>
    <Teleport to="#approveExtendButton" :disabled="!isExist">
        <a-button style="margin-right: 10px" @click="reInquiry">
            重新查询
        </a-button>
        <a-button style="margin-right: 10px" @click="endInquiry">
            结束查询
        </a-button>
    </Teleport>
</template>

按钮默认添加位置是在原按钮之后，如果想在特殊位置添加按钮，比如原有按钮之前，可以在按钮前添加id特殊的一个元素如span，然后再用teleport组件添加相应按钮。

<template>
    <a-space :size="10" wrap id="approveExtendButton">
                    <span id="approveExtendButtonLeft"></span>
                        <!-- 原按钮位置 -->
    </a-space>
</template>

如果有特殊需求比如不使用原按钮，也是可以的。这里举例一种方法：定义一个参数控制原按钮块的显隐，新写一个按钮块区域显隐逻辑与原按钮块相反，然后定义一个函数变化这个参数，并将这个函数使用provide传递给孙子组件；在form或者CustomDevForm组件中接收控制原按钮块隐藏，然后将新的teleport组件内容传送到新按钮块中。这里仅仅说明思路仅供参考，具体实现可以根据实际需求进行调整。

移动端暂不支持添加按钮

`,14)]))}const i=n(l,[["render",o]]),k=JSON.parse('{"path":"/front_dev/base/teleport.html","title":"为工具栏添加按钮","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"PC端","slug":"pc端","link":"#pc端","children":[]}],"git":{"updatedTime":1744278865000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"a3e2cde9db0dbccdbce661749aef03650a6b701f","time":1744278865000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 二开文档优化"},{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/teleport.md"}');export{i as comp,k as data};