XYB-UI

基于 Element UI 的 Vue 2.0 组件库

组件列表

• XybButton: 按钮组件
• QueryTable: 查询表格组件
• Pagination: 分页组件

安装

npm install xyb-ui

使用

完整引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import XybUI from 'xyb-ui'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

Vue.use(ElementUI)
Vue.use(XybUI)

按需引入

import Vue from 'vue'
import { XybButton, QueryTable, Pagination } from 'xyb-ui'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

Vue.component(XybButton.name, XybButton)
Vue.component(QueryTable.name, QueryTable)
Vue.component(Pagination.name, Pagination)

重要提示

1. 必须安装依赖：使用前请确保已安装所有 peerDependencies

   npm install vue@^2.6.0 element-ui@^2.x @riophae/vue-treeselect@^0.4.0

2. Vue 版本要求：本组件库支持 Vue 2.6.x 和 Vue 2.7.x，不支持 Vue 3.x

3. Vue 2.7 兼容性：如果您使用的是 Vue 2.7.x 版本，请确保：

   • 安装 [email protected] 或更高版本
   • 不要安装 vue-template-compiler（Vue 2.7 已内置）

4. Element UI 全局引入：必须全局引入 Element UI 才能正常使用本组件库

XybButton 组件

在组件中使用

<template>
  <div>
    <!-- 基础用法 -->
    <xyb-button>默认按钮</xyb-button>
    <xyb-button type="primary">主要按钮</xyb-button>
    <xyb-button type="success">成功按钮</xyb-button>
    <xyb-button type="warning">警告按钮</xyb-button>
    <xyb-button type="danger">危险按钮</xyb-button>
    <xyb-button type="info">信息按钮</xyb-button>

    <!-- 朴素按钮 -->
    <xyb-button plain>朴素按钮</xyb-button>
    <xyb-button type="primary" plain>主要按钮</xyb-button>

    <!-- 圆角按钮 -->
    <xyb-button type="primary" round>圆角按钮</xyb-button>

    <!-- 圆形按钮 -->
    <xyb-button type="primary" icon="el-icon-search" circle></xyb-button>

    <!-- 禁用状态 -->
    <xyb-button disabled>禁用按钮</xyb-button>
    <xyb-button type="primary" disabled>禁用按钮</xyb-button>

    <!-- 加载中 -->
    <xyb-button type="primary" loading>加载中</xyb-button>

    <!-- 不同尺寸 -->
    <xyb-button size="medium">中等按钮</xyb-button>
    <xyb-button size="small">小型按钮</xyb-button>
    <xyb-button size="mini">超小按钮</xyb-button>

    <!-- 带图标 -->
    <xyb-button type="primary" icon="el-icon-edit">编辑</xyb-button>
    <xyb-button type="primary" icon="el-icon-delete">删除</xyb-button>

    <!-- 点击事件 -->
    <xyb-button type="primary" @click="handleClick">点击我</xyb-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了!')
    }
  }
}
</script>

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | type | 类型 | string | primary / success / warning / danger / info / text / default | default | | size | 尺寸 | string | medium / small / mini | medium | | plain | 是否朴素按钮 | boolean | — | false | | round | 是否圆角按钮 | boolean | — | false | | circle | 是否圆形按钮 | boolean | — | false | | loading | 是否加载中状态 | boolean | — | false | | disabled | 是否禁用状态 | boolean | — | false | | icon | 图标类名 | string | — | — | | autofocus | 是否默认聚焦 | boolean | — | false | | native-type | 原生 type 属性 | string | button / submit / reset | button |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | click | 点击按钮时触发 | event: Event |

QueryTable 组件

QueryTable 是一个集成了查询表单和数据表格的组件。

基本用法

<template>
  <query-table
    :query-params="queryParams"
    :form-data="formData"
    :get-data="getData"
  >
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="status" label="状态" />
  </query-table>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      formData: [
        {
          label: '名称',
          model: 'name',
          type: 'input'
        },
        {
          label: '状态',
          model: 'status',
          type: 'select',
          dictOptions: [
            { dictLabel: '启用', dictValue: '1' },
            { dictLabel: '禁用', dictValue: '0' }
          ]
        }
      ]
    }
  },
  methods: {
    getData(params) {
      // 返回 Promise,请求数据
      return this.$http.get('/api/list', { params })
    }
  }
}
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | queryParams | 查询参数对象 | Object | - | | formData | 表单配置数组 | Array | [] | | getData | 获取数据的方法 | Function | - | | pagination | 是否显示分页 | Boolean | true | | pageSize | 每页显示条数 | Number | 10 | | border | 是否显示边框 | Boolean | true | | indexed | 是否显示序号列 | Boolean | false |

FormData 配置

{
  label: '字段名',      // 表单项标签
  model: 'fieldName',  // 绑定的字段名
  type: 'input',       // 表单项类型: input, select, daterange, datepicker, treeselect 等
  dictOptions: [],     // select 类型的选项数据
  span: 8,             // 栅格占位
  disabled: false,     // 是否禁用
  required: false      // 是否必填
}

表单项类型

• input: 输入框
• select: 下拉选择
• multiple: 多选下拉框
• daterange: 日期范围选择器
• datepicker: 日期选择器
• daterangetime: 日期范围选择器(无时间)
• datetimerange: 日期时间范围选择器
• monthrange: 月份范围选择器
• treeselect: 树形选择器

Pagination 组件

分页组件

基本用法

<template>
  <pagination
    :total="total"
    :page.sync="page"
    :limit.sync="limit"
    @pagination="handlePagination"
  />
</template>

<script>
export default {
  data() {
    return {
      total: 100,
      page: 1,
      limit: 10
    }
  },
  methods: {
    handlePagination({ page, limit }) {
      this.page = page
      this.limit = limit
      // 重新获取数据
    }
  }
}
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | total | 总条目数 | Number | - | | page | 当前页数 | Number | 1 | | limit | 每页显示条数 | Number | 20 | | pageSizes | 每页显示个数选择器的选项 | Array | [10, 20, 30, 50] | | layout | 组件布局 | String | 'total, sizes, prev, pager, next, jumper' | | background | 是否显示背景色 | Boolean | true | | autoScroll | 分页后是否自动滚动到顶部 | Boolean | true |

依赖

• Vue ^2.6.0
• Element UI ^2.x
• @riophae/vue-treeselect ^0.4.0

注意事项

1. QueryTable 组件中的 FormList 组件包含 loadOptions 方法,该方法需要使用者根据实际业务需求自行实现
2. 使用 treeselect 类型的表单项时,需要确保项目中已安装 @riophae/vue-treeselect 依赖
3. QueryTable 组件的 getData 方法需要返回 Promise,响应数据格式为:

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

常见问题

问题：组件报错 "Failed to mount component: template or render function not defined"

解决方案：

1. 确认已安装所有依赖：

   npm install vue@^2.6.0 element-ui@^2.x @riophae/vue-treeselect@^0.4.0

2. 确保正确引入 Element UI：

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(ElementUI)

3. 完整的引入示例（推荐）：

   // main.js
   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import XybUI from 'xyb-ui'
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
   
   Vue.use(ElementUI)  // 必须先引入 Element UI
   Vue.use(XybUI)      // 再引入 XybUI
   
   new Vue({
     el: '#app',
     // ...
   })

4. 检查 Vue 版本：确保使用的是 Vue 2.x，而不是 Vue 3.x

   npm list vue

问题：无法找到模块或样式丢失

解决方案：

确保引入了必要的样式文件：

import 'element-ui/lib/theme-chalk/index.css'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 打包
npm run build

发布到 npm

1. 登录 npm

npm login

2. 发布

npm publish

License

MIT