控件说明

rx-fit是一个上中下结构的一个布局控件,
适用于头部固定(放置按钮搜索等)
底部固定(放置按钮等)。

关于rx-fit

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

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

控件属性

rxfit 属性 说明
isheader 控制searchbar显示在头部还是显示成弹框,默认false,可选true,false
toolheader 属性 说明
foldheader 控制toolheader是否显示,可选:true,false,默认true
foldbtn 控制折叠按钮是否显示,可选:true,false,默认true
border 控制下边框是否显示,可选:true,false,默认true
toolfooter 属性 说明
shadow 是否显示上边阴影,默认:true
searchbar 属性 说明
btnalign 控制按钮显示方向,可选:right,left,center,默认center
searchdir 控制弹窗显示方向,可选:right,left默认right
hadertext 搜索面板头部文字,默认‘搜索’
oktext 搜索按钮的名字,默认”搜索”
canceltext 重置按钮的名字,默认”重置”
width 弹框的宽度,默认”380px”
okIcon 搜索按钮的图标,默认”search”,只能在ant design vue的图标库中选
cancelIcon 重置按钮的图标,默认”reload” ,只能在ant design vue的图标库中选
@search 搜索按钮的触发事件
@cancel 重置按钮的触发事件
@close 关闭按钮的触发事件

代码

  1. <rx-fit :isheader="isheader">
  2. <div slot="toolheader" foldheader="true" foldbtn="true" border="false">
  3. <span class="search-btn-box">
  4. <span class="search-btn" @click.stop="searchshow">
  5. <i class="iconfont iconguolv"></i>过滤
  6. </span>
  7. </span>
  8. </div>
  9. <div slot="searchbar" btnalign="right" hadertext="搜索" oktext="搜索" width="380px" okIcon="search" cancelIcon="reload"
  10. v-if="fitSearch"
  11. @search="search"
  12. @cancel="cancel"
  13. @close="close"
  14. >
  15. <a-form :layout="colLayout">
  16. <a-row :gutter="24">
  17. <a-col :span="colSpan">
  18. <a-form-item label="标题1">
  19. <a-input placeholder="请输入标题1"/>
  20. </a-form-item>
  21. </a-col>
  22. <a-col :span="colSpan">
  23. <a-form-item label="标题2">
  24. <a-input placeholder="请输入标题2"/>
  25. </a-form-item>
  26. </a-col>
  27. </a-row>
  28. </a-form>
  29. </div>
  30. <div slot="toolfooter" shadow="true">
  31. 底部
  32. </div>
  33. <div>
  34. 这里放中间内容
  35. </div>
  36. </rx-fit>
  37. //注意:外面控制弹窗显示的“过滤”按钮点击事件要加 stop (@click.stop);
  38. //具体可以参照:jpaas-web\jpaas-commons\src\components\controlexample\rxfitdemo.vue
  39. import { RxFit } from 'jpaas-common-lib';
  40. export default{
  41. components: {
  42. RxFit
  43. },
  44. data(){
  45. return {
  46. fitSearch:false,
  47. isheader=false,
  48. colSpan:24,
  49. colLayout:'vertical'
  50. }
  51. },
  52. created(){
  53. this.initRxFit();
  54. },
  55. methods:{
  56. initRxFit(){
  57. //初始化rx-fit模板 advanced属性是在搜索条件多的时候,头部需要折叠的时候配置的;
  58. this.colLayout = this.isheader ? 'inline':'vertical' ;
  59. this.colSpan = this.isheader ? 8:24 ;
  60. this.advanced = this.isheader ? false : true ;
  61. this.fitSearch = this.isheader ? true :false ;
  62. },
  63. search(){
  64. //搜索按钮触发
  65. },
  66. cancel(){
  67. //重置按钮触发
  68. },
  69. searchshow(){
  70. this.fitSearch = !this.fitSearch ;
  71. },
  72. close(){
  73. this.fitSearch = false ;
  74. }
  75. }
  76. }
文档更新时间: 2021-08-17 09:21   作者:yangxing