JC Vue Components

基于 Element-UI 的 Vue2 组件库，二次封装常用组件，提供更丰富的业务功能。

版本信息

• Vue: 2.6.10
• Element-UI: 2.13.2
• VXE-Table: ^3.2.20

安装

npm install @xjw_/vue2-npm-system

快速开始

全局注册

import Vue from 'vue'
import ElementUI from 'element-ui'
import JcComponents from '@xjw_/vue2-npm-system'

// 注意：需要自行导入 Element-UI 样式
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.use(JcComponents)

按需引入

import Vue from 'vue'
import { JcButton, JcInput, JcTable } from '@xjw_/vue2-npm-system'

Vue.component('JcButton', JcButton)
Vue.component('JcInput', JcInput)
Vue.component('JcTable', JcTable)

工具函数

createRequest 请求封装

基于 axios 的通用请求封装，支持统一的错误处理和 token 管理。

import { createRequest } from '@xjw_/vue2-npm-system'

// 创建请求实例
const request = createRequest({
  baseURL: 'http://api.example.com',
  timeout: 30000,
  // 获取 token 的方法
  getToken: () => {
    return localStorage.getItem('token')
  },
  // Token 过期回调
  onTokenExpired: () => {
    // 清除 token，跳转登录页等
    localStorage.removeItem('token')
    window.location.href = '/login'
  },
  // 自定义成功状态码
  successCodes: [200, 2000, 3000]
})

// 使用请求实例
export function getUserList(params, pageSize, pageNum) {
  return request({
    url: '/api/user/list',
    method: 'post',
    data: {
      ...params,
      pageSize,
      pageNum
    }
  })
}

配置项:

• baseURL: API 基础地址
• timeout: 超时时间（毫秒）
• getToken: 获取 token 的函数
• onTokenExpired: Token 过期时的回调
• successCodes: 成功的状态码数组 (默认: [200, 2000, 3000])
• errorHandler: 自定义错误处理函数
• headers: 额外的请求头

组件列表

JcButton 按钮

增强的按钮组件，支持防抖、加载状态等功能。

<template>
  <jc-button 
    jc-type="primary" 
    :debounce="1000"
    :loading="loading"
    @click="handleClick"
  >
    点击我
  </jc-button>
</template>

Props:

• jc-type: 按钮类型 (default: 'primary')
• size: 尺寸 (default: 'medium')
• disabled: 是否禁用 (default: false)
• loading: 是否加载中 (default: false)
• debounce: 防抖时间（毫秒）(default: 0)

Events:

• click: 点击事件

JcInput 输入框

增强的输入框组件，支持字数统计、密码显示等功能。

<template>
  <jc-input
    v-model="value"
    type="password"
    show-password
    show-count
    :maxlength="100"
    placeholder="请输入"
  />
</template>

Props:

• value: 绑定值
• type: 输入框类型 (default: 'text')
• size: 尺寸 (default: 'medium')
• disabled: 是否禁用 (default: false)
• clearable: 是否可清空 (default: true)
• showPassword: 显示切换密码图标 (default: false)
• maxlength: 最大长度
• showCount: 显示字数统计 (default: false)

Events:

• input: 输入事件
• change: 改变事件
• blur: 失焦事件
• focus: 聚焦事件

JcDialog 对话框

增强的对话框组件，内置确认/取消按钮。

<template>
  <jc-dialog
    :visible.sync="dialogVisible"
    title="标题"
    width="50%"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <p>对话框内容</p>
  </jc-dialog>
</template>

Props:

• visible: 是否显示 (default: false)
• title: 标题
• width: 宽度 (default: '50%')
• showFooter: 显示底部 (default: true)
• showCancelButton: 显示取消按钮 (default: true)
• showConfirmButton: 显示确认按钮 (default: true)
• confirmLoading: 确认按钮加载中 (default: false)

Events:

• open: 打开事件
• close: 关闭事件
• confirm: 确认事件
• cancel: 取消事件

JcSelect 选择器

增强的选择器组件，支持数据配置和多选。

<template>
  <jc-select
    v-model="value"
    :options="options"
    multiple
    filterable
    placeholder="请选择"
  />
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [
        { value: '1', label: '选项一' },
        { value: '2', label: '选项二' }
      ]
    }
  }
}
</script>

Props:

• value: 绑定值
• options: 选项数组
• multiple: 是否多选 (default: false)
• filterable: 是否可搜索 (default: false)
• valueKey: 值字段名 (default: 'value')
• labelKey: 标签字段名 (default: 'label')

Events:

• change: 改变事件
• visible-change: 显示/隐藏事件

XBusinessLog 业务日志查询

集成的业务日志查询组件，包含搜索栏和数据表格。

<template>
  <div class="app-container">
    <x-business-log 
      ref="businessLog"
      :api-method="selectSysBusinessLogList"
      :page-size="10"
      :parse-time-method="parseTime"
    />
  </div>
</template>

<script>
import { selectSysBusinessLogList } from "@/api/system/log"

export default {
  name: "BusinessLog",
  methods: {
    // 自定义时间格式化（可选）
    parseTime(time) {
      if (!time) return ''
      const date = new Date(time)
      // 你的格式化逻辑
      return formattedTime
    }
  }
}
</script>

Props:

• apiMethod: API 请求方法 (必需)，接收 (params, pageSize, pageNum) 参数
• pageSize: 每页条数 (默认: 10)
• parseTimeMethod: 自定义时间格式化函数 (可选)

Methods:

• resetForm(): 重置表单并重新查询
• refresh(): 刷新列表
• getList(): 获取数据列表

API 方法要求:

传入的 apiMethod 应该返回 Promise，响应格式为：

{
  rows: [],  // 数据列表
  total: 0   // 总条数
}

示例 API 封装：

import request from '@/utils/request'

export function selectSysBusinessLogList(params, pageSize, pageNum) {
  return request({
    url: '/system/business-log/list',
    method: 'post',
    data: {
      ...params,
      pageSize,
      pageNum
    }
  })
}

JcTable 表格

增强的表格组件，支持动态列配置和分页。

<template>
  <jc-table
    :data="tableData"
    :columns="columns"
    :show-index="true"
    :show-selection="true"
    :show-pagination="true"
    :total="100"
    @selection-change="handleSelectionChange"
  >
    <template slot="operation" slot-scope="{ row }">
      <jc-button @click="handleEdit(row)">编辑</jc-button>
    </template>
  </jc-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      columns: [
        { prop: 'name', label: '姓名', minWidth: 100 },
        { prop: 'age', label: '年龄', width: 80 }
      ]
    }
  }
}
</script>

Props:

• data: 表格数据
• columns: 列配置
• size: 尺寸 (default: 'medium')
• border: 边框 (default: true)
• showIndex: 显示序号 (default: false)
• showSelection: 显示选择列 (default: false)
• showOperation: 显示操作列 (default: false)
• showPagination: 显示分页 (default: false)

Events:

• selection-change: 选择变化事件
• sort-change: 排序变化事件
• size-change: 每页条数变化事件
• current-change-page: 页码变化事件

本地开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

发布到 npm

# 修改版本号
npm version patch  # 或 minor/major

# 发布
npm publish

License

MIT