Wh-search-group NPM

my-search-group

ui component for vue base elementui

#  clone
git clone git@github.com:stack-wuh/my-search-group.git

cd example

npm install 

npm run dev

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

import mySearch from 'wh-search-group'

Vue.use(mySearch)

<div class="b-wrap">
  <MySearchGroup></MySearchGroup>
</div>

参数	说明	类型	默认值
v-model	绑定一个表单对象	Object	none
list	迭代SearchItem的数组	Array	[]

参数	说明	默认值
label	展示Item的label文本	none
type	说渲染的Item的类型	normal, input
field	绑定表单的字段名	none
list	若type为select, 则是Select下拉框的列表; 若type为button, 则为button列表	none

参数	说明	类型	默认值
type	元素的类型值	String	input, normal, default
label	元素的标题	String	none
props	下级表单元素对应绑定的key值	String	none
s-list	如果下级子元素的type为select时所迭代的列表	Array	[]
s-key	自定义列表的key值	String	label
s-value	自定义列表的value值	String	value
v-model	绑定一个表单对象	Object	none

name	说明
input, nromal, default	type的默认值, 默认展示input输入框
select	类型设置为select下拉框

name	type	传递事件名
search	确认搜索	search
reset	重置事件	reset

更新提示: button区域独立为slot插槽, 不再使用json配置文件生成

name	说明
button	自定义的button区域

参数	说明	默认值
label	option的label属性	label, 可通过sKey属性自定义
value	option的value属性	value, 可通过sValueu属性自定义

可搭配使用, 也可以单独使用

参数	说明	类型	默认值
list	button迭代的数组	Array	{text: 'search', ref: 'search' }, { text: 'reset', ref: 'reset' }
_id	按钮的隐藏Id	Number, String	none
text	按钮的Text文本	String	none
color	按钮的色彩	String	default
backgroundColor	按钮的背景色	default
align	按钮在flex布局下主轴的对齐	String	left
options	Element中Button组件的属性	Object	default