# gg-search 搜索
gg-search
搜索
在 script
中引用组件
若使用uni-app的
easycom
引入方式,则无需在script
中重复引用
import ggSearch from '@/components/gg-search/gg-search.vue'
export default {
components: {ggSearch},
}
1
2
3
4
2
3
4
在 template
中使用组件
<gg-search v-model="formData.name" @search="onSearch">
<!-- 左侧预留内容插槽 -->
</gg-search>
1
2
3
2
3
script
export default {
data() {
return {
formData: {
name: ""
}
};
},
methods() {
/* 监听点击搜索按钮并获取搜索框内容 */
onSearch (e) {
console.log('搜索框内容:'+e);
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
v-model | String | - | 双向绑定输入框数据 |
placeholder | String | - | 占位符内容 |
onSearch | Function | - | 点击搜索触发事件 |
disableRealTime | Boolean | false | 是否禁止实时更新v-model |
# 事件说明
事件名 | 事件说明 | 返回参数 |
---|---|---|
search | 点击搜索 触发事件 | 输入框内容 |