import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Searchbar \u641C\u7D22\u680F

\u4ECB\u7ECD

\u641C\u7D22\u680F

\u5B89\u88C5

import { createApp } from 'vue';

// vue
import { SearchBar, Icon } from '@nutui/nutui';
// taro
import { SearchBar, Icon } from '@nutui/nutui-taro';

const app = createApp();
app.use(SearchBar).use(Icon);

\u57FA\u7840\u7528\u6CD5

  <nut-searchbar v-model="searchValue"></nut-searchbar>

import { toRefs, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      searchValue: ""
    });

    return {
      ...toRefs(state),
    };
  }
}

\u641C\u7D22\u4E8B\u4EF6\u76D1\u542C

<nut-searchbar v-model="searchValue" @search="search"></nut-searchbar>

import { toRefs, reactive } from 'vue';
import { Toast } from '@nutui/nutui';

export default {
  setup() {
    const state = reactive({
      searchValue: ""
    });

    const search = function () {
      Toast.text('\u641C\u7D22\u89E6\u53D1');
    };

    return {
      ...toRefs(state),
      search,
    };
  }
}

\u663E\u793A\u641C\u7D22 icon

<nut-searchbar v-model="searchValue">
  <template v-slot:leftin>
    <nut-icon size="14" name="search2"></nut-icon>
  </template>
</nut-searchbar>

import { toRefs, reactive } from 'vue';
import { Icon } from '@nutui/nutui';

export default {
  setup() {
    const state = reactive({
      searchValue: ""
    });

    return {
      ...toRefs(state),
    };
  }
}

\u53F3\u4FA7\u6DFB\u52A0\u641C\u7D22\u6587\u5B57

<nut-searchbar v-model="searchValue">
  <template v-slot:rightout>
    \u641C\u7D22
  </template>
</nut-searchbar>

import { toRefs, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      searchValue: ""
    });

    return {
      ...toRefs(state),
    };
  }
}

<h2>\u66F4\u6539\u8F93\u5165\u6846\u5185\u90E8\u53CA\u5916\u90E8\u7684\u80CC\u666F\u6837\u5F0F</h2>

\u66F4\u6539\u8F93\u5165\u6846\u5185\u90E8\u53CA\u5916\u90E8\u7684\u80CC\u666F\u6837\u5F0F

<nut-searchbar v-model="searchValue4" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff"> </nut-searchbar>

import { toRefs, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      searchValue: ""
    });

    return {
      ...toRefs(state),
    };
  }
}

\u663E\u793A\u5168\u90E8 icon

<nut-searchbar v-model="searchValue">
  <template v-slot:leftout>
    <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
  </template>
  <template v-slot:leftin>
    <nut-icon size="14" name="search2"></nut-icon>
  </template>
  <template v-slot:rightin>
    <nut-icon size="20" name="photograph"></nut-icon>
  </template>
  <template v-slot:rightout>
    <nut-icon size="20" name="message"></nut-icon>
  </template>
</nut-searchbar>

import { toRefs, reactive } from 'vue';
import { Icon } from '@nutui/nutui';

export default {
  setup() {
    const state = reactive({
      searchValue: ""
    });

    return {
      ...toRefs(state),
    };
  }
}

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
max-length	\u6700\u5927\u8F93\u5165\u957F\u5EA6	[Number,String]	\u20189999\u2019
input-type	\u8F93\u5165\u6846\u7C7B\u578B	String	\u2018text\u2019
placeholder	\u8F93\u5165\u6846\u9ED8\u8BA4\u6697\u7EB9	String	\u2018\u8BF7\u8F93\u5165\u2019
clearable	\u662F\u5426\u5C55\u793A\u6E05\u9664\u6309\u94AE	Boolean	true
background	\u8F93\u5165\u6846\u5916\u90E8\u80CC\u666F	String	\u2018#fff\u2019
input-background	\u8F93\u5165\u6846\u5185\u90E8\u80CC\u666F	String	\u2018#f7f7f7\u2019

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1	val, event
focus	\u805A\u7126\u65F6\u89E6\u53D1	val, event
blur	\u5931\u7126\u65F6\u89E6\u53D1	val, event
clear	\u70B9\u51FB\u6E05\u7A7A\u65F6\u89E6\u53D1	val
search	\u6309\u4E0B ENTER \u952E\u65F6\u89E6\u53D1	val, event

Slots

\u540D\u79F0	\u8BF4\u660E
leftin	\u8F93\u5165\u6846\u5185 \u5DE6icon
leftout	\u8F93\u5165\u6846\u5916 \u5DE6icon
rightin	\u8F93\u5165\u6846\u5185 \u53F3icon
rightout	\u8F93\u5165\u6846\u5916 \u53F3icon

`,30),e=[p],d={setup(c,{expose:s}){return s({frontmatter:{}}),(h,o)=>(n(),a("div",l,e))}};export{d as default};