@xjw_/vue2-npm-system 1.0.0

package/README.md

@@ -0,0 +1,256 @@
+# JC Vue Components
+
+基于 Element-UI 的 Vue2 组件库，二次封装常用组件，提供更丰富的业务功能。
+
+## 版本信息
+
+- Vue: 2.6.10
+- Element-UI: 2.13.2
+- VXE-Table: ^3.2.20
+
+## 安装
+
+```bash
+npm install jc-vue-components
+```
+
+## 快速开始
+
+### 全局注册
+
+```javascript
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import JcComponents from 'jc-vue-components'
+import 'jc-vue-components/dist/jc-vue-components.css'
+
+Vue.use(ElementUI)
+Vue.use(JcComponents)
+```
+
+### 按需引入
+
+```javascript
+import Vue from 'vue'
+import { JcButton, JcInput, JcTable } from 'jc-vue-components'
+
+Vue.component('JcButton', JcButton)
+Vue.component('JcInput', JcInput)
+Vue.component('JcTable', JcTable)
+```
+
+## 组件列表
+
+### JcButton 按钮
+
+增强的按钮组件，支持防抖、加载状态等功能。
+
+```vue
+<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 输入框
+
+增强的输入框组件，支持字数统计、密码显示等功能。
+
+```vue
+<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 对话框
+
+增强的对话框组件，内置确认/取消按钮。
+
+```vue
+<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 选择器
+
+增强的选择器组件，支持数据配置和多选。
+
+```vue
+<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`: 显示/隐藏事件
+
+### JcTable 表格
+
+增强的表格组件，支持动态列配置和分页。
+
+```vue
+<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`: 页码变化事件
+
+## 本地开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build
+```
+
+## 发布到 npm
+
+```bash
+# 修改版本号
+npm version patch  # 或 minor/major
+
+# 发布
+npm publish
+```
+
+## License
+
+MIT

package/dist/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>JC Vue Components - 组件库演示</title></head><body><div id="app"></div><script src="jc-vue-components.js"></script></body></html>