/*! For license information please see 7062.b117f2a1.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["7062"],{51673:function(n,s,t){"use strict";t.r(s);var a=t("80681");let d=["innerHTML"];s.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Search \u641C\u7D22

\n

\u4ECB\u7ECD

\n

\u7528\u4E8E\u641C\u7D22\u573A\u666F\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\u3002

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

\n
import { createApp } from 'vue';\nimport { Search } from 'vant';\n\nconst app = createApp();\napp.use(Search);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

v-model \u7528\u4E8E\u63A7\u5236\u641C\u7D22\u6846\u4E2D\u7684\u6587\u5B57\uFF0Cbackground \u53EF\u4EE5\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u5916\u90E8\u80CC\u666F\u8272\u3002

\n
<van-search v-model="value" placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('');\n    return { value };\n  },\n};\n
\n

\u4E8B\u4EF6\u76D1\u542C

\n

Search \u7EC4\u4EF6\u63D0\u4F9B\u4E86 search \u548C cancel \u4E8B\u4EF6\uFF0Csearch \u4E8B\u4EF6\u5728\u70B9\u51FB\u952E\u76D8\u4E0A\u7684\u641C\u7D22/\u56DE\u8F66\u6309\u94AE\u540E\u89E6\u53D1\uFF0Ccancel \u4E8B\u4EF6\u5728\u70B9\u51FB\u641C\u7D22\u6846\u53F3\u4FA7\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u3002

\n
<form action="/">\n  <van-search\n    v-model="value"\n    show-action\n    placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n    @search="onSearch"\n    @cancel="onCancel"\n  />\n</form>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const value = ref('');\n    const onSearch = (val) => showToast(val);\n    const onCancel = () => showToast('\u53D6\u6D88');\n    return {\n      value,\n      onSearch,\n      onCancel,\n    };\n  },\n};\n
\n
\n

Tips: \u5728 van-search \u5916\u5C42\u589E\u52A0 form \u6807\u7B7E\uFF0C\u4E14 action \u4E0D\u4E3A\u7A7A\uFF0C\u5373\u53EF\u5728 iOS \u8F93\u5165\u6CD5\u4E2D\u663E\u793A\u641C\u7D22\u6309\u94AE\u3002

\n
\n

\u641C\u7D22\u6846\u5185\u5BB9\u5BF9\u9F50

\n

\u901A\u8FC7 input-align \u5C5E\u6027\u8BBE\u7F6E\u641C\u7D22\u6846\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center\u3001right\u3002

\n
<van-search\n  v-model="value"\n  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n  input-align="center"\n/>\n
\n

\u7981\u7528\u641C\u7D22\u6846

\n

\u901A\u8FC7 disabled \u5C5E\u6027\u7981\u7528\u641C\u7D22\u6846\u3002

\n
<van-search v-model="value" disabled placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD" />\n
\n

\u81EA\u5B9A\u4E49\u80CC\u666F\u8272

\n

\u901A\u8FC7 background \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5916\u90E8\u7684\u80CC\u666F\u8272\uFF0C\u901A\u8FC7 shape \u5C5E\u6027\u8BBE\u7F6E\u641C\u7D22\u6846\u7684\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A round\u3002

\n
<van-search\n  v-model="value"\n  shape="round"\n  background="#4fc08d"\n  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n/>\n
\n

\u81EA\u5B9A\u4E49\u6309\u94AE

\n

\u4F7F\u7528 action \u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\u7684\u5185\u5BB9\u3002\u4F7F\u7528\u63D2\u69FD\u540E\uFF0Ccancel \u4E8B\u4EF6\u5C06\u4E0D\u518D\u89E6\u53D1\u3002

\n
<van-search\n  v-model="value"\n  show-action\n  label="\u5730\u5740"\n  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n  @search="onSearch"\n>\n  <template #action>\n    <div @click="onClickButton">\u641C\u7D22</div>\n  </template>\n</van-search>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const value = ref('');\n    const onSearch = (val) => showToast(val);\n    const onClickButton = () => showToast(value.value);\n    return {\n      value,\n      onSearch,\n      onClickButton,\n    };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model\u5F53\u524D\u8F93\u5165\u7684\u503Cnumber | string-
label\u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672Cstring-
name\u540D\u79F0\uFF0C\u4F5C\u4E3A\u63D0\u4EA4\u8868\u5355\u65F6\u7684\u6807\u8BC6\u7B26string-
shape\u641C\u7D22\u6846\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A roundstringsquare
id\u641C\u7D22\u6846 id\uFF0C\u540C\u65F6\u4F1A\u8BBE\u7F6E label \u7684 for \u5C5E\u6027stringvan-search-n-input
background\u641C\u7D22\u6846\u5916\u90E8\u80CC\u666F\u8272string#f2f2f2
maxlength\u8F93\u5165\u7684\u6700\u5927\u5B57\u7B26\u6570number | string-
placeholder\u5360\u4F4D\u63D0\u793A\u6587\u5B57string-
clearable\u662F\u5426\u542F\u7528\u6E05\u9664\u56FE\u6807\uFF0C\u70B9\u51FB\u6E05\u9664\u56FE\u6807\u540E\u4F1A\u6E05\u7A7A\u8F93\u5165\u6846booleantrue
clear-icon\u6E05\u9664\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027stringclear
clear-trigger\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0Calways \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0C
focus \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A		stringfocus
autofocus\u662F\u5426\u81EA\u52A8\u805A\u7126\uFF0CiOS \u7CFB\u7EDF\u4E0D\u652F\u6301\u8BE5\u5C5E\u6027booleanfalse
show-action\u662F\u5426\u5728\u641C\u7D22\u6846\u53F3\u4FA7\u663E\u793A\u53D6\u6D88\u6309\u94AEbooleanfalse
action-text\u53D6\u6D88\u6309\u94AE\u6587\u5B57string\u53D6\u6D88
disabled\u662F\u5426\u7981\u7528\u8F93\u5165\u6846booleanfalse
readonly\u662F\u5426\u5C06\u8F93\u5165\u6846\u8BBE\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u65E0\u6CD5\u8F93\u5165\u5185\u5BB9booleanfalse
error\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2booleanfalse
error-message\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u5C55\u793Astring-
formatter\u8F93\u5165\u5185\u5BB9\u683C\u5F0F\u5316\u51FD\u6570(val: string) => string-
format-trigger\u683C\u5F0F\u5316\u51FD\u6570\u89E6\u53D1\u7684\u65F6\u673A\uFF0C\u53EF\u9009\u503C\u4E3A onBlurstringonChange
input-align\u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center rightstringleft
left-icon\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027stringsearch
right-icon\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027string-
autocompleteinput \u6807\u7B7E\u539F\u751F\u7684\u81EA\u52A8\u5B8C\u6210\u5C5E\u6027string-
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
search\u786E\u5B9A\u641C\u7D22\u65F6\u89E6\u53D1value: string (\u5F53\u524D\u8F93\u5165\u7684\u503C)
update:model-value\u8F93\u5165\u6846\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1value: string (\u5F53\u524D\u8F93\u5165\u7684\u503C)
focus\u8F93\u5165\u6846\u83B7\u5F97\u7126\u70B9\u65F6\u89E6\u53D1event: Event
blur\u8F93\u5165\u6846\u5931\u53BB\u7126\u70B9\u65F6\u89E6\u53D1event: Event
click-input\u70B9\u51FB\u8F93\u5165\u533A\u57DF\u65F6\u89E6\u53D1event: MouseEvent
click-left-icon\u70B9\u51FB\u5DE6\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1event: MouseEvent
click-right-icon 3.4.0\u70B9\u51FB\u53F3\u4FA7\u56FE\u6807\u65F6\u89E6\u53D1event: MouseEvent
clear\u70B9\u51FB\u6E05\u9664\u6309\u94AE\u540E\u89E6\u53D1event: MouseEvent
cancel\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1-
\n

\u65B9\u6CD5

\n

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Search \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
focus\u83B7\u53D6\u8F93\u5165\u6846\u7126\u70B9--
blur\u53D6\u6D88\u8F93\u5165\u6846\u7126\u70B9--
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

\n
import type { SearchProps, SearchShape, SearchInstance } from 'vant';\n
\n

SearchInstance \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A

\n
import { ref } from 'vue';\nimport type { SearchInstance } from 'vant';\n\nconst searchRef = ref<SearchInstance>();\n\nsearchRef.value?.focus();\n
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u8BF4\u660E
left\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u5185\u5BB9\uFF08\u641C\u7D22\u6846\u5916\uFF09
action\u81EA\u5B9A\u4E49\u53F3\u4FA7\u5185\u5BB9\uFF08\u641C\u7D22\u6846\u5916\uFF09\uFF0C\u8BBE\u7F6E show-action \u5C5E\u6027\u540E\u5C55\u793A
label\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6587\u672C\uFF08\u641C\u7D22\u6846\u5185\uFF09
left-icon\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807\uFF08\u641C\u7D22\u6846\u5185\uFF09
right-icon\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807\uFF08\u641C\u7D22\u6846\u5185\uFF09
\n

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-search-padding10px var(--van-padding-sm)-
--van-search-backgroundvar(--van-background-2)-
--van-search-content-backgroundvar(--van-gray-1)-
--van-search-input-height34px-
--van-search-label-padding0 5px-
--van-search-label-colorvar(--van-text-color)-
--van-search-label-font-sizevar(--van-font-size-md)-
--van-search-left-icon-colorvar(--van-gray-6)-
--van-search-action-padding0 var(--van-padding-xs)-
--van-search-action-text-colorvar(--van-text-color)-
--van-search-action-font-sizevar(--van-font-size-md)-
\n

\u5E38\u89C1\u95EE\u9898

\n

\u5728\u684C\u9762\u7AEF\u70B9\u51FB\u6E05\u9664\u6309\u94AE\u65E0\u6548\uFF1F

\n

\u6E05\u9664\u6309\u94AE\u76D1\u542C\u662F\u7684\u79FB\u52A8\u7AEF Touch \u4E8B\u4EF6\uFF0C\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002

\n
'},null,8,d))}}}]);