筛选区 KLSearch

基本形式

筛选区 KLSearch - 图1

  1. <kl-search on-search={console.log("search")} on-reset={console.log("reset")}>
        <kl-row>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="付款类型">
                    <kl-input type="text"></kl-input>
                </kl-form-item>
            </kl-col>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="支付方式">
                    <kl-input type="text"></kl-input>
                </kl-form-item>
            </kl-col>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="订单号">
                    <kl-input type="text"></kl-input>
                </kl-form-item>
            </kl-col>
        </kl-row>
        <kl-search-more>
            <kl-row>
                <kl-col span="4">
                    <kl-form-item labelSize="60" title="合同编号">
                        <kl-input type="text"></kl-input>
                    </kl-form-item>
                </kl-col>
            </kl-row>
        </kl-search-more>
    </kl-search>

不显示“展开”切换开关

筛选区 KLSearch - 图2

  1. <kl-search>
        <kl-row>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="付款类型">
                    <kl-input type="text"></kl-input>
                </kl-form-item>
            </kl-col>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="支付方式">
                    <kl-input type="text"></kl-input>
                </kl-form-item>
            </kl-col>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="订单号">
                    <kl-input type="text"></kl-input>
                </kl-form-item>
            </kl-col>
        </kl-row>
    </kl-search>

不显示Footer（根据交互规范，一行没有填满的按钮要跟在后面）

筛选区 KLSearch - 图3

  1. <kl-search isShowFooter={false}>
        <kl-row>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="付款类型">
                    <kl-input type="text"></kl-input>
                </kl-form-item>
            </kl-col>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="支付方式">
                    <kl-input type="text"></kl-input>
                </kl-form-item>
            </kl-col>
            <kl-col span="4">
                <kl-form-item>
                    <kl-button type="secondary" title="查询"></kl-button>
                    <kl-button title="重置"></kl-button>
                </kl-form-item>
            </kl-col>
        </kl-row>
    </kl-search>

设置切换文字

筛选区 KLSearch - 图4

  1. <kl-search unfoldText="更多" foldText="隐藏">
        <kl-row>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="付款类型">
                    <kl-input placeholder="付款类型" />
                </kl-form-item>
            </kl-col>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="支付方式">
                    <kl-input placeholder="支付方式" />
                </kl-form-item>
            </kl-col>
            <kl-col span="4">
                <kl-form-item labelSize="60" title="订单号">
                    <kl-input placeholder="订单号" />
                </kl-form-item>
            </kl-col>
        </kl-row>
        <kl-search-more>
            <kl-row>
                <kl-col span="4">
                    <kl-form-item labelSize="60" title="合同编号">
                        <kl-input placeholder="合同编号" />
                    </kl-form-item>
                </kl-col>
            </kl-row>
        </kl-search-more>
    </kl-search>

API

KLSearch

KLSearch

ParamTypeDescription
[options.data]object= 绑定属性
[options.data.class]string=> 补充class
[options.data.isShowFooter]boolean=> 控制是否显示Footer
[options.data.isShowMore]boolean=> 控制是否显示更多
[options.data.isShowToggle]boolean=> 控制展示toggle文字，默认展示出来
[options.data.searchText]string=> 设置展开的文案，默认“查询”
[options.data.resetText]string=> 设置展开的文案，默认“重置”
[options.data.unfoldText]string=> 设置展开的文案，默认“展开”
[options.data.foldText]string=> 设置收起的文案，默认“收起”

search 点击查询时触发Event

reset 点击重置时触发Event