Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: c07d6c4e18
Branches Tags
nutui
/
3.1.10
/
doc49.js

doc49.js 14 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 
  1. import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`<h1>Swipe \u6ED1\u52A8\u624B\u52BF</h1><h3>\u4ECB\u7ECD</h3><p>\u5E38\u7528\u4E8E\u5355\u5143\u683C\u5DE6\u6ED1\u5220\u9664\u7B49\u624B\u52BF\u64CD\u4F5C</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. <span class="hljs-comment">//vue</span>
    3. 

  3. <span class="hljs-keyword">import</span> { Swipe } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;
    4. 

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

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

  6. 

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

  8. app.use(Swipe);
    9. 

  9. </code></pre><h2>\u4EE3\u7801\u6F14\u793A</h2><h3>\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-swipe</span>&gt;</span>
    10. 

  10.     <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">round-radius</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u5DE6\u6ED1\u5220\u9664&quot;</span> /&gt;</span>
    11. 

  11.     <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">right</span>&gt;</span>
    12. 

  12.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height:100%&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    13. 

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

  14. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swipe</span>&gt;</span>
    15. 

  15. </code></pre><h3>\u7981\u6B62\u6ED1\u52A8</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-swipe</span> <span class="hljs-attr">disabled</span>&gt;</span>
    16. 

  16.     <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">round-radius</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u7981\u6B62\u6ED1\u52A8&quot;</span> /&gt;</span>
    17. 

  17.     <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">right</span>&gt;</span>
    18. 

  18.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height:100%&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    19. 

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

  20. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swipe</span>&gt;</span>
    21. 

  21. </code></pre><h3>\u5DE6\u53F3\u6ED1\u52A8</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-swipe</span>&gt;</span>
    22. 

  22.     <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">left</span>&gt;</span>
    23. 

  23.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height:100%&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u9009\u62E9<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    24. 

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

  25.     <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">round-radius</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u5DE6\u6ED1\u53F3\u6ED1\u90FD\u53EF\u4EE5\u54E6&quot;</span> /&gt;</span>
    26. 

  26.     <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">right</span>&gt;</span>
    27. 

  27.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height:100%&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    28. 

  28.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height:100%&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u6536\u85CF<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    29. 

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

  30. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swipe</span>&gt;</span>
    31. 

  31. </code></pre><h3>\u5F02\u6B65\u63A7\u5236</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-swipe</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;refSwipe&quot;</span> @<span class="hljs-attr">open</span>=<span class="hljs-string">&quot;open&quot;</span> @<span class="hljs-attr">close</span>=<span class="hljs-string">&quot;close&quot;</span>&gt;</span>
    32. 

  32.     <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5F02\u6B65\u6253\u5F00\u5173\u95ED&quot;</span>&gt;</span>
    33. 

  33.     <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:link</span>&gt;</span>
    34. 

  34.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-switch</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;checked&quot;</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;changSwitch&quot;</span> <span class="hljs-attr">active-text</span>=<span class="hljs-string">&quot;\u5F00&quot;</span> <span class="hljs-attr">inactive-text</span>=<span class="hljs-string">&quot;\u5173&quot;</span> /&gt;</span>
    35. 

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

  36.     <span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>
    37. 

  37.     <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">right</span>&gt;</span>
    38. 

  38.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height:100%&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    39. 

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

  40. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swipe</span>&gt;</span>
    41. 

  41. </code></pre><pre><code class="language-typescript">    <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {
    42. 

  42.         <span class="hljs-keyword">const</span> refSwipe = ref&lt;HTMLElement&gt;();
    43. 

  43.         <span class="hljs-keyword">const</span> checked = ref(<span class="hljs-literal">false</span>);
    44. 

  44.         <span class="hljs-keyword">const</span> changSwitch = <span class="hljs-function">(<span class="hljs-params">value: <span class="hljs-built_in">boolean</span></span>) =&gt;</span> {
    45. 

  45.             <span class="hljs-keyword">if</span> (value) {
    46. 

  46.                 refSwipe.value?.open(<span class="hljs-string">&#39;left&#39;</span>);
    47. 

  47.             } <span class="hljs-keyword">else</span> {
    48. 

  48.                 refSwipe.value?.close();
    49. 

  49.             }
    50. 

  50.         };
    51. 

  51.          <span class="hljs-keyword">const</span> open = <span class="hljs-function">(<span class="hljs-params">obj: <span class="hljs-built_in">any</span></span>) =&gt;</span> {
    52. 

  52.             <span class="hljs-built_in">console</span>.log(obj);
    53. 

  53.             checked.value = <span class="hljs-literal">true</span>;
    54. 

  54.         };
    55. 

  55.         <span class="hljs-keyword">const</span> close = <span class="hljs-function">() =&gt;</span> {
    56. 

  56.             checked.value = <span class="hljs-literal">false</span>;
    57. 

  57.         };
    58. 

  58.         <span class="hljs-keyword">return</span> { checked, changSwitch, refSwipe, open, close };
    59. 

  59.     }
    60. 

  60. </code></pre><h3>\u81EA\u5B9A\u4E49</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-swipe</span>&gt;</span>
    61. 

  61.     <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">left</span>&gt;</span>
    62. 

  62.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height:100%&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u9009\u62E9<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    63. 

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

  64.     <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5546\u54C1\u63CF\u8FF0&quot;</span>&gt;</span>
    65. 

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

  66.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-inputnumber</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;number&quot;</span> /&gt;</span>
    67. 

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

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

  69.     <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">right</span>&gt;</span>
    70. 

  70.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height:100%&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    71. 

  71.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height:100%&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u6536\u85CF<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    72. 

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

  73. <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swipe</span>&gt;</span>
    74. 

  74. </code></pre><pre><code class="language-typescript">    <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {
    75. 

  75.         <span class="hljs-keyword">const</span> <span class="hljs-built_in">number</span> = ref(<span class="hljs-number">0</span>);
    76. 

  76.         <span class="hljs-keyword">return</span> { <span class="hljs-built_in">number</span> };
    77. 

  77.     }
    78. 

  78. </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>name</td><td>\u552F\u4E00\u6807\u8BC6</td><td>String</td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6ED1\u52A8</td><td>String</td><td>false</td></tr><tr><td>touch-move-prevent-default</td><td>\u662F\u5426\u963B\u6B62\u6ED1\u52A8\u4E8B\u4EF6\u884C\u4E3A</td><td>boolean</td><td>false</td></tr><tr><td>touch-move-stop-propagation</td><td>\u662F\u5426\u963B\u6B62\u6ED1\u52A8\u4E8B\u4EF6\u5192\u6CE1</td><td>boolean</td><td>false</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>open</td><td>\u6253\u5F00\u65F6\u89E6\u53D1</td><td>{type:\u2018left or right\u2019}</td></tr><tr><td>close</td><td>\u5173\u95ED\u65F6\u89E6\u53D1</td><td>{type:\u2018left or right\u2019}</td></tr></tbody></table><h3>Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>left</td><td>\u5DE6\u4FA7\u6ED1\u52A8\u5185\u5BB9</td></tr><tr><td>default</td><td>\u81EA\u5B9A\u4E49\u5185\u5BB9</td></tr><tr><td>right</td><td>\u53F3\u4FA7\u6ED1\u52A8\u5185\u5BB9</td></tr></tbody></table><h3>\u65B9\u6CD5</h3><p>\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Swipe \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>open</td><td>\u6253\u5F00\u5355\u5143\u683C\u4FA7\u8FB9\u680F</td><td>left or right</td></tr><tr><td>close</td><td>\u6536\u8D77\u5355\u5143\u683C\u4FA7\u8FB9\u680F</td><td></td></tr></tbody></table>`,27),e=[p],u={setup(h,{expose:s}){return s({frontmatter:{}}),(r,j)=>(n(),a("div",l,e))}};export{u as default};
    79.