SearchBar 搜索栏请使用手机扫码体验

基本用法

html
<nut-searchbar
    placeText="请输入自定义文案"
></nut-searchbar>

右侧搜索按钮可根据需要进行配置

html
<nut-searchbar
    placeText="请输入自定义文案"
    :hasSearchButton="false"
></nut-searchbar>

可配置输入框前面是否显示搜索图标、右侧是否显示文字按钮、显示文字、自定义 class

html
<nut-searchbar
    placeText="ERP/姓名/邮箱"
    :hasIcon="true"
    :hasTextButton="true"
    textInfo="取消"
    customClass="search_demo"
></nut-searchbar>

事件

html
<nut-searchbar
    placeText="请输入自定义文案"
    @focus="focusFun"
    @input="inputFun"
    @blur="blurFun"
    @submit="submitFun"
></nut-searchbar>

输入、失去焦点、提交事件都会返回当前输入值

javascript
export default {
    data() {
        return {
        }
    },
    methods:{
        focusFun() {
            console.log('获取焦点操作！');
        },
        inputFun(value) {
            console.log(value);
            console.log('您正在输入...');
        },
        blurFun(value) {
            console.log(value);
            console.log('您已失去焦点！');
        },
        submitFun(value) {
            console.log(value);
            console.log('默认提交操作！');
        }
    }
}

Prop

Event