Invoice 发票

发票信息录入组件，支持发票类型、抬头、税号和内容选择

演示

9:41

代码示例

<!-- 隐藏状态 -->
  <re-button theme="primary" @click="showDefault = true">打开发票</re-button>
  <re-invoice class="demo-default" :visible="showDefault" @update:visible="showDefault = $event" />

<!-- 显示状态 -->
  <re-button theme="primary" @click="showVisible = true">显示发票面板</re-button>
  <re-invoice class="demo-visible" :visible="showVisible" @update:visible="showVisible = $event" />

<!-- 预设类型 -->
  <re-button theme="primary" @click="showType = true">预设类型</re-button>
  <re-invoice class="demo-type" type="增值税专用发票" :visible="showType" @update:visible="showType = $event" />

<!-- 预设抬头 -->
  <re-button theme="primary" @click="showTitle = true">预设抬头</re-button>
  <re-invoice class="demo-title" title="某某科技有限公司" :visible="showTitle" @update:visible="showTitle = $event" />

<!-- 预设税号 -->
  <re-button theme="primary" @click="showTax = true">预设税号</re-button>
  <re-invoice class="demo-tax" taxNumber="91110000XXXXXXXXXX" :visible="showTax" @update:visible="showTax = $event" />

<!-- 发票内容 -->
  <re-button theme="primary" @click="showContent = true">发票内容</re-button>
  <re-invoice class="demo-content" :content="contentList" :visible="showContent" @update:visible="showContent = $event" />

<!-- 完整配置 -->
  <re-button theme="primary" @click="showFull = true">完整配置</re-button>
  <re-invoice class="demo-full" type="电子普通发票" title="完整科技公司" taxNumber="91110000ABCDEF1234" :content="contentList" :visible="showFull" @update:visible="showFull = $event" />

<!-- 空内容 -->
  <re-button theme="primary" @click="showEmptyContent = true">空内容</re-button>
  <re-invoice class="demo-empty-content" title="空内容公司" :visible="showEmptyContent" @update:visible="showEmptyContent = $event" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-invoice />。

API

Invoice Props

名称类型默认值描述必传
visiblebooleanfalse @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}是否显示 @default false @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
typestring电子普通发票 @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}发票类型 @default 电子普通发票 @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
titlestring"" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}发票抬头 @default "" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
taxNumberstring"" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}税号 @default "" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
contentArray<string> @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}发票内容选项 @default @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
customStylestring"" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}自定义样式 @default "" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y

Invoice Events

名称参数描述
submitdata: UTSJSONObject提交时触发
cancel-取消时触发
close-关闭时触发
update:visiblevalue: boolean显隐变化时触发

Invoice Slots

名称描述
--
Input 输入框
用于单行文本信息输入，示例结构与 TDesign live 保持一致。
NumberKeyboard 数字键盘
弹出式数字输入面板，支持随机按键、标题和最大长度