vant-go

基于 Vant 4 的 Vue 3 + TypeScript 移动端业务组件扩展库。

组件列表

| 组件名 | 说明 | 主要 Props | |--------|------|------------| | VaxAvatar | 头像组件，基于 Vant Image 封装 | src 头像地址, size 尺寸(small/normal/large/number), round 是否圆形 | | VaxButton | 按钮组件，扩展 van-button 集成图标 | icon 图标名, iconSize 图标尺寸, iconColor 图标颜色, iconStrokeWidth 图标线宽 | | VaxCaptcha | 验证码输入组件，支持短信/WhatsApp 双通道 | phone 手机号(v-model), captcha 验证码(v-model), whatsApp 是否启用WhatsApp, onSend 发送接口 | | VaxCell | 单行单元格，扩展 van-cell 集成 VaxIcon + slots | icon 图标名, iconSize/iconColor/iconBackground/iconStrokeWidth 图标配置, title 标题, value 值, label 描述, to 路由跳转, onClick 点击回调, titleClass/valueClass/labelClass 样式类 | | VaxCellGroup | 卡片容器，数据驱动渲染 VaxCell 列表 | title 标题, items 数据数组, iconSize/iconColor/iconBackground/iconStrokeWidth 全局图标配置, titleClass/valueClass/labelClass 全局样式类, isLink 全局链接, compact 紧凑模式 | | VaxEmpty | 空状态组件，基于 Vant Empty 封装 | image 图片类型, imageSize 图片尺寸, description 描述文字 | | VaxField | 表单字段组件，支持文本/日期/选择器 | icon 图标, label 标签, type 类型(text/date/select), readonly 只读, columns 选择器选项 | | VaxIcon | 图标组件，基于 Iconify 图标库 | icon 图标名, vendor 图标库, size 尺寸, color 颜色, background 背景色, round 圆形背景, strokeWidth 线宽 | | VaxLoading | 加载组件，支持全屏遮罩 | type 类型, size 尺寸, color 颜色, text 文字, fullscreen 是否全屏 | | VaxNavBar | 导航栏组件，基于 Vant NavBar 封装 | back 返回上一页, leftArrow 返回箭头, leftText 左侧文字, clickLeft 自定义返回处理 | | VaxPage | 页面容器，提供统一内边距 | — | | VaxSelect | 选择器组件，支持单选/多选 | multiple 是否多选, options 选项数组 | | VaxTabbar | 底部标签栏组件，支持路由切换 | menu 菜单配置数组, flash 是否启用闪光效果 | | VaxTabs | 选项卡切换组件，胶囊式 UI | tabs 选项卡数组(IVaxTab), sticky 是否吸顶, v-model:active 当前选中 | | VaxAssetPreview | 资源预览组件，支持图片/视频 | asset 单个资源, assets 资源数组, v-model:show 显示状态 |

VaxCellGroup items 数据结构

interface IVaxCardItem {
  icon?: string
  iconSize?: number
  iconColor?: string
  iconBackground?: string
  iconStrokeWidth?: number
  title: string
  value?: string | number
  label?: string
  to?: string
  titleClass?: string
  valueClass?: string
  labelClass?: string
  isLink?: boolean
  onClick?: () => void
}

VaxCell Slots

| Slot 名 | 说明 | |---------|------| | icon | 自定义图标区（默认渲染 VaxIcon） | | title | 自定义标题 | | value | 自定义右侧值 | | label | 自定义描述 | | default | 自定义内容 |

VaxCellGroup Slots

| Slot 名 | 说明 | |---------|------| | title | 自定义标题区 | | default | 在 items 渲染前插入自定义内容 |

安装

pnpm add vant-go vant vue

vant 与 vue 是 peer 依赖，必须由消费项目自行安装（避免重复打包与版本冲突）。

使用

A. 全量注册

import { createApp } from 'vue'
import VantGo from '@gindow/vant-go'
import '@gindow/vant-go/styles/index.css'
import App from './App.vue'

createApp(App).use(VantGo).mount('#app')

B. 按需 + 自动导入（推荐）

配合 unplugin-vue-components 使用 VantGoResolver，模板里裸写组件即可，无需手动 import。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import { VantGoResolver } from '@gindow/vant-go/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        VantResolver(),
        VantGoResolver(),
      ],
    }),
  ],
})

使用示例

<template>
  <!-- 数据驱动：VaxCellGroup + items -->
  <vax-cell-group inset title="Send money" :items="channels"
    icon-color="var(--color-violet-600)" icon-background="var(--color-violet-50)" />

  <!-- 混合模式：VaxCellGroup 包裹自定义内容 + items -->
  <vax-cell-group inset>
    <template #title>
      <div class="flex-center-between">
        <span>Recent</span>
        <span @click="go('transactions')">View all</span>
      </div>
    </template>
    <van-cell v-for="t in recent" :key="t.id" :title="t.party" center />
  </vax-cell-group>

  <!-- 单行：VaxCell 独立使用 -->
  <vax-cell icon="check" title="Approvals" :value="3" label="Tap to review" to="approvals" />
</template>

<script setup lang="ts">
const channels = [
  { icon: 'thunderbolt', title: 'Pesalink', label: 'Instant · 38 banks', to: 'transfer.new' },
  { icon: 'iphone', title: 'M-Pesa', label: 'Daraja API', to: 'transfer.new' },
]
</script>

VantGoResolver 默认会自动导入 vant-go/style.css（去重处理），如要手动管理样式：

VantGoResolver({ importStyle: false })
// 然后在应用入口手动 import '@gindow/vant-go/styles/index.css'

开发

pnpm install
pnpm build       # vue-tsc 类型检查 + vite 构建
pnpm pack        # 生成 tarball 用于发布前烟测

License

MIT © joming