# 组件名`cap4-search`

# 引入

import Cap4Search from 'cap4-pc-ui/lib/cap4-search';
import 'cap4-pc-ui/lib/cap4-search/css/cap4-search.css';

# 基础用法

/**/

export default {
data() {
return {
float: 'none',
showSelect: true,
width: 300,
list: [
{
value: 1,
display: '北京'
},
{
value: 2,
display: '上海'
},
{
value: 3,
display: '广州'
}
],
};
},
methods: {
search(value) {
console.log('value', value);
}
}
};
/**/::: demo

<template>
    <div class="demo-block">
        <cap4-search :float="float" @search="search"></cap4-search>
    </div>
</template>

<script>
export default {
    data() {
        return {
            float: 'none',
        };
    },
    methods: {
        search(value) {
            console.log('value', value);
        }
    }
};
</script>

:::

# 带下拉

::: demo

<template>
    <div class="demo-block">
        <cap4-search :float="float" @search="search" :showSelect="showSelect" :list="list" :width="width"></cap4-search>
    </div>
</template>

<script>
export default {
    data() {
        return {
            float: 'none',
            showSelect: true,
            width: 300,
            list: [
                {
                    value: 1,
                    display: '北京'
                },
                {
                    value: 2,
                    display: '上海'
                },
                {
                    value: 3,
                    display: '广州'
                }
            ],
        };
    },
    methods: {
        search(value) {
            console.log('value', value);
        }
    }
};
</script>

:::

# Attributes

参数	说明	类型	可选值	默认值
value	参数 (选填))	String	—	—
width	参数 (选填))	[String, Number]	—	200
height	参数 (选填))	[String, Number]	—	30
fontSize	参数 (选填))	[String, Number]	—	14
noBorder	参数 (选填))	Boolean	—	false
showSelect	参数 (选填))	Boolean	—	false
list	参数 (选填))	Array	—	—
placeholder	参数 (选填))	String	—	$i18n('cap.common.lbsMapUi.searchPlace')
float	参数 (选填))	String	—	'right'