yahee-components Library

深圳前海亚讯公司，使用 Vue 3 和 Vite 构建的前端组件库。它结合 TypeScript 提供类型支持，并集成了 prettier+husky+lint-staged 以确保代码质量。

目录

• 特性
• 安装
• 快速开始
• 组件
• 开发指南
• 代码规范
• 文档
• 常见问题
• 贡献
• 许可证

特性

• 现代化技术栈：基于 Vue 3 和 Vite，支持快速开发。
• TypeScript 支持：提供类型安全。
• 代码质量保障：使用 ESLint、Prettier 和 lint-staged。
• 易于集成：与现有项目无缝结合。

安装

使用 npm 安装：

npm install yahee-components

或使用 Yarn：

yarn add yahee-components

快速开始

在你的 Vue 项目中引入并使用组件：

import { YaheeComplexSearch } from 'yahee-components';
import 'yahee-components/es/style.css';
<template>
  <YaheeComplexSearch
    :show-within-filter-checkbox="true"
    :show-patch-search="true"
    :placeholder-text="`${M2('PD单号')}/${M2('SKU')}/${M2('SKU别名')}`"
    :show-select="false"
    :search-item="searchItem"
    @filter-change-grandson="filterChangeGrandson"
  />
</template>

组件

YaheeAnnexUpload

文件上传组件，支持文件类型、文件数量、文件大小、文件单位等参数自定义

<template>
  <yahee-annex-upload
    v-model="fileValue"
    :accept=".gif,.jpg,.png,.doc,.docx,.pdf,.xls,.xlsx"
    :limit="1"
    :fileSize="20"
    :fileSizeUnit="mb"
  />
</template>

YaheeComplexSearch

复杂搜索组件，支持是否展示多选下拉框、是否展示批量搜索、是否在筛选条件内搜索等参数自定义，并emit筛选条件给父组件监听以完成筛选

<template>
  <yahee-complex-search
    :show-within-filter-checkbox="true"
    :show-patch-search="true"
    :show-select="false"
    :search-item="searchItem"
    @filter-change-grandson="filterChange"
  />
</template>

YaheeCountryPlatformShopCondition

销量等级二维筛选组件。

<template>
  <yahee-country-platform-shop-condition
    :xy-filters="filterList"
    filter-key="saleLevels"
    @filter-change="filterChange"
  />
</template>

YaheeImageUpload

图片上传组件，支持图片大小、图片单位等参数自定义

<template>
  <yahee-image-upload v-model="imageValue" />
</template>

YaheeCopy

复制组件

<template>
  <yahee-copy content="121212">复制</yahee-copy>
</template>

YaheeDropdownCondition

下拉筛选项组件，支持传入父组件函数，用以接受选择的筛选项参数

<template>
  <yahee-drop-down-condition
    filter-key="series"
    enum-entity="category-series"
    @filter-change="filterChange"
  />
</template>

YaheeLeftCondition

普通单选筛选项组件，支持传入父组件函数，用以接受选择的筛选项参数

<template>
  <YaheeLeftCondition
    ref="bigGroupRef"
    :select-list="categoryManagers"
    :all-is-empty="true"
    filter-key="categoryManager"
    @filter-change="filterChange"
  />
</template>

YaheeLeftConditionEnum

普通单选筛选项组件，与上面组件不同的是，选项内容通过接口进行查询，同时也支持传入父组件函数，用以接受选择的筛选项参数

<template>
  <YaheeLeftConditionEnum
    enum-entity="country"
    filter-key="country"
    :all-is-empty="true"
    :init-filters="initFilters"
    @filter-change="filterChange"
  />
</template>

YaheeOperationLog

操作日志组件，支持下拉加载，通过业务参数获取不同操作日志

<template>
  <YaheeLeftConditionEnum
    enum-entity="country"
    filter-key="country"
    :all-is-empty="true"
    :init-filters="initFilters"
    @filter-change="filterChange"
  />
</template>

开发指南

本地开发

克隆仓库并安装依赖：

git clone 
cd your-local-download-directory
pnpm install

启动开发服务器：

yarn dev

构建

构建生产版本：

cd packages/components
npm run build

发布

登录npm后

npm publish --access public

代码规范

• 使用 ESLint 和 Prettier 格式化代码。
• 提交前使用 lint-staged 进行检查。

文档

详细的 API 文档请参阅项目内docs文件夹下的文档。

常见问题

如何报告问题？

请联系维护人menglingnan/zhangyujiao/smithshi提交问题。

贡献

欢迎贡献！请确保遵循以下步骤：

1. Fork 仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开一个 Pull Request

许可证

该项目采用 MIT 许可证。