Waituibao

一个基于 Vue 3 和 Ant Design Vue 的专业组件库，提供常用的业务组件和工具函数。

特性

• 🚀 基于 Vue 3 + TypeScript 开发
• 📦 支持按需引入和全量引入
• 🎨 基于 Ant Design Vue 设计规范
• 🛠️ 完善的 TypeScript 类型定义
• 📱 支持多种构建格式（ES、CommonJS、UMD）

安装

npm install waituibao
# 或
yarn add waituibao
# 或
pnpm add waituibao

快速开始

全量引入

import { createApp } from 'vue'
import Waituibao from 'waituibao'
import App from './App.vue'

const app = createApp(App)
app.use(Waituibao)
app.mount('#app')

按需引入

import { AreaSelect, InputRange } from 'waituibao'

export default {
  components: {
    AreaSelect,
    InputRange
  }
}

组件列表

AreaSelect - 地区选择器

支持省市区三级联动选择，可配置单选/多选模式。

<template>
  <AreaSelect
    v-model:value="areaValue"
    mode="area"
    :select-modes="{
      province: 'single',
      city: 'single', 
      area: 'multiple'
    }"
    @change="handleAreaChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { AreaSelect } from 'waituibao'

const areaValue = ref({
  value: {
    province: [],
    city: [],
    area: []
  }
})

const handleAreaChange = (result) => {
  console.log('选择结果:', result)
}
</script>

Props:

• mode: 选择模式 - 'province' | 'city' | 'area'
• selectModes: 各级选择模式配置
• value: 绑定值
• disabled: 是否禁用
• placeholder: 占位符配置
• maxTagCount: 多选时最多显示标签数

InputRange - 数值范围输入

用于输入数值范围的组件。

<template>
  <InputRange
    v-model="rangeValue"
    unit="元"
    :precision="2"
    :min-limit="0"
    :max-limit="999999"
    @change="handleRangeChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { InputRange } from 'waituibao'

const rangeValue = ref([100, 1000])

const handleRangeChange = (value) => {
  console.log('范围变化:', value)
}
</script>

Props:

• modelValue: 绑定值 [min, max]
• mode: 模式 - 'array' | 'separate'
• unit: 单位
• precision: 精度
• minLimit/maxLimit: 最小/最大限制值

AutoSelectComplete - 自动完成选择器

带有自定义添加功能的选择器。

<template>
  <AutoSelectComplete
    v-model:value="selectedValue"
    :options="options"
    placeholder="请选择或自定义添加"
    @add-item="handleAddItem"
  />
</template>

<script setup>
import { ref } from 'vue'
import { AutoSelectComplete } from 'waituibao'

const selectedValue = ref('')
const options = ref([
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' }
])

const handleAddItem = ({ value, callback }) => {
  // 添加新选项的逻辑
  const newOption = { label: value, value: value }
  options.value.push(newOption)
  callback(newOption)
}
</script>

InfoSection - 信息区块

用于展示信息的区块组件。

<template>
  <InfoSection title="基本信息" icon-bg-class="custom-icon-bg">
    <template #icon>
      <UserOutlined />
    </template>
    <template #suffix>
      <a-button type="link">编辑</a-button>
    </template>
    
    <p>这里是内容区域</p>
  </InfoSection>
</template>

SectionTitle - 区块标题

带步骤数字的标题组件。

<template>
  <SectionTitle
    title="第一步"
    :step-number="1"
    description="请填写基本信息"
  >
    <template #extra>
      <a-button type="link">跳过</a-button>
    </template>
  </SectionTitle>
</template>

工具函数

地区数据处理工具

import { utils } from 'waituibao'

// 处理地区数据为提交格式
const submitData = utils.processAreaData(areaData, {
  province: { code: 'provinceCode', name: 'provinceName' },
  city: { code: 'cityCode', name: 'cityName' },
  area: { code: 'areaCode', name: 'areaName' }
})

// 处理回显数据
const echoData = utils.processEchoData(record, fieldMapping)

依赖要求

• Vue 3.0+
• Ant Design Vue 4.0+

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 测试
npm run test

许可证

MIT License

更新日志

1.0.0

• 🎉 首次发布
• ✨ 新增 AreaSelect 地区选择器
• ✨ 新增 InputRange 数值范围输入
• ✨ 新增 AutoSelectComplete 自动完成选择器
• ✨ 新增 InfoSection 信息区块
• ✨ 新增 SectionTitle 区块标题
• 🛠️ 新增地区数据处理工具函数

贡献

欢迎提交 Issue 和 Pull Request！

联系我们

如有问题，请提交 Issue。