Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: 8eeb2bf654
Branches Tags
nutui
/
3.1.11
/
doc.taro3.js

doc.taro3.js 11 KB
History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 
  1. import{e as n,o as a,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`<h1>Dialog \u5BF9\u8BDD\u6846</h1><h3>\u4ECB\u7ECD</h3><p>\u6A21\u6001\u5BF9\u8BDD\u6846\uFF0C\u5728\u6D6E\u5C42\u4E2D\u663E\u793A\uFF0C\u5F15\u5BFC\u7528\u6237\u8FDB\u884C\u76F8\u5173\u64CD\u4F5C\uFF0C\u5E38\u7528\u4E8E\u6D88\u606F\u63D0\u793A\u3001\u6D88\u606F\u786E\u8BA4\uFF0C\u6216\u5728\u5F53\u524D\u9875\u9762\u5185\u5B8C\u6210\u7279\u5B9A\u7684\u4EA4\u4E92\u64CD\u4F5C\u3002</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-keyword">import</span> { Dialog } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;
    3. 

  3. 

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

  5. app.use(Dialog);
    6. 

  6. </code></pre><h2>\u4F7F\u7528\u65B9\u5F0F</h2><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u57FA\u7840\u5F39\u6846&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;baseClick&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>
    7. 

  7. <span class="hljs-tag">&lt;<span class="hljs-name">nut-dialog</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u57FA\u7840\u5F39\u6846&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u8FD9\u662F\u57FA\u7840\u5F39\u6846\u3002&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;visible1&quot;</span> @<span class="hljs-attr">cancel</span>=<span class="hljs-string">&quot;onCancel&quot;</span> @<span class="hljs-attr">ok</span>=<span class="hljs-string">&quot;onOk&quot;</span> /&gt;</span>
    8. 

  8. 

  9. <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u65E0\u6807\u9898\u5F39\u6846&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;noTitleClick&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>
    10. 

  10. <span class="hljs-tag">&lt;<span class="hljs-name">nut-dialog</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u8FD9\u662F\u65E0\u6807\u9898\u5F39\u6846\u3002&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;visible2&quot;</span> @<span class="hljs-attr">cancel</span>=<span class="hljs-string">&quot;onCancel&quot;</span> @<span class="hljs-attr">ok</span>=<span class="hljs-string">&quot;onOk&quot;</span> /&gt;</span>
    11. 

  11. 

  12. <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u63D0\u793A\u5F39\u6846&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;tipsClick&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>
    13. 

  13. <span class="hljs-tag">&lt;<span class="hljs-name">nut-dialog</span> <span class="hljs-attr">no-cancel-btn</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6E29\u99A8\u63D0\u793A&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;\u8FD9\u662F\u63D0\u793A\u5F39\u6846\u3002&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;visible3&quot;</span> @<span class="hljs-attr">cancel</span>=<span class="hljs-string">&quot;onCancel&quot;</span> @<span class="hljs-attr">ok</span>=<span class="hljs-string">&quot;onOk&quot;</span> /&gt;</span>
    14. 

  14. 

  15. <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\u5173\u95ED&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;componentClick&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>
    16. 

  16. <span class="hljs-tag">&lt;<span class="hljs-name">nut-dialog</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5F02\u6B65\u5173\u95ED&quot;</span> <span class="hljs-attr">:content</span>=<span class="hljs-string">&quot;closeContent&quot;</span> <span class="hljs-attr">:visible</span>=<span class="hljs-string">&quot;visible4&quot;</span> @<span class="hljs-attr">cancel</span>=<span class="hljs-string">&quot;onCancel&quot;</span> @<span class="hljs-attr">ok</span>=<span class="hljs-string">&quot;onOkAsync&quot;</span> /&gt;</span>
    17. 

  17. </code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    18. 

  18. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    19. 

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

  20.     <span class="hljs-keyword">const</span> visible1 = ref(<span class="hljs-literal">false</span>);
    21. 

  21.     <span class="hljs-keyword">const</span> visible2 = ref(<span class="hljs-literal">false</span>);
    22. 

  22.     <span class="hljs-keyword">const</span> visible3 = ref(<span class="hljs-literal">false</span>);
    23. 

  23.     <span class="hljs-keyword">const</span> visible4 = ref(<span class="hljs-literal">false</span>);
    24. 

  24.     <span class="hljs-keyword">const</span> closeContent = ref(<span class="hljs-string">&#39;&#39;</span>);
    25. 

  25.     <span class="hljs-keyword">const</span> sleep = <span class="hljs-function">() =&gt;</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =&gt;</span> <span class="hljs-built_in">setTimeout</span>(resolve, <span class="hljs-number">1000</span>));
    26. 

  26.     <span class="hljs-keyword">const</span> countDown = <span class="hljs-function">(<span class="hljs-params">second: number</span>) =&gt;</span> <span class="hljs-string">\`\u5012\u8BA1\u65F6 <span class="hljs-subst">\${second}</span> \u79D2\`</span>;
    27. 

  27. 

  28.     <span class="hljs-keyword">const</span> onCancel = <span class="hljs-function">() =&gt;</span> {
    29. 

  29.       <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#39;event cancel&#39;</span>);
    30. 

  30.     };
    31. 

  31.     <span class="hljs-keyword">const</span> onOk = <span class="hljs-function">() =&gt;</span> {
    32. 

  32.       <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#39;event ok&#39;</span>);
    33. 

  33.     };
    34. 

  34.     <span class="hljs-keyword">const</span> onOkAsync = <span class="hljs-function">() =&gt;</span> {
    35. 

  35.       sleep()
    36. 

  36.         .then(<span class="hljs-function">() =&gt;</span> {
    37. 

  37.           closeContent.value = countDown(<span class="hljs-number">2</span>);
    38. 

  38.           <span class="hljs-keyword">return</span> sleep();
    39. 

  39.         })
    40. 

  40.         .then(<span class="hljs-function">() =&gt;</span> {
    41. 

  41.           closeContent.value = countDown(<span class="hljs-number">1</span>);
    42. 

  42.           <span class="hljs-keyword">return</span> sleep();
    43. 

  43.         })
    44. 

  44.         .then(<span class="hljs-function">() =&gt;</span> {
    45. 

  45.           closeContent.value = countDown(<span class="hljs-number">0</span>);
    46. 

  46.         })
    47. 

  47.         .then(<span class="hljs-function">() =&gt;</span> {
    48. 

  48.           visible4.value = <span class="hljs-literal">false</span>;
    49. 

  49.         });
    50. 

  50.     };
    51. 

  51. 

  52.     <span class="hljs-keyword">const</span> baseClick = (): <span class="hljs-function"><span class="hljs-params">void</span> =&gt;</span> {
    53. 

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

  54.     };
    55. 

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

  56.       visible2.value = <span class="hljs-literal">true</span>;
    57. 

  57.     };
    58. 

  58.     <span class="hljs-keyword">const</span> tipsClick = <span class="hljs-function">() =&gt;</span> {
    59. 

  59.       visible3.value = <span class="hljs-literal">true</span>;
    60. 

  60.     };
    61. 

  61. 

  62.     <span class="hljs-keyword">const</span> componentClick = <span class="hljs-function">() =&gt;</span> {
    63. 

  63.       closeContent.value = <span class="hljs-string">\`\u70B9\u51FB\u786E\u5B9A\u65F63s\u540E\u5173\u95ED\`</span>;
    64. 

  64.       visible4.value = <span class="hljs-literal">true</span>;
    65. 

  65.     };
    66. 

  66. 

  67.     <span class="hljs-keyword">return</span> {
    68. 

  68.       visible1,
    69. 

  69.       visible2,
    70. 

  70.       visible3,
    71. 

  71.       visible4,
    72. 

  72.       onCancel,
    73. 

  73.       onOk,
    74. 

  74.       closeContent,
    75. 

  75.       onOkAsync,
    76. 

  76.       baseClick,
    77. 

  77.       noTitleClick,
    78. 

  78.       componentClick,
    79. 

  79.       tipsClick
    80. 

  80.     };
    81. 

  81.   }
    82. 

  82. };
    83. 

  83. </code></pre><h2>Props</h2><table><thead><tr><th>\u5B57\u6BB5</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u6807\u9898</td><td>String</td><td>-</td></tr><tr><td>content</td><td>\u5185\u5BB9\uFF0C\u652F\u6301HTML</td><td>String</td><td>-</td></tr><tr><td>teleport</td><td>\u6307\u5B9A\u6302\u8F7D\u8282\u70B9</td><td>String</td><td>\u201Cbody\u201D</td></tr><tr><td>close-on-click-overlay</td><td>\u70B9\u51FB\u8499\u5C42\u662F\u5426\u5173\u95ED\u5BF9\u8BDD\u6846</td><td>Boolean</td><td>false</td></tr><tr><td>no-footer</td><td>\u662F\u5426\u9690\u85CF\u5E95\u90E8\u6309\u94AE\u680F</td><td>Boolean</td><td>false</td></tr><tr><td>no-ok-btn</td><td>\u662F\u5426\u9690\u85CF\u786E\u5B9A\u6309\u94AE</td><td>Boolean</td><td>false</td></tr><tr><td>no-cancel-btn</td><td>\u662F\u5426\u9690\u85CF\u53D6\u6D88\u6309\u94AE</td><td>Boolean</td><td>false</td></tr><tr><td>cancel-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u6848</td><td>String</td><td>\u201D\u53D6\u6D88\u201C</td></tr><tr><td>ok-text</td><td>\u786E\u5B9A\u6309\u94AE\u6587\u6848</td><td>String</td><td>\u201D\u786E \u5B9A\u201C</td></tr><tr><td>ok-btn-disabled</td><td>\u7981\u7528\u786E\u5B9A\u6309\u94AE</td><td>Boolean</td><td>false</td></tr><tr><td>cancel-auto-close</td><td>\u53D6\u6D88\u6309\u94AE\u662F\u5426\u9ED8\u8BA4\u5173\u95ED\u5F39\u7A97</td><td>Boolean</td><td>true</td></tr><tr><td>text-align</td><td>\u6587\u5B57\u5BF9\u9F50\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u540Ccss\u7684text-align</td><td>String</td><td>\u201Ccenter\u201D</td></tr><tr><td>close-on-popstate</td><td>\u662F\u5426\u5728\u9875\u9762\u56DE\u9000\u65F6\u81EA\u52A8\u5173\u95ED</td><td>Boolean</td><td>false</td></tr><tr><td>lock-scroll</td><td>\u80CC\u666F\u662F\u5426\u9501\u5B9A</td><td>Boolean</td><td>false</td></tr></tbody></table><h2>Events</h2><table><thead><tr><th>\u5B57\u6BB5</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>ok</td><td>\u786E\u5B9A\u6309\u94AE\u56DE\u8C03</td><td>Function</td><td>-</td></tr><tr><td>cancel</td><td>\u53D6\u6D88\u6309\u94AE\u56DE\u8C03</td><td>Function</td><td>-</td></tr><tr><td>closed</td><td>\u5173\u95ED\u56DE\u8C03\uFF0C\u4EFB\u4F55\u60C5\u51B5\u5173\u95ED\u5F39\u7A97\u90FD\u4F1A\u89E6\u53D1</td><td>Function</td><td>-</td></tr></tbody></table><h2>Slots</h2><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>header</td><td>\u81EA\u5B9A\u4E49\u6807\u9898\u533A\u57DF</td></tr><tr><td>default</td><td>\u81EA\u5B9A\u4E49\u5185\u5BB9</td></tr><tr><td>footer</td><td>\u81EA\u5B9A\u4E49\u5E95\u90E8\u6309\u94AE\u533A\u57DF</td></tr></tbody></table>`,14),c=[p],i={setup(e,{expose:s}){return s({frontmatter:{}}),(r,d)=>(a(),n("div",l,c))}};export{i as default};
    84.