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

Searchbar\u7EC4\u4EF6

\u4ECB\u7ECD

\u641C\u7D22\u680F

\u5B89\u88C5

import { createApp, reactive, toRefs } from 'vue';

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


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

\u57FA\u7840\u7528\u6CD5

<nut-searchbar class="wrap" v-model="searchValue" @search="search">
    <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>

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

    const search = function () {
      console.log('ENTER clicked');
    }

    const clickLeft = function () {
      console.log('left clicked');
    }

    return {
      clickLeft,
      search,
      ...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
has-left-in	\u662F\u5426\u5C55\u793A\u8F93\u5165\u6846\u5185 \u5DE6icon	Boolean	true
has-left-out	\u662F\u5426\u5C55\u793A\u8F93\u5165\u6846\u5916 \u5DE6icon	Boolean	true
has-right-in	\u662F\u5426\u5C55\u793A\u8F93\u5165\u6846\u5185 \u53F3icon	Boolean	true
has-right-out	\u662F\u5426\u5C55\u793A\u8F93\u5165\u6846\u5916 \u53F3icon	Boolean	true

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

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