@xjw_/vue2-npm-system 1.0.0

package/es/components/JcTable.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="jc-table-wrapper">
+    <el-table
+      v-bind="$attrs"
+      :data="tableData"
+      :size="size"
+      :border="border"
+      :stripe="stripe"
+      :highlight-current-row="highlightCurrentRow"
+      :loading="loading"
+      :row-key="rowKey"
+      @selection-change="handleSelectionChange"
+      @sort-change="handleSortChange"
+      @current-change="handleCurrentChange"
+    >
+      <!-- 选择列 -->
+      <el-table-column
+        v-if="showSelection"
+        type="selection"
+        :width="selectionWidth"
+        :fixed="selectionFixed"
+      >
+      </el-table-column>
+
+      <!-- 序号列 -->
+      <el-table-column
+        v-if="showIndex"
+        type="index"
+        :label="indexLabel"
+        :width="indexWidth"
+        :fixed="indexFixed"
+      >
+      </el-table-column>
+
+      <!-- 动态列 -->
+      <el-table-column
+        v-for="(column, colIndex) in columns"
+        :key="column.prop || colIndex"
+        :prop="column.prop"
+        :label="column.label"
+        :width="column.width"
+        :min-width="column.minWidth"
+        :fixed="column.fixed"
+        :sortable="column.sortable"
+        :align="column.align || 'center'"
+        :header-align="column.headerAlign || 'center'"
+        :show-overflow-tooltip="column.showOverflowTooltip !== false"
+      >
+        <template slot-scope="scope">
+          <!-- 自定义渲染插槽 -->
+          <slot 
+            :name="`column-${column.prop}`" 
+            :row="scope.row" 
+            :column="column" 
+            :$index="scope.$index"
+          >
+            {{ getCellValue(scope.row, column.prop) }}
+          </slot>
+        </template>
+      </el-table-column>
+
+      <!-- 操作列 -->
+      <el-table-column
+        v-if="showOperation"
+        :label="operationLabel"
+        :width="operationWidth"
+        :fixed="operationFixed"
+        :align="operationAlign"
+      >
+        <template slot-scope="scope">
+          <slot name="operation" :row="scope.row" :$index="scope.$index">
+          </slot>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div v-if="showPagination" class="jc-table-pagination">
+      <el-pagination
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="total"
+        :page-sizes="pageSizes"
+        :layout="paginationLayout"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentPageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JcTable',
+  inheritAttrs: false,
+  props: {
+    // 表格数据
+    data: {
+      type: Array,
+      default: () => []
+    },
+    // 尺寸
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    // 是否带有纵向边框
+    border: {
+      type: Boolean,
+      default: true
+    },
+    // 是否为斑马纹表格
+    stripe: {
+      type: Boolean,
+      default: false
+    },
+    // 是否高亮当前行
+    highlightCurrentRow: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示加载状态
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 行数据的 Key
+    rowKey: {
+      type: [String, Function],
+      default: 'id'
+    },
+    // 列配置
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // 是否显示选择列
+    showSelection: {
+      type: Boolean,
+      default: false
+    },
+    // 选择列宽度
+    selectionWidth: {
+      type: [String, Number],
+      default: 55
+    },
+    // 选择列固定位置
+    selectionFixed: {
+      type: [Boolean, String],
+      default: false
+    },
+    // 是否显示序号列
+    showIndex: {
+      type: Boolean,
+      default: false
+    },
+    // 序号列标签
+    indexLabel: {
+      type: String,
+      default: '序号'
+    },
+    // 序号列宽度
+    indexWidth: {
+      type: [String, Number],
+      default: 60
+    },
+    // 序号列固定位置
+    indexFixed: {
+      type: [Boolean, String],
+      default: 'left'
+    },
+    // 是否显示操作列
+    showOperation: {
+      type: Boolean,
+      default: false
+    },
+    // 操作列标签
+    operationLabel: {
+      type: String,
+      default: '操作'
+    },
+    // 操作列宽度
+    operationWidth: {
+      type: [String, Number],
+      default: 150
+    },
+    // 操作列固定位置
+    operationFixed: {
+      type: [Boolean, String],
+      default: 'right'
+    },
+    // 操作列对齐方式
+    operationAlign: {
+      type: String,
+      default: 'center'
+    },
+    // 是否显示分页
+    showPagination: {
+      type: Boolean,
+      default: false
+    },
+    // 当前页码
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    // 每页条数
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    // 总条数
+    total: {
+      type: Number,
+      default: 0
+    },
+    // 每页条数选项
+    pageSizes: {
+      type: Array,
+      default: () => [10, 20, 50, 100]
+    },
+    // 分页布局
+    paginationLayout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    }
+  },
+  computed: {
+    tableData() {
+      return this.data || []
+    }
+  },
+  methods: {
+    // 获取单元格值
+    getCellValue(row, prop) {
+      if (!prop) return ''
+      return prop.split('.').reduce((prev, curr) => {
+        return prev ? prev[curr] : ''
+      }, row)
+    },
+    // 选择变化
+    handleSelectionChange(selection) {
+      this.$emit('selection-change', selection)
+    },
+    // 排序变化
+    handleSortChange({ column, prop, order }) {
+      this.$emit('sort-change', { column, prop, order })
+    },
+    // 当前行变化
+    handleCurrentChange(val) {
+      this.$emit('current-change', val)
+    },
+    // 每页条数变化
+    handleSizeChange(size) {
+      this.$emit('size-change', size)
+    },
+    // 页码变化
+    handleCurrentPageChange(page) {
+      this.$emit('current-change-page', page)
+    },
+    // 清除选中
+    clearSelection() {
+      if (this.$refs.table) {
+        this.$refs.table.clearSelection()
+      }
+    },
+    // 切换排序
+    toggleAllSelection() {
+      if (this.$refs.table) {
+        this.$refs.table.toggleAllSelection()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.jc-table-wrapper {
+  width: 100%;
+}
+
+.jc-table-pagination {
+  margin-top: 16px;
+  text-align: right;
+}
+</style>

package/es/index.js

@@ -0,0 +1,31 @@
+// 导入所有组件
+import JcButton from './components/JcButton';
+import JcInput from './components/JcInput';
+import JcTable from './components/JcTable';
+import JcDialog from './components/JcDialog';
+import JcSelect from './components/JcSelect';
+
+// 存储组件列表
+var components = [JcButton, JcInput, JcTable, JcDialog, JcSelect];
+
+// 安装方法
+var install = function install(Vue) {
+  // 注册所有组件
+  components.forEach(function (component) {
+    Vue.component(component.name, component);
+  });
+};
+
+// 导出的对象
+export default {
+  version: '1.0.0',
+  install: install,
+  JcButton: JcButton,
+  JcInput: JcInput,
+  JcTable: JcTable,
+  JcDialog: JcDialog,
+  JcSelect: JcSelect
+};
+
+// 单独导出各个组件
+export { JcButton, JcInput, JcTable, JcDialog, JcSelect };

package/lib/components/JcButton.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-button
+    v-bind="$attrs"
+    :type="jcType"
+    :size="size"
+    :disabled="disabled || loading"
+    :loading="loading"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </el-button>
+</template>
+
+<script>
+export default {
+  name: 'JcButton',
+  inheritAttrs: false,
+  props: {
+    // 扩展类型，支持业务场景
+    jcType: {
+      type: String,
+      default: 'primary'
+    },
+    // 按钮大小
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否加载中
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 防抖时间（毫秒）
+    debounce: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      isDebouncing: false
+    }
+  },
+  methods: {
+    handleClick(event) {
+      if (this.disabled || this.loading) {
+        return
+      }
+
+      // 防抖处理
+      if (this.debounce > 0 && this.isDebouncing) {
+        return
+      }
+
+      if (this.debounce > 0) {
+        this.isDebouncing = true
+        setTimeout(() => {
+          this.isDebouncing = false
+        }, this.debounce)
+      }
+
+      this.$emit('click', event)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 可以在这里添加自定义样式 */
+</style>

package/lib/components/JcDialog.vue

@@ -0,0 +1,199 @@
+<template>
+  <el-dialog
+    v-bind="$attrs"
+    :visible.sync="internalVisible"
+    :title="title"
+    :width="width"
+    :size="size"
+    :top="top"
+    :modal="modal"
+    :custom-class="customClass"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    :show-close="showClose"
+    @open="handleOpen"
+    @opened="handleOpened"
+    @close="handleClose"
+    @closed="handleClosed"
+  >
+    <!-- 标题插槽 -->
+    <template v-if="$slots.title" slot="title">
+      <slot name="title"></slot>
+    </template>
+
+    <!-- 默认内容 -->
+    <slot></slot>
+
+    <!-- 底部插槽 -->
+    <template v-if="$slots.footer" slot="footer">
+      <slot name="footer"></slot>
+    </template>
+
+    <!-- 默认底部按钮 -->
+    <div v-else-if="showFooter" class="jc-dialog-footer">
+      <el-button 
+        v-if="showCancelButton"
+        :size="buttonSize"
+        @click="handleCancel"
+      >
+        {{ cancelText }}
+      </el-button>
+      <el-button 
+        v-if="showConfirmButton"
+        :type="confirmButtonType"
+        :size="buttonSize"
+        :loading="confirmLoading"
+        @click="handleConfirm"
+      >
+        {{ confirmText }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'JcDialog',
+  inheritAttrs: false,
+  props: {
+    // 是否显示
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 宽度
+    width: {
+      type: String,
+      default: '50%'
+    },
+    // 尺寸
+    size: {
+      type: String,
+      default: 'small'
+    },
+    // Dialog CSS Margin Top
+    top: {
+      type: String,
+      default: '15vh'
+    },
+    // 是否需要遮罩层
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    // 自定义类名
+    customClass: {
+      type: String,
+      default: ''
+    },
+    // 是否点击遮罩关闭 Dialog
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    },
+    // 是否按 ESC 关闭 Dialog
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示关闭按钮
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示底部
+    showFooter: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示取消按钮
+    showCancelButton: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示确认按钮
+    showConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    // 取消按钮文本
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    // 确认按钮文本
+    confirmText: {
+      type: String,
+      default: '确定'
+    },
+    // 确认按钮类型
+    confirmButtonType: {
+      type: String,
+      default: 'primary'
+    },
+    // 按钮尺寸
+    buttonSize: {
+      type: String,
+      default: 'medium'
+    },
+    // 确认按钮加载中
+    confirmLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      internalVisible: this.visible
+    }
+  },
+  watch: {
+    visible(val) {
+      this.internalVisible = val
+    },
+    internalVisible(val) {
+      this.$emit('update:visible', val)
+    }
+  },
+  methods: {
+    handleOpen() {
+      this.$emit('open')
+    },
+    handleOpened() {
+      this.$emit('opened')
+    },
+    handleClose() {
+      this.$emit('close')
+    },
+    handleClosed() {
+      this.$emit('closed')
+    },
+    handleCancel() {
+      this.$emit('cancel')
+      this.internalVisible = false
+    },
+    handleConfirm() {
+      this.$emit('confirm')
+      if (!this.confirmLoading) {
+        this.internalVisible = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.jc-dialog-footer {
+  text-align: right;
+  padding-top: 16px;
+}
+
+.jc-dialog-footer .el-button {
+  margin-left: 8px;
+}
+</style>

package/lib/components/JcInput.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="jc-input-wrapper">
+    <el-input
+      v-model="internalValue"
+      v-bind="$attrs"
+      :type="type"
+      :size="size"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :clearable="clearable"
+      :show-password="showPassword"
+      :maxlength="maxlength"
+      :prefix-icon="prefixIcon"
+      :suffix-icon="suffixIcon"
+      @input="handleInput"
+      @blur="handleBlur"
+      @focus="handleFocus"
+    >
+      <template v-for="(_, name) in $slots" v-slot:[name]>
+        <slot :name="name"></slot>
+      </template>
+    </el-input>
+    <span 
+      v-if="maxLength && internalValue" 
+      class="jc-input-count"
+    >
+      {{ internalValue.length }}/{{ maxLength }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JcInput',
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    // 输入框类型
+    type: {
+      type: String,
+      default: 'text'
+    },
+    // 尺寸
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    // 是否可清空
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示切换密码图标
+    showPassword: {
+      type: Boolean,
+      default: false
+    },
+    // 最大长度
+    maxlength: {
+      type: Number,
+      default: null
+    },
+    // 前缀图标
+    prefixIcon: {
+      type: String,
+      default: ''
+    },
+    // 后缀图标
+    suffixIcon: {
+      type: String,
+      default: ''
+    },
+    // 是否显示字数统计
+    showCount: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      internalValue: this.value
+    }
+  },
+  computed: {
+    maxLength() {
+      return this.showCount ? (this.maxlength || 999) : null
+    }
+  },
+  watch: {
+    value(val) {
+      this.internalValue = val
+    }
+  },
+  methods: {
+    handleInput(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    },
+    handleBlur(event) {
+      this.$emit('blur', event)
+    },
+    handleFocus(event) {
+      this.$emit('focus', event)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.jc-input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.jc-input-count {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  font-size: 12px;
+  color: #909399;
+}
+</style>