UV-UI基本使用
html
<uv-search placeholder="请输入内容" />修改背景色
通过 bgColor 设置
html
<uv-search bg-color="#4fc08d" />修改搜索框的背景色
通过 searchBgColor 设置
html
<uv-search bg-color="#f6f7f9" search-bg-color="#fff" />搜索框圆角
通过 round 设置
html
<uv-search round />是否禁用
通过 disabled 设置
html
<uv-search disabled />搜索框内容对齐
通过 inputAlign 设置,默认为 left,可选 center right
html
<uv-search input-align="center" />显示可清除图标
通过 clearable 设置
html
<uv-search v-model="value" clearable />props
| 属性 | 含义 | 类型 | 默认值 |
|---|---|---|---|
| modelValue | 双向绑定的内容 | String | - |
| placeholder | 默认值 | String | '请输入' |
| clearable | 是否可清除 | Boolean | false |
| round | 是否圆角 | Boolean | false |
| disabled | 是否禁用 | Boolean | false |
| inputAlign | 输入框文字位置，可选'left' 'center' 'right' | String | 'left' |
| bgColor | 背景颜色 | String | '#fff' |
| searchBgColor | 搜索框的背景颜色 | String | '#f7f8fa' |
events
| 事件名称 | 含义 | 参数 |
|---|---|---|
| clear | 清除内容时触发 | - |
| focus | 聚焦时 | - |
| blur | 失去焦点时 | 当前绑定的值 |
css 变量
css
--uv-search-padding: 10px;
--uv-search-content-padding: 2px 10px;
--uv-search-content-border-radius: 4px;
--uv-search-input-placeholder-color: #d3c9d6;
--uv-search-input-padding: 8px;
--uv-search-input-font-size: 14px;
--uv-search-input-border-radius: 4px;
--uv-search-input-disabled-color: #d3c9d6;
--uv-search-content-round-border-radius: 40px;