#控件说明
rx-fit是一个上中下结构的一个布局控件，
适用于头部固定（放置按钮搜索等）
底部固定（放置按钮等）。

#关于rx-fit
其实rx-fit控件一开始只是做一个上中下的一个布局而已，但是随着需求的增加，内容也丰富了起来，以下代码有点多，看上去可能有些复杂，但其实就只是下面这种简单的结构而已：

<rx-fit>
    <div slot="toolheader">头部（一般用于头部搜索的情况）</div>
    <div>中间区域</div>
    <div slot="toolfooter">底部（一般用于底部有按钮的情况）</div>
    <div slot="searchbar">自定义搜索区域（可以通过isheader属性，改变它显示在头部或者以弹窗显示，如果只需要显示在头部，可以直接写在toolheader里面）</div>
</rx-fit>

控件属性

代码

<rx-fit :isheader="isheader" :issearch="fitSearch">
   <div slot="toolheader" foldheader="true" foldbtn="true" border="false">
        <span class="search-btn-box">
                <span class="search-btn" @click.stop="searchshow">
                <i class="iconfont iconguolv"></i>过滤
                </span>
        </span>
   </div>

   <div slot="searchbar" btnalign="right" hadertext="搜索" oktext="搜索" width="380px" okIcon="search" cancelIcon="reload"
  @search="search"
  @cancel="cancel"
  @close="close"
   >
      <a-form :layout="colLayout">
        <a-row :gutter="24">
          <a-col :span="colSpan">
              <a-form-item label="标题1">
                  <a-input placeholder="请输入标题1"/>
              </a-form-item>
           </a-col>
           <a-col :span="colSpan">
              <a-form-item label="标题2">
                  <a-input placeholder="请输入标题2"/>
              </a-form-item>
           </a-col>
        </a-row>
      </a-form>
   </div>

   <div slot="toolfooter" shadow="true">
      底部
   </div>

   <div>
       这里放中间内容
   </div>
</rx-fit>
//注意：外面控制弹窗显示的“过滤”按钮点击事件要加 stop (@click.stop);
//具体可以参照：jpaas-web\jpaas-commons\src\components\controlexample\rxfitdemo.vue
import { RxFit } from 'jpaas-common-lib';
export default{
    components: {
      RxFit
    },
    data(){
        return {
            fitSearch:false,
            isheader=false,
            colSpan:24,
            colLayout:'vertical'
        }
    },
     created(){
      this.initRxFit();
    },
    methods:{
       initRxFit(){
          //初始化rx-fit模板 advanced属性是在搜索条件多的时候，头部需要折叠的时候配置的；
            this.colLayout = this.isheader ? 'inline':'vertical' ;
            this.colSpan = this.isheader ? 8:24 ;
            this.advanced = this.isheader ? false : true ;
            this.fitSearch = this.isheader ? true :false ;
        },
        search(){
        //搜索按钮触发
        },
        cancel(){
        //重置按钮触发
        },
        searchshow(){
            this.fitSearch = !this.fitSearch ;
        },
        close(){
            this.fitSearch = false ;
        }
    }
}