前端公共组件库

一、安装

npm i -S prower-components 或者 yarn add prower-components (推荐)

二、使用

1、模块说明

 按需引入
   import {
    EchartConfig, // each配置
    ProwerForm, // 表单组件
    ProwerDialog, // 弹窗组件
    ProwerLine, //折线图
    ProwerDynamicInstrument, // 动画仪表盘
    ProwerDashBoard, // 带进度条的仪表盘
    ProwerPaging, // 分页
    ProwerSearchPane, // 搜索栏目
    ProwerTable, // 表格组件
    ProwerTree, // 树
    ProwerLnfiniteScroll // 滑动加载
} from 'prower-components';
全局引入
import prowerComponents from 'prower-components';
vue.use(prowerComponents)

2、项目实例地址

http://192.168.1.199:90/front_developer/prower-components.git

NPM组件包地址

http://192.168.1.84:10000/-/web/detail/prower-components

3.prowerDialog 弹窗组件

注：该组件默认显示，通过按需加载is的方法控制组件的显示和关闭。

参数说明

### toBody: {
                type: Boolean, // 是否添加到body，默认添加到当前节点下
                default: false
            },
            slotName: { // 弹窗插槽名称，默认没有
                type: String,
                default: ''
            },
            title: { // 弹窗标题
                type: String,
                default: '无标题'
            },
            width: { // 弹窗宽度，支持百分比
                type: String,
                default: '900px'
            },
            showFooter: { // 是否显示默认页脚
                type:Boolean,
                default: true
            }

回调方法

###    closeDialog() {
                this.$emit('close-dialog') // 弹窗关闭回调
            },
            saveData() { // 默认页脚，确定按钮触发回调
                this.$emit('save-data')
            }
			

使用实例

### <prowerDialog @closeDialog=“closeDialog” @saveData=“saveData”></prowerDialog>

4.prowerInfiniteScroll 滚动加载

注：该组件支持插槽方式。

参数说明

      props: {
      height: { // 盒子高度
        type: String,
        default: '300px'
      },
      totlePage: { // 总页数
        type: Number,
        default: 0
      },
      currentPage: { // 当前页数
        type: Number,
        default: 0
      },
      loading: { // 加载状态
        type: Boolean,
        default: false
      }
    }

### 回调方法 
   this.$emit('load') // 下拉加载触发   

5.prowerTable 表格组件

注：该组件支持插槽方式。

参数说明

       props: {
            otherMaxHeight: { // 当前盒子，表格兄弟元素的高度，表格自动计算剩余高度。默认175px
                type: Number,
                default: 175
            },
            tableData: { // 表格数据
                type: Array,
                default: function () {
                    return []
                }
            },
            tableHeader: {  // 表头数据（[{name:表头名称,slotName:'该列插槽名称',val:对应的字段名,clickType:true（可点击触发）,width:列宽度,type: button(按钮)minWidth: 列最新宽度,dictionary: 过滤器过滤字段名-静态字典 配置已确定字段]）
                type: Array,
                default: function () {
                    return []
                }
            },
            size: { // 表格大小
                type: String
            },
            serial: { // 是否显示序号
                type: Boolean,
                default: true
            },
            selection: { // 是否多选
                type: Boolean,
                default: false
            },
            checkVal: { // check回显值
                type: Array
            },
            loadingType: { // 表格加载状态
                type: Boolean,
                default: false
            }，
           filterFun: { // 自定义过滤器方法
                type: Function,
                default: $filter
            },
        },

回调方法

this.$emit('tableClckFun', val) // 当前被点击的表格
this.$emit('tdClick', [val]) // 单选被点击
this.$emit('handleSelectionChange', val) // 多选被点击
this.$emit('rowClick', val) // 某行被点击
this.$emit('tableBtnFun', val, obj, index)// 没有定义按钮类型的点击事件回调
this.$emit('tableBtnChange', data, obj, index) // 编辑类型
this.$emit('tableBtnDelect', data, obj, index)  // 删除类型  
this.$emit('tableBtnReset', data, obj, index) // 重置按钮

6.prowerForm 表格组件

注：该组件支持插槽方式。

eg

###表单支持类型 （textarea,time,radioGroup,radioButton,select,slider,inputNumber,switch）

    <div class="box-bg-style">
        <formComponent ref="formComponent"  :formList="formList"  v-model="formData"></formComponent>
        <el-button @click="submit">提交</el-button>
    </div>

    import formComponent from '@/components/form'

    export default {
        name: "formEg",
        components: {formComponent},
        data() {
            return {
                formData: { // 邦定值
                    val_1: '',
                    val_2: '',
                    val_3: '',
                    val_4: '',
                    val_5: '',
                },
                formList: [
                    {
                        label: '输入框',
                        prop: 'val_1',
                        className: '', // 盒子classname
                        slotName: 'suffix', // 表单插槽名称
                        childSlot： '', // input插槽名称
                        suffixTip: 'b', // input插槽显示内容
						setRules：'required', // 验证规则
						rulesMessage：'第一条必填', //规则提示
                        fun: this.inputFun // 输入回调方法
                    },
                    {
                        label: '必填数字',
                        prop: 'val_5'
                    },
                    {
                        label: '文本输入框',
                        prop: 'val_2',
                        placeholder: '请输入内容',
                        type: 'textarea' // 文本输入框
                    },
                    {
                        label: '时间选择',
                        type: 'time',
                        prop: 'val_3',
                        unPicker: true, // 不能小于当前时间
                        format: 'yyyy-MM-dd', // 显示格式和输出格式
                        dateType: 'datetime', // 时间选择类型，和element同步，默认datetime
                        fun: this.timeFun // 时间选择回调
                    },
                    // {
                    //     label: '单选',
                    //     type: 'radio',
                    //     prop: 'val_4',
                    //     radioOption: [
                    //         {label:1,value:1},
                    //         {label:2,value:2}
                    //     ]
                    // }
                ]
            }
        },
        created() {

        },
        methods: {
            submit() {
                this.$refs.formComponent.validate().then(formData => {
                    console.log(formData)
                    console.log(this.formData)
                    this.$message('提交成功')
                })
            },
            inputFun(config, data) { // config配置项， data输入值
                console.log(config)
                console.log(data)
            },
            timeFun(config, data) { // config配置项， data输入值
                console.log(config)
                console.log(data)
            },
        }
    }

表单验证规则

required：必填验证，
rules_phone：电话号码必填验证
shortName： 长度限制小于12位，字母开头，并由数字字母组成必填验证
requiredNumber：正整数必填验证
idCard：身份证验证
requiredIdCard：身份证必填验证
requiredNumber_1：请输入大于等于0小于等于1的数字必填验证
number:正整数验证
requiredPositiveInteger：必填大于0的数字
positiveInteger：大于0的数字
mail：邮箱验证
IP：IP验证
macRequired：MAC地址必填验证
更多验证规则请查看 packages =》 ProwerForm=》 src=> formRules.js

7 图形组件

注：EchartConfig {

    LineConfig // 折现图基本配置
    DynamicInstrumentConfig() // 动画仪表盘基本配置
    DashBoardConfig() // 带进度条的仪表盘基本配置

}

ProwerLine 折现图

eg

<ProwerLine ref="chartBox" class="chart-box" v-model="chartConfig"></ProwerLine >
 let chartConfig_1 =  DynamicInstrumentConfig({value: 15})
 <ProwerDynamicInstrument style="height: 400px" v-model="chartConfig_1"></ProwerDynamicInstrument>

方法

this.$refs.chartBox.init() // 重新初始化图形