SearchBox | vfluent3

Standard

Disabled

vue

Standard
<fv-SearchBox icon="Search" placeholder="Search" :options="items"></fv-SearchBox>

Disabled
<fv-SearchBox icon="Search" placeholder="Search" :options="items" disabled></fv-SearchBox>

vue

<fv-SearchBox placeholder="Please enter the text here." icon="Search" :options="items" :revealBorder="true" borderColor="rgba(0, 0, 0, 0.01)" borderRadius="3" :isBoxShadow="true"></fv-SearchBox>

vue

<div>
    <fv-SearchBox v-model="value" icon="Search" placeholder="Search" :options="custom_items" :focusShow="true" :customFilter="customFilterFunc" :resultPlaceholder.sync="resultPlaceholder">
        <template v-slot:resultPlaceholder="x">
            <fv-img v-for="(item, index) in resultPlaceholder" :key="index" :src="item" style="width: 25px; height: 25px; margin: 0px 3px; border-radius: 50%;"/>
        </template>
        <template v-slot:searchResult="x">
            <div style="position: relative; width: 100%; height: auto; display: flex; flex-direction: column;">
                <span class="list-item list-title">人物</span>
                <div style="position: relative; width: 100%; height: 60px; display: flex;">
                    <fv-img v-for="(item, index) in x.data.people" :key="index" :src="item" style="width: 50px; height: 50px; margin: 5px; border-radius: 50%;" @click.native="resultPlaceholder.push(item)"/>
                </div>
                <span class="list-item list-title">位置</span>
                <span>
                    <p v-for="(item, index) in x.data.pos" class="list-item" :key="index">{{item}}</p>
                </span>
                <span class="list-item list-title">职业</span>
                <span>
                    <p v-for="(item, index) in x.data.pro" class="list-item" :key="index">{{item}}</p>
                </span>
            </div>
        </template>
    </fv-SearchBox>
</div>

TextBox-With Underline And Borderless

Light

Dark

Underline with Reveal

vue

1. Light

<fv-SearchBox icon="Search" placeholder="Search" :options="items" underline></fv-SearchBox>

2. Dark

<fv-SearchBox icon="Search" placeholder="Search" theme="dark" :options="items" underline></fv-SearchBox>

3. Underline with Reveal

<fv-SearchBox icon="Search" placeholder="Search" :options="items" :revealBorder="true" underline></fv-SearchBox>

Original Template

Custom Template

vue

1. Original Template

<div style="width: 100%; padding: 25px; background: black;">
    <fv-SearchBox icon="Search" placeholder="Search" theme="dark" :options="items"></fv-SearchBox>
</div>

Custom Template

vue

<div style="width: 100%; padding: 25px; background: black;">
    <fv-SearchBox v-model="value" icon="Search" placeholder="Search" theme="dark" :options="custom_items" :focusShow="true" :customFilter="customFilterFunc" :resultPlaceholder.sync="resultPlaceholder">
        <template v-slot:resultPlaceholder="x">
            <fv-img v-for="(item, index) in resultPlaceholder" :key="index" :src="item" style="width: 25px; height: 25px; margin: 0px 3px; border-radius: 50%;"/>
        </template>
        <template v-slot:searchResult="x">
            <div style="position: relative; width: 100%; height: auto; display: flex; flex-direction: column;">
                <span class="list-item list-title">人物</span>
                <div style="position: relative; width: 100%; height: 60px; display: flex;">
                    <fv-img v-for="(item, index) in x.data.people" :key="index" :src="item" style="width: 50px; height: 50px; margin: 5px; border-radius: 50%;" @click.native="resultPlaceholder.push(item)"/>
                </div>
                <span class="list-item list-title">位置</span>
                <span>
                    <p v-for="(item, index) in x.data.pos" class="list-item" :key="index">{{item}}</p>
                </span>
                <span class="list-item list-title">职业</span>
                <span>
                    <p v-for="(item, index) in x.data.pro" class="list-item" :key="index">{{item}}</p>
                </span>
            </div>
        </template>
    </fv-SearchBox>
</div>

TextBox-Customize

Customize border color

Customize background

vue

Customize border color
<div style="width: 100%; padding: 25px; background: black;">
    <fv-SearchBox icon="Search" placeholder="Search" theme="dark" :options="items" borderColor="rgba(0,153,204,1)" focusBorderColor="rgba(0,204,153,1)"></fv-SearchBox>
</div>

Customize background
<div style="width: 100%; padding: 25px; background: black;">
    <fv-SearchBox icon="Search" placeholder="Search" theme="dark" :options="items" background="rgba(0,153,204,1)" borderColor="rgba(0,153,204,1)"></fv-SearchBox>
</div>

属性

属性	类型	必填	默认值	说明
modelValue	string	否	''	Using v-model binding input value
options	array	否	[]	SearchBox搜索候选数据。
placeholder	string	否	''	等同于原生 HTML input 属性。
type	string	否	'text'	等同于原生 HTML input 属性。
readonly	boolean	否	false	等同于原生 HTML input 属性。
maxlength	string	否	''	等同于原生 HTML input 属性。
customFilter	boolean	否	false	客制化搜索筛选函数。
resultPlaceholder	boolean	否	false	结果占位数据，显示在SearchBox左端。
focusShow	boolean	否	false	是否开启获取焦点时显示结果框。
leftIcon	string	否	''	左图标。
icon	string	否	''	右图标。
underline	boolean	否	false	是否开启Underline风格的SearchBox
background	string	否	''	背景色。
borderWidth	number	否	1
borderColor	string	否	''
focusBorderColor	string	否	''
fontSize	number	否	13.3
fontWeight	string	否	'normal'
foreground	string	否	''
textAlign	string	否	'left'
borderRadius	number	否	3	Textbox圆角大小，启用revealBorder时将失效。
revealBorder	boolean	否	false
status	string	否	''	状态边框预设，默认有警告和正确两种。
debounceDelay	number	否	300	搜索节流延迟时间。
disabled	boolean	否	false
theme	string	否	'global'	主题样式。支持 `global`、`light`、`dark`、`system` 和 `custom`。
isBoxShadow	boolean	否	false	参见组件的 `isBoxShadow` 选项。
lang	string	否	"global"	参见组件的 `lang` 选项。

事件

事件名	参数	说明
keydown	event
keyup	event
change	event
paste	event
left-icon-click	event
icon-click	event
lazyload	array	搜索结果框滚动加载事件，滑动到最底部时触发，返回当前搜索筛选数据。
update:resultPlaceholder	array	更新搜索占位数组，在清除搜索框时触发清除搜索占位数组，再按下退格键时若文本为空，清除最后一个搜索占位数据项。
clear-click	array	清除搜索框文本时触发。
choose-result	object	搜索结果框选中项目后返回当前项。
debounce-input	string	搜索节流内容反馈。

插槽

SearchResult

默认情况下用户可直接在options中定义name来应用默认样式, 不需要修改此模板, 可缺省用户自定义样式时, 包含以下可选属性

data: 传入的filterOptions
chooseResult: 用于回调的选择出发函数, 需要传入一个对象, 包含item和item.name属性

vue

 <template v-slot:searchResult="x">
    <fv-list-view v-model="x.data" :theme="theme" style="width: 100%; height: auto;" @chooseItem="x.chooseResult"></fv-list-view>
</template>

ResultPlaceholder

用户根据自己的需要在搜索框选择结果后将值显示在SearchBox左侧显示相应数据, 数据模板即为ResultPlaceholder

vue

<template v-slot:resultPlaceholder="x">
    <div></div>
</template>

Data

options

数据格式参考ListView中items的形式, 其中key字段建议开发者在有重复名称和类型字段时声明用来区别项目

javascript

options = [{key: '', name: '', type: '', disabled: ''}]

//e.g.//

options: [
    { key: "fruitsHeader", name: "Fruits", type: "header" },
    { key: "apple", name: "Apple" },
    { key: "banana", name: "Banana" },
    { key: "orange", name: "Orange", disabled: true },
    { key: "grape", name: "Grape" },
    { key: "divider_1", name: "", type: "divider" },
    { key: "vegetablesHeader", name: "Vegetables", type: "header" },
    { key: "broccoli", name: "Broccoli" },
    { key: "carrot", name: "Carrot" },
    { key: "lettuce", name: "Lettuce" }
]

SearchBox-DEMO ​

SearchBox-RevealBorder ​

SearchBox-Custom Search Result ​

TextBox-With Underline And Borderless ​

SearchBox-Dark Theme ​

TextBox-Customize ​

属性 ​

事件 ​

插槽 ​

Data ​

SearchBox-DEMO

SearchBox-RevealBorder

SearchBox-Custom Search Result

TextBox-With Underline And Borderless

SearchBox-Dark Theme

TextBox-Customize

属性

事件

插槽

Data