分享一个基于 ant-design-vue 封装的组件库

·  阅读 2811
分享一个基于 ant-design-vue 封装的组件库

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

背景

你可能会想问:ant-design-vue 还不够强大吗?为什么还要封装?

是的,ant-design-vue 的强大不容置疑,某小厂几乎所有的中后台系统都使用到了 ant-design-vue,其组件已覆盖了项目中的各个角落。

也正因为如此,我在高频率的使用中,发现了一些使用不太利索的地方,比如:

  • Table 组件数据交互麻烦、不支持列拖动、拖拽排序、不支持全局修改默认的 pageSize 条数
  • Upload 组件不支持 v-model
  • Upload 在 FormModel 中也不能使用 rule 校验
  • Select 组件每次都要写下拉列表的 for 循环
  • 没有年份选择器

等等这一系列小问题,所以我基于它封装了一套组件库,解决了上面提到的问题:

  • Table 组件支持 loadData 加载数据,支持列拖动、拖拽排序、支持全局配置 pageSize 参数
  • Upload 组件支持 v-model、支持在 FormModel 中使用 rule 校验
  • Select 组件支持 loadData 函数,不再写重复的 for 循环
  • 新增了年份选择器
  • 新增了强大的文件预览组件,支持视频、图片、PDF 等常见文件的预览

因为是基于它封装的,所以 ant-design-vue 所提供的组件都可以正常使用。

目前已有 5+ 的系统在使用 antdv-kit 组件库,如果你也遇到了上面的这些问题,不妨试试吧~

安装

# npm
npm i @wytxer/antdv-kit

# yarn
yarn add @wytxer/antdv-kit
复制代码

组件库依赖于 ant-design-vue 1.x 版本,如果没有安装:

# npm
npm i ant-design-vue@^1.7.8

# yarn
yarn add ant-design-vue@^1.7.8
复制代码

全局引用

import AKit from '@wytxer/antdv-kit'

Vue.use(AKit)

// 全局设置 pageSize 和 textFill
Vue.use(AKit, {
  // 全局设置分页条数,这样就不用每个使用 table 组件的地方都自定义 pageSize 字段了
  pageSize: 20,
  // 全局设置空占位符,给 ak-text-fill 组件使用的,也可以在 Vue 组件内通过 $textFill 访问
  textFill: '-'
})
复制代码

使用

<ak-upload v-model="files" />
复制代码

组件使用示例

这里放一部分组件的使用示例,完整的组件库使用文档参见:antdv-kit 组件库使用文档

Table 表格

Table 组件支持 loadData 函数加载数据,极大简化了使用,同时封装了可伸缩列、行拖拽排序等功能。例如使用行拖拽排序:

<template>
  <ak-table :columns="columns" :loadData="queryTables" dragSort @drop="onDrop" />
</template>

<script>
const queryTables = () => {
  const rows = []
  for (let i = 1; i < 18; i += 1) {
    rows.push({
      key: i,
      id: i,
      name: '用户' + i,
      mobile: '17600000000',
      roleName: '管理员'
    })
  }
  return { rows }
}

export default {
  data () {
    return {
      // 查询参数
      queryFilters: {},
      // 表头
      columns: [{
        title: '姓名',
        dataIndex: 'name',
        width: 200
      }, {
        title: '手机号',
        dataIndex: 'mobile',
        width: 200
      }, {
        title: '角色名称',
        dataIndex: 'roleName',
        width: 200
      }]
    }
  },
  methods: {
    queryTables,
    // 拖动结束的回调
    onDrop (sourceItem, targetItem, isDrop) {
      console.log(sourceItem, targetItem, isDrop)
    }
  }
}
</script>
复制代码

效果预览:

ak-table.gif

Upload 上传

Upload 组件支持 v-model,支持多种场景的文件上传、内置文件预览、支持文件夹上传、支持并发上传等场景。基础使用如下:

<template>
  <ak-upload v-model="files" list-type="picture-card" action="http://run.mocky.io/v3/d80efc3d-b8c6-403c-acd3-9ed641d1d0e3" />
</template>

<script>
export default {
  data () {
    return {
      files: []
    }
  }
}
</script>
复制代码

效果预览:

ak-upload.gif

YearPicker 年份选择器

基于 a-date-picker 封装的年份选择器组件,可在需要选择年份的时候使用。基础使用如下:

<template>
  <ak-upload v-model="files" list-type="picture-card" action="http://run.mocky.io/v3/d80efc3d-b8c6-403c-acd3-9ed641d1d0e3" />
</template>

<script>
<template>
  <div>
    <ak-year-picker placeholder="请选择" v-model="value" allowClear />
    <div class="PT16">当前选中的年份:{{ value }}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 默认值支持设置字符串或 moment 对象,但是返回值始终是字符串格式
      value: '2019'
      // value: this.$moment()
    }
  }
}
</script>
复制代码

效果预览:

ak-year-picker.gif

代码和文档

感谢阅读,组件库以后会长期维护,欢迎下载使用:antdv-kit 组件库 GitHub 地址

antdv-kit 组件库使用文档也会保持同步更新。

组件库已集成到中后台前端脚手架,更多关于中后台前端脚手架介绍请查看这里:分享一个基于 Vue.js 和 ant-design-vue 的中后台前端脚手架

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改