This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

background

You may be wondering: Isn’t Ant-design-Vue powerful enough? Why encapsulate?

Yes, the power of Ant-Design-Vue is undeniable. Almost all of our backend systems use Ant-Design-Vue, and its components cover every corner of the project.

Because of this, we found some problems in the use of high frequency, such as:

  • Table component data interaction is troublesome, does not support column drag, drag sorting, does not support global modification of the default pageSize number
  • The Upload component does not support v-Model
  • Upload also cannot use rule validation in FormModel
  • The Select component writes the for loop for the pull list each time
  • There is no year selector

So we built a component library based on it to solve the problems mentioned above:

  • The Table component supports loadData to loadData, column dragging and sorting, and global pageSize configuration
  • The Upload component supports V-Model and supports rule validation in FormModel
  • The Select component supports the loadData function and does not write repeated for loops
  • Added a year selector
  • New powerful file preview component, support video, images, PDF and other common files preview

The components provided by Ant-Design-Vue work fine because they are packaged based on it.

We currently have 5+ systems using the ANTDV-Kit component library, if you encounter these problems, please try ~

The installation

# npm
npm i @wytxer/antdv-kit

# yarn
yarn add @wytxer/antdv-kit
Copy the code

The component library depends on the Ant-Design-vue 1.x version, if not installed:

# npmNPM I ant - design - vue @ ^ 1.7.8# yarnYarn add ant - design - vue @ ^ 1.7.8Copy the code

Global references

import AKit from '@wytxer/antdv-kit'

Vue.use(AKit)

// Set pageSize and textFill globally
Vue.use(AKit, {
  // Set the number of pages globally so that you don't have to customize the pageSize field every time the table component is used
  pageSize: 20.// Globally set the empty placeholder for the ak-text-fill component, which can also be accessed within the Vue component via $textFill
  textFill: The '-'
})
Copy the code

use

<ak-upload v-model="files" />
Copy the code

Component Usage Examples

Here are some examples of component usage. For the complete component library usage documentation, see antDV-Kit component library usage documentation

Table form

The Table component supports the loadData function to loadData, which greatly simplifies usage and encapsulates the functions of scalable columns and row drag and drop sorting. For example, using row drag sort:

<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: 'users' + i,
      mobile: '17600000000'.roleName: 'Administrator'})}return { rows }
}

export default {
  data () {
    return {
      // Query parameters
      queryFilters: {},
      / / headers
      columns: [{
        title: 'name'.dataIndex: 'name'.width: 200
      }, {
        title: 'Mobile phone Number'.dataIndex: 'mobile'.width: 200
      }, {
        title: 'Role Name'.dataIndex: 'roleName'.width: 200}}},methods: {
    queryTables,
    // Drag to end the callback
    onDrop (sourceItem, targetItem, isDrop) {
      console.log(sourceItem, targetItem, isDrop)
    }
  }
}
</script>
Copy the code

Effect preview:

The Upload to Upload

The Upload component supports V-Model and supports multiple scenarios such as file uploading, built-in file preview, folder uploading, and concurrent uploading. Basic usage is as follows:

<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>
Copy the code

Effect preview:

YearPicker YearPicker

An A-date-picker-wrapped year picker component that can be used when a year needs to be selected. Basic usage is as follows:

<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="Please select" v-model="value" allowClear />
    <div class="PT16">Currently selected year:{{ value }}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // The default values support setting strings or moment objects, but the return value is always in string format
      value: '2019'
      // value: this.$moment()}}}</script>
Copy the code

Effect preview:

Code and documentation

Thanks for reading, the component library will be long-term maintenance, welcome to download and use: ANTDV-kit component library GitHub address

Antdv-kit component library usage documentation is also kept up to date.

The component library is integrated into the mid-back end scaffolding. For more information about mid-back end scaffolding, see here: Share a mid-back end scaffolding based on vue.js and Ant-Design-Vue