@composy/expense-vue

@composy/expense-vue

Vue 3 费用报销单组件 - Vue 3 adapter for @composy/expense-core.

功能特性

• Vue 3 组件 <ExpenseForm />
• v-model 双向绑定
• 组合式函数 useExpenseForm()
• Vue 插件 ExpensePlugin
• TypeScript 完整类型

安装

npm install @composy/expense-vue

快速开始

<script setup lang="ts">
import type { ExpenseItem } from '@composy/expense-vue'
import { ExpenseForm } from '@composy/expense-vue'
import { ref } from 'vue'

const items = ref<ExpenseItem[]>([])

function handleSubmit(data: { items: ExpenseItem[] }) {
  void data
}
</script>

<template>
  <ExpenseForm v-model="items" type="travel" theme="light" @submit="handleSubmit" />
</template>

Composable

在 Vue setup 中调用 useExpenseForm()，它返回响应式的 instance、items、receipts、summary、budget 与校验状态，以及创建表单、管理明细和票据、提交、销毁等方法。

Plugin

import { createExpensePlugin } from '@composy/expense-vue'

app.use(createExpensePlugin({ name: 'LdExpenseForm' }))

Component Props

exchangeRates、exchangeRateProvider、exchangeRateDate、roundingMode 和 strictExchangeRates 会传递到 Core，用于带日期的汇率计算和财务舍入。组件实例还暴露 getSnapshot()、restoreSnapshot(snapshot)、setExchangeRates(rates, asOf?)、receipts、complianceResult 和 error。

Component Events

构建产物

依赖

• @composy/expense-core — 核心引擎
• vue ^3.5.32 (peerDependency)

验证命令

pnpm --dir libraries/expense/packages/vue run type-check
pnpm --dir libraries/expense/packages/vue run build

License

MIT