XC Components Package

A comprehensive Vue.js components package for recruitment management, compatible with Vue 2 and Vue 3.

Features

• 🚀 Vue2 & Vue3 Compatible: Works seamlessly with both Vue 2 and Vue 3
• 📦 Multi-Component Package: Includes multiple reusable components
• 🎨 Element UI/Plus Ready: Built with Element UI and Element Plus in mind
• 📱 Responsive Design: Mobile-friendly components
• 🔧 TypeScript Support: Full TypeScript definitions included
• 📚 Comprehensive Documentation: Detailed examples and API reference

Components

Main Components

• PositionForm: Complete job posting form with all fields
• CompanySelector: Company selection component
• SalaryInput: Salary input with range/fixed options
• AddressSelector: Address selection with province/city/area

Installation

For Vue 2

npm install @hnxccy/xc-components-package element-ui
# 或者
yarn add @hnxccy/xc-components-package element-ui

注意: Vue 2 项目需要安装 element-ui 作为依赖。

For Vue 3

npm install @hnxccy/xc-components-package element-plus
# 或者
yarn add @hnxccy/xc-components-package element-plus

注意: Vue 3 项目需要安装 element-plus 作为依赖。

依赖说明

本包使用 peerDependencies 来管理 UI 库依赖，这意味着：

• Vue: 必须安装，支持 Vue 2.6+ 和 Vue 3.0+
• Element UI/Plus: 可选依赖，根据你的 Vue 版本选择安装
  • Vue 2 → 安装 element-ui
  • Vue 3 → 安装 element-plus

解决依赖冲突

如果遇到依赖冲突，可以使用以下命令：

# 使用 --legacy-peer-deps 标志
npm install @hnxccy/xc-components-package --legacy-peer-deps

# 或者使用 --force 标志
npm install @hnxccy/xc-components-package --force

# 对于 yarn
yarn add @hnxccy/xc-components-package --ignore-peer-dependencies

Usage

Full Package Usage

import Vue from 'vue'
import XCComponents from 'xc-components-package'

Vue.use(XCComponents)

Individual Component Usage

import { PositionForm, CompanySelector, SalaryInput, AddressSelector } from 'xc-components-package'

// Use individual components
Vue.component('PositionForm', PositionForm)
Vue.component('CompanySelector', CompanySelector)
Vue.component('SalaryInput', SalaryInput)
Vue.component('AddressSelector', AddressSelector)

在组件中使用

使用完整表单

<template>
  <div>
    <PositionForm
      :edit-id="editId"
      :is-copy="isCopy"
      :initial-data="formData"
      @submit="handleSubmit"
      @search-company="handleSearchCompany"
      @get-city="handleGetCity"
      @get-area="handleGetArea"
      @reference-click="handleReferenceClick"
      @set-operate="handleSetOperate"
    />
  </div>
</template>

使用单个组件

<template>
  <div>
    <!-- 企业选择器 -->
    <CompanySelector
      v-model="companyId"
      :companies="companies"
      @change="handleCompanyChange"
      @search="handleCompanySearch"
    />
    
    <!-- 薪资输入 -->
    <SalaryInput
      v-model="salaryData"
      :salary-unit-options="salaryUnits"
      @change="handleSalaryChange"
    />
    
    <!-- 地址选择器 -->
    <AddressSelector
      v-model="addressData"
      :province-options="provinces"
      :city-options="cities"
      :area-options="areas"
      @get-city="handleGetCity"
      @get-area="handleGetArea"
    />
  </div>
</template>

Props

PositionForm

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | editId | String/Number | '' | 编辑ID，用于编辑模式 | | isCopy | Boolean | false | 是否为复制模式 | | initialData | Object | {} | 初始表单数据 |

CompanySelector

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | value | String/Number | '' | 选中的企业ID | | disabled | Boolean | false | 是否禁用 | | companies | Array | [] | 企业列表数据 |

SalaryInput

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | value | Object | {} | 薪资数据对象 | | salaryUnitOptions | Array | [] | 薪资单位选项 |

AddressSelector

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | value | Object | {} | 地址数据对象 | | provinceOptions | Array | [] | 省份选项 | | cityOptions | Array | [] | 城市选项 | | areaOptions | Array | [] | 区域选项 | | showArbitraryOption | Boolean | true | 是否显示任意地点选项 |

Events

PositionForm

| 事件名 | 参数 | 说明 | |--------|------|------| | submit | formData | 表单提交事件 | | search-company | query | 企业搜索事件 | | get-city | val, type | 城市选择事件 | | get-area | val, type | 区域选择事件 | | reference-click | - | 参考模板点击事件 | | set-operate | data | 平台自营设置事件 |

CompanySelector

| 事件名 | 参数 | 说明 | |--------|------|------| | input | companyId | 企业ID变化事件 | | change | companyId | 企业选择变化事件 | | company-click | company | 企业点击事件 | | search | query | 企业搜索事件 |

SalaryInput

| 事件名 | 参数 | 说明 | |--------|------|------| | input | salaryData | 薪资数据变化事件 | | change | salaryData | 薪资数据变化事件 |

AddressSelector

| 事件名 | 参数 | 说明 | |--------|------|------| | input | addressData | 地址数据变化事件 | | change | addressData | 地址数据变化事件 | | address-limit-change | status | 地址限制变化事件 | | get-city | provinceId, type | 获取城市事件 | | get-area | cityId, type | 获取区域事件 |

表单字段

基本信息

• 企业名称 (companyid)
• 职位标题 (positionname)
• 职位描述 (detail)
• 工作地址 (address_status, top_areaid, second_areaid, areaid)

薪资信息

• 薪资类型 (salary_type)
• 最低薪资 (minsalary)
• 最高薪资 (maxsalary)
• 固定薪资 (salary)
• 薪资单位 (salary_unit)

招聘要求

• 招聘类型 (positiontype)
• 招聘人数 (recruitment, peopleneed)
• 年龄要求 (min_age, max_age)
• 性别要求 (sextype)

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建Vue2版本
npm run build:vue2

# 构建Vue3版本
npm run build:vue3

# 构建所有版本
npm run build

📄 License

MIT License - see LICENSE file for details.

🔧 开发

本地开发

# 克隆项目
git clone <repository-url>
cd xc-componet-package

# 安装依赖
npm install

# 开发模式（监听文件变化）
npm run dev

# 构建项目
npm run build

项目结构

src/
├── components/           # Vue 组件
│   ├── PositionForm.vue     # 主表单组件
│   ├── CompanySelector.vue  # 企业选择器
│   ├── SalaryInput.vue      # 薪资输入
│   ├── AddressSelector.vue  # 地址选择器
│   └── index.js             # 组件导出
├── utils/               # 工具函数
│   └── index.js
├── index.js             # 主入口文件
└── types.d.ts           # TypeScript 类型定义

dist/                    # 构建输出
├── index.js             # CommonJS 格式
├── index.esm.js         # ES Module 格式
├── vue2.js              # Vue2 版本
└── vue3.js              # Vue3 版本

构建配置

• Rollup: 模块打包工具
• Babel: JavaScript 转译
• Vue Compiler: Vue 单文件组件编译
• TypeScript: 类型检查和声明文件生成

📚 相关资源

• Vue.js 官方文档
• Element UI 文档
• Element Plus 文档
• Rollup 文档
• npm 组织管理