Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: 7ca4eefbe5
Branches Tags
nutui
/
3.1.11
/
doc44.js

doc44.js 13 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 
  1. import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`<h1>Searchbar \u641C\u7D22\u680F</h1><h3>\u4ECB\u7ECD</h3><p>\u641C\u7D22\u680F</p><h3>\u5B89\u88C5</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    2. 

  2. 

  3. <span class="hljs-comment">// vue</span>
    4. 

  4. <span class="hljs-keyword">import</span> { SearchBar, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;
    5. 

  5. <span class="hljs-comment">// taro</span>
    6. 

  6. <span class="hljs-keyword">import</span> { SearchBar, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;
    7. 

  7. 

  8. <span class="hljs-keyword">const</span> app = createApp();
    9. 

  9. app.use(SearchBar).use(Icon);
    10. 

  10. </code></pre><h3>\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">nut-searchbar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;searchValue&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-searchbar</span>&gt;</span>
    11. 

  11. </code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { toRefs, reactive } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    12. 

  12. 

  13. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    14. 

  14.   <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {
    15. 

  15.     <span class="hljs-keyword">const</span> state = reactive({
    16. 

  16.       <span class="hljs-attr">searchValue</span>: <span class="hljs-string">&quot;&quot;</span>
    17. 

  17.     });
    18. 

  18. 

  19.     <span class="hljs-keyword">return</span> {
    20. 

  20.       ...toRefs(state),
    21. 

  21.     };
    22. 

  22.   }
    23. 

  23. }
    24. 

  24. </code></pre><h3>\u641C\u7D22\u4E8B\u4EF6\u76D1\u542C</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-searchbar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;searchValue&quot;</span> @<span class="hljs-attr">search</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-searchbar</span>&gt;</span>
    25. 

  25. </code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { toRefs, reactive } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    26. 

  26. <span class="hljs-keyword">import</span> { Toast } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;
    27. 

  27. 

  28. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    29. 

  29.   <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {
    30. 

  30.     <span class="hljs-keyword">const</span> state = reactive({
    31. 

  31.       <span class="hljs-attr">searchValue</span>: <span class="hljs-string">&quot;&quot;</span>
    32. 

  32.     });
    33. 

  33. 

  34.     <span class="hljs-keyword">const</span> search = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    35. 

  35.       Toast.text(<span class="hljs-string">&#39;\u641C\u7D22\u89E6\u53D1&#39;</span>);
    36. 

  36.     };
    37. 

  37. 

  38.     <span class="hljs-keyword">return</span> {
    39. 

  39.       ...toRefs(state),
    40. 

  40.       search,
    41. 

  41.     };
    42. 

  42.   }
    43. 

  43. }
    44. 

  44. </code></pre><h3>\u663E\u793A\u641C\u7D22 icon</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-searchbar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;searchValue&quot;</span>&gt;</span>
    45. 

  45.   <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:leftin</span>&gt;</span>
    46. 

  46.     <span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;14&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;search2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>
    47. 

  47.   <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    48. 

  48. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-searchbar</span>&gt;</span>
    49. 

  49. </code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { toRefs, reactive } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    50. 

  50. <span class="hljs-keyword">import</span> { Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;
    51. 

  51. 

  52. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    53. 

  53.   <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {
    54. 

  54.     <span class="hljs-keyword">const</span> state = reactive({
    55. 

  55.       <span class="hljs-attr">searchValue</span>: <span class="hljs-string">&quot;&quot;</span>
    56. 

  56.     });
    57. 

  57. 

  58.     <span class="hljs-keyword">return</span> {
    59. 

  59.       ...toRefs(state),
    60. 

  60.     };
    61. 

  61.   }
    62. 

  62. }
    63. 

  63. </code></pre><h3>\u53F3\u4FA7\u6DFB\u52A0\u641C\u7D22\u6587\u5B57</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-searchbar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;searchValue&quot;</span>&gt;</span>
    64. 

  64.   <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:rightout</span>&gt;</span>
    65. 

  65.     \u641C\u7D22
    66. 

  66.   <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    67. 

  67. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-searchbar</span>&gt;</span>
    68. 

  68. </code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { toRefs, reactive } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    69. 

  69. 

  70. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    71. 

  71.   <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {
    72. 

  72.     <span class="hljs-keyword">const</span> state = reactive({
    73. 

  73.       <span class="hljs-attr">searchValue</span>: <span class="hljs-string">&quot;&quot;</span>
    74. 

  74.     });
    75. 

  75. 

  76.     <span class="hljs-keyword">return</span> {
    77. 

  77.       ...toRefs(state),
    78. 

  78.     };
    79. 

  79.   }
    80. 

  80. }
    81. 

  81. </code></pre><pre><code>&lt;h2&gt;\u66F4\u6539\u8F93\u5165\u6846\u5185\u90E8\u53CA\u5916\u90E8\u7684\u80CC\u666F\u6837\u5F0F&lt;/h2&gt;
    82. 

  82. </code></pre><h3>\u66F4\u6539\u8F93\u5165\u6846\u5185\u90E8\u53CA\u5916\u90E8\u7684\u80CC\u666F\u6837\u5F0F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-searchbar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;searchValue4&quot;</span> <span class="hljs-attr">background</span>=<span class="hljs-string">&quot;linear-gradient(to right, #9866F0, #EB4D50)&quot;</span> <span class="hljs-attr">input-background</span>=<span class="hljs-string">&quot;#fff&quot;</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">nut-searchbar</span>&gt;</span>
    83. 

  83. </code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { toRefs, reactive } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    84. 

  84. 

  85. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    86. 

  86.   <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {
    87. 

  87.     <span class="hljs-keyword">const</span> state = reactive({
    88. 

  88.       <span class="hljs-attr">searchValue</span>: <span class="hljs-string">&quot;&quot;</span>
    89. 

  89.     });
    90. 

  90. 

  91.     <span class="hljs-keyword">return</span> {
    92. 

  92.       ...toRefs(state),
    93. 

  93.     };
    94. 

  94.   }
    95. 

  95. }
    96. 

  96. </code></pre><h3>\u663E\u793A\u5168\u90E8 icon</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-searchbar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;searchValue&quot;</span>&gt;</span>
    97. 

  97.   <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:leftout</span>&gt;</span>
    98. 

  98.     <span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;clickLeft&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;20&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>
    99. 

  99.   <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    100. 

  100.   <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:leftin</span>&gt;</span>
    101. 

  101.     <span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;14&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;search2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>
    102. 

  102.   <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    103. 

  103.   <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:rightin</span>&gt;</span>
    104. 

  104.     <span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;20&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;photograph&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>
    105. 

  105.   <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    106. 

  106.   <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:rightout</span>&gt;</span>
    107. 

  107.     <span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;20&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;message&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>
    108. 

  108.   <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    109. 

  109. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-searchbar</span>&gt;</span> 
    110. 

  110. </code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { toRefs, reactive } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    111. 

  111. <span class="hljs-keyword">import</span> { Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;
    112. 

  112. 

  113. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    114. 

  114.   <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {
    115. 

  115.     <span class="hljs-keyword">const</span> state = reactive({
    116. 

  116.       <span class="hljs-attr">searchValue</span>: <span class="hljs-string">&quot;&quot;</span>
    117. 

  117.     });
    118. 

  118. 

  119.     <span class="hljs-keyword">return</span> {
    120. 

  120.       ...toRefs(state),
    121. 

  121.     };
    122. 

  122.   }
    123. 

  123. }
    124. 

  124. </code></pre><h3>Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>max-length</td><td>\u6700\u5927\u8F93\u5165\u957F\u5EA6</td><td>[Number,String]</td><td>\u20189999\u2019</td></tr><tr><td>input-type</td><td>\u8F93\u5165\u6846\u7C7B\u578B</td><td>String</td><td>\u2018text\u2019</td></tr><tr><td>placeholder</td><td>\u8F93\u5165\u6846\u9ED8\u8BA4\u6697\u7EB9</td><td>String</td><td>\u2018\u8BF7\u8F93\u5165\u2019</td></tr><tr><td>clearable</td><td>\u662F\u5426\u5C55\u793A\u6E05\u9664\u6309\u94AE</td><td>Boolean</td><td>true</td></tr><tr><td>background</td><td>\u8F93\u5165\u6846\u5916\u90E8\u80CC\u666F</td><td>String</td><td>\u2018#fff\u2019</td></tr><tr><td>input-background</td><td>\u8F93\u5165\u6846\u5185\u90E8\u80CC\u666F</td><td>String</td><td>\u2018#f7f7f7\u2019</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>change</td><td>\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1</td><td>val, event</td></tr><tr><td>focus</td><td>\u805A\u7126\u65F6\u89E6\u53D1</td><td>val, event</td></tr><tr><td>blur</td><td>\u5931\u7126\u65F6\u89E6\u53D1</td><td>val, event</td></tr><tr><td>clear</td><td>\u70B9\u51FB\u6E05\u7A7A\u65F6\u89E6\u53D1</td><td>val</td></tr><tr><td>search</td><td>\u6309\u4E0B ENTER \u952E\u65F6\u89E6\u53D1</td><td>val, event</td></tr></tbody></table><h2>Slots</h2><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>leftin</td><td>\u8F93\u5165\u6846\u5185 \u5DE6icon</td></tr><tr><td>leftout</td><td>\u8F93\u5165\u6846\u5916 \u5DE6icon</td></tr><tr><td>rightin</td><td>\u8F93\u5165\u6846\u5185 \u53F3icon</td></tr><tr><td>rightout</td><td>\u8F93\u5165\u6846\u5916 \u53F3icon</td></tr></tbody></table>`,30),e=[p],d={setup(c,{expose:s}){return s({frontmatter:{}}),(h,o)=>(n(),a("div",l,e))}};export{d as default};
    125.