uniqueway-element

📦 基于 element-ui 库的二次封装，该组件库主要针对现有列表页的 table 表格及 form 表单中的 rules 校验等场景，旨在减少重复的操作，让开发变得更简单。

Install

npm install uniqueway-element

Quick Start

• 使用前请安装 element-ui

import Vue from 'vue'
import UniquewayElement from 'uniqueway-element'
 
Vue.use(UniquewayElement)

Components

// 名字太长，待优化
UniquewayElementTableList - 可配置的 Table
UniquewayElementScrollAffix - 固钉
UniquewayElementPreviewUploadSingle - 单张图片上传
UniquewayElementPreviewUploadMultiple - 多张个图片上传

Mixin

RulesForm - Form 表单规则

Using

• 示例 UniquewayElementTableList

<template>
  <UniquewayElementTableList
    title="产品列表"
    :paginationFilter="filterFormParams"
    :source="sourceList"
    :config="config"
    @getList="getList"
  >
  </UniquewayElementTableList>
</template>
<script>
import XxxComponent from '@/components/XxxComponent'
export default {
  components: {
    XxxComponent,
  }
  computed: {
    ...mapGetters({
      sourceList: 'Xxxmodule/sourceList',
    })
  },
  methods: {
    setForbidden () {},
    setUnForbidden () {},
    async getList (query = this.filterFormParams) {
      const res = await this.$store.dispatch(ProductLib.getAction('GetProductsList'), query)
      return res
    },
  }
  data () {
    return {
      loading: false,
      filterFormParams: { // 获取列表时传递的参数
        type: '',
        // ...
      },
      config: [
        {
          attrs: {
            label: '编号',
            prop: 'id',
            width: '90'
          }
        },
        {
          attrs: {
            label: '产品信息',
            width: '350'
          },
          renderComponent (data) {
            return [ // 必须为数组
              { name: 'XxxComponent', data } // 返回「组件名」和「组件需要的数据」(使用 v-model 来绑定 data)
            ]
          }
        },
        {
          attrs: {
            label: '最后更新人',
            width: '100',
            prop: 'lastModifierBy'
          }
        },
        {
          attrs: {
            label: '更新时间',
            prop: 'updatedAt'
          }
        },
        {
          attrs: {
            label: '操作',
            width: '260'
          },
          renderHTML (row) {
            return [
              {
                attrs: {
                  label: '编辑',
                  type: 'text',
                  size: 'medium'
                },
                el: 'button',
                click (row) {
                  this.$router.push(`/product_lib/products/${row.id}/edit/`)
                }
              },
              !row.isForbid ? {
                attrs: {
                  label: '禁用',
                  type: 'text',
                  size: 'medium'
                },
                el: 'button',
                click () {
                  this.setForbidden(row.id)
                }
              } : {
                attrs: {
                  label: '解除禁用',
                  type: 'text',
                  size: 'medium',
                  style: {
                    color: '#e6a23c'
                  }
                },
                el: 'button',
                click () {
                  this.setUnForbidden(row.id)
                }
              }
            ]
          }
        }
      ]
    }
  }
}
</script> 
 

• 示例 UniquewayElementScrollAffix

<template>
  <UniquewayElementScrollAffix>
    <div class="demo"></div>
  </UniquewayElementScrollAffix>
</template>
<style lang="scss" scoped>
  .demo {
    position: absolute;
    width: 150px;
    height: 300px;
    border: 1px solid red;
  }
</style> 
 

• 示例 UniquewayElementPreviewUploadSingle

<template>
  <UniquewayElementPreviewUploadSingle
    action="your API"
    v-model="value"
  />
</template>

• 示例 UniquewayElementPreviewUploadMultiple

<template>
  <UniquewayElementPreviewUploadMultiple
    action="your API"
    v-model="imageList"
  />
</template>
<script>
export default {
  data () {
    return {
      imageList: [
        { url: '' },
        { url: '' }
      ]
    }
  }
}
</script> 

• 示例 RuleForm

<template>
  <!-- code... -->
  <el-row :gutter="24">
    <el-col :span="24">
      <el-form-item
        label="标题"
        :prop="title"
        :rules="getRequiredRules('change')"
      >
        <el-input
          v-model="value.title"
          placeholder="请输入标题"
        />
      </el-form-item>
    </el-col>
  </el-row>
  <!-- code... -->
</template>
<!-- code... -->
 

Dependencies

• Vue 2.5.17
• ElementUI 2.11.1