Install

安装方法：
1.npm安装：
npm: npm install lx-page
2.yarn安装：
yarn add lx-page
3.引用lx-page,使用方法见下文

main.js

import LxPage from "lx-page";
Vue.use(LxPage);

hy-page-filter

| 传递的参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------ | ------ | ------ | ------ | | className | 自定义类名 | String | - | - | | lableWidth | 表单域标签的的宽度 | String | - | 80px | | listTypeInfo | 相关列表 | Object | - | {} | | filterList | 过滤器列表 | Array | - | 必填 | | query | 参数 | Object | - | 必填 |

handleEvent 事件

| 事件 | 说明 | | -------------- | ------ | | el-select | change | | el-input | focus | | el-radio | change | | el-date-picker | focus |

handleClick 事件

| 事件 | 说明 | | --------- | ----- | | el-button | click |

引用 lx-page 的使用示例：

<template>
    <hy-page-filter
        :query.sync="filterInfo.query"
        :filter-list="filterInfo.list"
        :list-type-info="listTypeInfo"
        @handleClick="handleClick"
        @handleEvent="handleEvent"
    >
        <template slot="form-condition">
            <el-form-item label="自定义参数">
                {{filterInfo.query.name}}
            </el-form-item>
        </template>
    </hy-page-filter>
</template>

<script>
export default {
    data() {
        return {
            // 相关列表
            listTypeInfo: {},
            // 过滤相关配置
            filterInfo: {
                query: {name: "",},
                list: [
                    { key: "客户姓名", type: "input", label: "客户姓名", value: "name" },
                    { type: "slot", value: "condition" },
                    { type: "button", label: "重置", btType: "info", event: "reset", show: true },
                    { type: "button", label: "搜索",btType: "primary",event: "search",show: true }
                ],
            }
        },
    },
    methods: {
        // 按钮点击
        handleClick(event, data) {
            switch (event) {
                case "search":
                break;
            }
        },
        handleEvent(event, data) { },
    }