@zhangqingcq/plug-r-qw/src/components/tableSearch/README.md

A JS lib base on Vue and View-design, you can achieve some complex functions with simple code after install this lib.

## tableSearch

带高级查询按钮的快捷搜索组件，v-model 绑定搜索框的值，高级查询按钮控制是否展开高级查询组件（showHidePanelB+searchForm），全局 UI 组件，直接用

### 属性

- value: 字符串，搜索框的值，推荐用*v-model* 绑定。

- open: 布尔对象，高级搜索是否开启，必填，默认：`false`

- showBtn: 布尔对象，是否显示高级搜索按钮，默认：`true`

- fixed: 布尔对象，是否为固定定位，默认绝对定位，默认：`false`

- top: 字符串，组件定位-上（相对于最近一个 relative 元素），如：`top='5px'`，默认：'0'

- right: 字符串，组件定位-右（相对于最近一个 relative 元素），默认：'0'

- width: 字符串，组件输入框宽度，默认：`210px`

- placeholder: 字符串，占位符，默认：`请输入`

- btnColor: 字符串，高级搜索按钮和箭头的颜色，默认：`inherit`

### 事件

- on-toggle 高级搜索是否开启状态切换，高级搜索按钮被点击时触发

- on-search 搜索事件，搜索框内按回车键或者点击搜索框放大镜图标触发

### 注意

- 组件支持插槽，要插入的内容放在标签内，因为一般是用来收集值进行 search 的，所以当使用插槽进行自定义时，自己在外面进行取值和查询的逻辑

- 为了实时响应外界输入的开关状态，组件内部不对状态进行操作，需要用户通过 open 属性传递给组件；例如在高级搜索按钮被点击后，用户需要监听 on-toggle 事件，改变 open 属性绑定的值（可以用事件传递的值），形成闭环；用户也可操作 open 属性绑定的值主动切换组件高级查询的状态（在不点击高级查询按钮的情况下让箭头改变）