@deppon/deppon-design

@deppon/deppon-design

Vant 组件封装库，基于 Vue 3 和 TypeScript。

安装

npm install @deppon/deppon-design vant

使用方式

按需引入组件

// 方式 1: 从主入口引入（Van 前缀）
import { VanButton, VanCell } from '@deppon/deppon-design';

// 方式 2: 从组件目录引入（推荐，支持 tree-shaking）
import VanButton from '@deppon/deppon-design/es/Button';
import { VanCell, VanCellGroup } from '@deppon/deppon-design/es/Cell';

引入样式

重要： 使用组件前需要引入样式文件。

// 方式 1: 引入所有组件样式（不推荐，会增加打包体积）
import '@deppon/deppon-design/es/style';

// 方式 2: 按需引入组件样式（推荐）
import '@deppon/deppon-design/es/Button/style';
import '@deppon/deppon-design/es/Cell/style';

完整示例

<template>
    <VanButton type="primary">按钮</VanButton>
    <VanCell title="单元格" value="内容" />
</template>

<script setup lang="ts">
import VanButton from '@deppon/deppon-design/es/Button';
import { VanCell } from '@deppon/deppon-design/es/Cell';
import '@deppon/deppon-design/es/Button/style';
import '@deppon/deppon-design/es/Cell/style';
</script>

组件列表

基础组件

• VanButton, VanCell, VanIcon, VanPopup, VanDialog, VanImage, VanImagePreview, VanOverlay, VanTransition
• VanEmpty, VanLoading, VanPullRefresh, VanList, VanSkeleton, VanSticky, VanNoticeBar, VanNavBar
• VanTabbar, VanTabbarItem, VanSearch, VanTag, VanBadge, VanCircle, VanProgress
• VanSwipe, VanSwipeItem, VanGrid, VanGridItem, VanDivider, VanIndexBar, VanIndexAnchor
• VanSidebar, VanSidebarItem

表单组件

• VanCalendar, VanCascader, VanCheckbox, VanCheckboxGroup, VanDatetimePicker
• VanField, VanForm, VanNumberKeyboard, VanPasswordInput, VanPicker
• VanRadio, VanRadioGroup, VanRate, VanSlider, VanStepper, VanSwitch, VanUploader

反馈组件

• VanActionSheet, VanDropdownMenu, VanDropdownItem, VanNotify, VanToast, VanSwipeCell

展示组件

• VanCollapse, VanCollapseItem, VanCountDown, VanLazyload, VanShareSheet, VanWatermark

导航组件

• VanTab, VanTabs, VanTreeSelect, VanPagination

业务组件

• VanAddressEdit, VanAddressList, VanArea, VanCard, VanContactCard, VanContactList
• VanCoupon, VanCouponCell, VanCouponList, VanGoodsAction, VanGoodsActionIcon
• VanGoodsActionButton, VanSubmitBar, VanSku

注意事项

• 样式引入：组件样式已从组件文件中分离，需要单独引入样式文件。
• TypeScript 支持：本包使用 TypeScript 编写，提供完整的类型定义。
• Vue 版本：需要 Vue 3.x。
• Vant 版本：需要 Vant 4.x。

开发

# 构建
npm run build