目录
1. 标签
1.1 插槽
2. vue配置项
2.1 data
2.2 props
2.3 watch
2.4 methods
3.完整代码
1. 标签
1.1 插槽
在父组件中用如下模板替代对应的(<slot>标签里的内容)插槽内容(通过v-slot与name属性匹配)，如果父组件不提供slot内容，则会使用子组件的默认内容：
<template v-slot:子组件插槽name属性值>
<!--替代内容-->
<template>
uni-search-bar中有两个插槽用来替换搜索图标和清除图标
①父组件没有slot内容时，使用子组件默认内容
默认图标如下：
左边为搜索图标，右边为清除图标
<!--子组件-->
<!--搜索图标-->
<slot name="searchIcon">
<!--uni-icons为uniapp图标库标签（需下载），更改type换图标-->
<uni-icons color="#c0c4cc" size="18" type="search" />
</slot>
<!--清除图标-->
<slot name="clearIcon">
<uni-icons color="#c0c4cc" size="20" type="clear" />
</slot>
②父组件有slot内容后，template标签内的内容替换子组件slot标签内内容
替换图标如下（搜索图标替换成眼睛图标，清除图标替换成房子图标）：
<!--父组件-->
<uni-search-bar @confirm="" @input="" bgColor="#fff" radius="17" placeholder="低热量">
<template v-slot:searchIcon>
<uni-icons color="#c0c4cc" size="18" type="eye" />
</template>
<template v-slot:clearIcon>
<uni-icons color="#c0c4cc" size="18" type="home" />
</template>
</uni-search-bar>
2. vue配置项
2.1 data
data() {
return {
show: false, // input是否显示
showSync: false, // input是否获得焦点
searchVal: '' // input输入值
}
},
2.2 props
从父组件收到的数据放入props配置项中，即该组件可自定义的属性，如下：
placeholder —— 输入框未输入时的占位字符，默认为"请输入内容"
radius —— 搜索框圆角半径，默认值为5(px)
clearButton —— 清除按钮是否存在，默认值为"auto"，输入框为空时不显示，
还有"always"，"none"可选
cancelButton —— 取消按钮是否存在，默认值为"auto"，输入框为空时不显示，
还有"always"，"none"可选
cancelText —— 取消按钮文本，默认值为"取消"
bgColor —— 搜索框背景颜色，默认为"#F8F8F8"
maxlength —— 可输入最大长度，默认值为100(px)
value —— 从父组件v-model收到的值，默认为""(vue3改为modelValue)
focus —— input是否自动聚焦，默认值为false
①当父组件不定义属性时，默认如下：
文章来源：https://www.toymoban.com/news/detail-474108.html
props: {
placeholder: {
type: String,
default: "请输入内容"
},文章来源地址https://www.toymoban.com/news/detail-474108.html
到了这里，关于uni-ui的uni-search-bar 搜索栏代码解析(vue2)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
