筛选区 KLSearch

基本形式

<kl-search on-search={console.log("search")} on-reset={console.log("reset")} tips="通过订单号搜索有一定延时请不要重复操作">
    <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>

不显示“展开”切换开关

<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（根据交互规范，一行没有填满的按钮要跟在后面）

<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 title="查询"></kl-button>
                <kl-button title="重置"></kl-button>
            </kl-form-item>
        </kl-col>
    </kl-row>
</kl-search>

设置切换文字

<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

Param Type Description
[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

栅格布局 表格
想让文档更完善？ 来 GitHub 提个 PR 吧！