SearchBar 搜索栏

依赖 Icon 组件

基本用法

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

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

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

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

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

事件

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

获取焦点与失去焦点

注：由于移动设备的不同，第一次自动获取焦点并不一定能吊起键盘，需要手动吊起来一次，当再次进入时则正常吊起键盘

<nut-searchbar
    v-model="val"
    placeText="请输入自定义文案"
    @submit="search"
    @focus="focusFun"
    ref="myInput"
></nut-searchbar>

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

export default {
    data() {
        return {
            val:''
        }
    },
    mounted(){
        //设置获取焦点
        this.$nextTick(function() {
            this.$refs.myInput.focus()
        })
    },
    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('默认提交操作！');
        },
        search(value) {
            //点击键盘中的’搜索‘时，失去焦点
            this.$refs.myInput.blur()
            console.log('搜索')
        }
    }
}

Prop

Event