SearchBar

搜索栏。

示例

默认用法

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

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

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

可配置输入框前面是否显示搜索图标（图标可配置）、输入框高度、右侧是否显示文字按钮以及文字按钮宽度、显示文字、文字颜色

<nut-searchbar
  placeText="ERP/姓名/邮箱"
  :hasIcon="true"
  :hasTextButton="true"
  textInfo="搜索"
  width="1"
  height="1"
  color="#f23030"
></nut-searchbar>

可配置获取输入框焦点事件、输入事件、失去焦点事件、默认提交事件

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

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

Props

Events