/*! For license information please see 5803.e17d3cc7.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["5803"],{73911:function(t,n,e){"use strict";e.r(n);var s=e("80681");let d=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,s.wg)(),(0,s.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>Dialog</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>A modal box pops up on the page, which is often used for message prompts, message confirmation, or to complete specific interactive operations in the current page. It supports two methods: component call and function call.</p>\n</div><div class="van-doc-card"><h3 id="install" tabindex="-1">Install</h3>\n<p>Register component globally via <code>app.use</code>, refer to <a href="#/en-US/advanced-usage#zu-jian-zhu-ce" target="_blank">Component Registration</a> for more registration ways.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>;\n<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Dialog</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Dialog</span>);\n</code></pre>\n</div><div class="van-doc-card"><h3 id="function-call" tabindex="-1">Function Call</h3>\n<p>Vant provides some utility functions that can quickly evoke global <code>Dialog</code> components.</p>\n<p>For example, calling the <code>showDialog</code> function will render a Dialog directly in the page.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showDialog } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n\n<span class="hljs-title function_">showDialog</span>({ <span class="hljs-attr">message</span>: <span class="hljs-string">&#x27;Alert&#x27;</span> });\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="alert-dialog" tabindex="-1">Alert dialog</h3>\n<p>Used to prompt for some messages, only including one confirm button by default.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showDialog } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n\n<span class="hljs-title function_">showDialog</span>({\n  <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;Title&#x27;</span>,\n  <span class="hljs-attr">message</span>: <span class="hljs-string">&#x27;The code is written for people to see and can be run on a machine.&#x27;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n  <span class="hljs-comment">// on close</span>\n});\n\n<span class="hljs-title function_">showDialog</span>({\n  <span class="hljs-attr">message</span>:\n    <span class="hljs-string">&#x27;Life is far more than just spinning and being busy to the limit, and human experiences are much broader and richer than this.&#x27;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n  <span class="hljs-comment">// on close</span>\n});\n</code></pre>\n</div><div class="van-doc-card"><h3 id="confirm-dialog" tabindex="-1">Confirm dialog</h3>\n<p>Used to confirm some messages, including a confirm button and a cancel button by default.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showConfirmDialog } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n\n<span class="hljs-title function_">showConfirmDialog</span>({\n  <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;Title&#x27;</span>,\n  <span class="hljs-attr">message</span>:\n    <span class="hljs-string">&#x27;If the solution is ugly, then there must be a better solution, but it has not been discovered yet.&#x27;</span>,\n})\n  .<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n    <span class="hljs-comment">// on confirm</span>\n  })\n  .<span class="hljs-title function_">catch</span>(<span class="hljs-function">() =&gt;</span> {\n    <span class="hljs-comment">// on cancel</span>\n  });\n</code></pre>\n</div><div class="van-doc-card"><h3 id="round-button-style" tabindex="-1">Round Button Style</h3>\n<p>Setting the <code>theme</code> option to <code>round-button</code> will display the Dialog with a rounded button style.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showDialog } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n\n<span class="hljs-title function_">showDialog</span>({\n  <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;Title&#x27;</span>,\n  <span class="hljs-attr">message</span>: <span class="hljs-string">&#x27;The code is written for people to see and can be run on a machine.&#x27;</span>,\n  <span class="hljs-attr">theme</span>: <span class="hljs-string">&#x27;round-button&#x27;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n  <span class="hljs-comment">// on close</span>\n});\n\n<span class="hljs-title function_">showDialog</span>({\n  <span class="hljs-attr">message</span>:\n    <span class="hljs-string">&#x27;Life is far more than just spinning and being busy to the limit, and human experiences are much broader and richer than this.&#x27;</span>,\n  <span class="hljs-attr">theme</span>: <span class="hljs-string">&#x27;round-button&#x27;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n  <span class="hljs-comment">// on close</span>\n});\n</code></pre>\n</div><div class="van-doc-card"><h3 id="async-close" tabindex="-1">Async Close</h3>\n<p>You can pass a callback function through the <code>beforeClose</code> option to perform specific operations before closing the Dialog.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showConfirmDialog } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n\n<span class="hljs-keyword">const</span> <span class="hljs-title function_">beforeClose</span> = (<span class="hljs-params">action</span>) =&gt;\n  <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =&gt;</span> {\n    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {\n      <span class="hljs-comment">// action !== &#x27;confirm&#x27;  Interception cancellation operation</span>\n      <span class="hljs-title function_">resolve</span>(action === <span class="hljs-string">&#x27;confirm&#x27;</span>);\n    }, <span class="hljs-number">1000</span>);\n  });\n\n<span class="hljs-title function_">showConfirmDialog</span>({\n  <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;Title&#x27;</span>,\n  <span class="hljs-attr">message</span>:\n    <span class="hljs-string">&#x27;If the solution is ugly, then there must be a better solution, but it has not been discovered yet.&#x27;</span>,\n  beforeClose,\n});\n</code></pre>\n</div><div class="van-doc-card"><h3 id="use-dialog-component" tabindex="-1">Use Dialog Component</h3>\n<p>If you need to embed components or other custom content within a Dialog, you can directly use the Dialog component and customize it using the default slot. Before using it, you need to register the component using <code>app.use</code> or other methods.</p>\n<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dialog</span> <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">&quot;show&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Title&quot;</span> <span class="hljs-attr">show-cancel-button</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dialog</span>&gt;</span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n  <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n    <span class="hljs-keyword">const</span> show = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n    <span class="hljs-keyword">return</span> { show };\n  },\n};\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="methods" tabindex="-1">Methods</h3>\n<p>Vant exports following Dialog utility functions:</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>Attribute</th>\n<th>Return value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>showDialog</td>\n<td>Display a message prompt dialog with a default confirm button</td>\n<td><em>options: DialogOptions</em></td>\n<td><code>Promise&lt;void&gt;</code></td>\n</tr>\n<tr>\n<td>showConfirmDialog</td>\n<td>Display a message confirmation dialog with default confirm and cancel buttons</td>\n<td><em>options: DialogOptions</em></td>\n<td><code>Promise&lt;void&gt;</code></td>\n</tr>\n<tr>\n<td>closeDialog</td>\n<td>Close the currently displayed dialog</td>\n<td>-</td>\n<td><code>void</code></td>\n</tr>\n<tr>\n<td>setDialogDefaultOptions</td>\n<td>Modify the default configuration that affects all <code>showDialog</code> calls</td>\n<td><em>options: DialogOptions</em></td>\n<td><code>void</code></td>\n</tr>\n<tr>\n<td>resetDialogDefaultOptions</td>\n<td>Reset the default configuration that affects all <code>showDialog</code> calls</td>\n<td>-</td>\n<td><code>void</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="dialogoptions" tabindex="-1">DialogOptions</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>Title</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>width</td>\n<td>Dialog width</td>\n<td><em>number | string</em></td>\n<td><code>320px</code></td>\n</tr>\n<tr>\n<td>message</td>\n<td>Message</td>\n<td><em>string | () =&gt; JSX.ELement</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>messageAlign</td>\n<td>Message text align, can be set to <code>left</code> <code>right</code></td>\n<td><em>string</em></td>\n<td><code>center</code></td>\n</tr>\n<tr>\n<td>theme</td>\n<td>Theme style, can be set to <code>round-button</code></td>\n<td><em>string</em></td>\n<td><code>default</code></td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom className</td>\n<td><em>string | Array | object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>showConfirmButton</td>\n<td>Whether to show confirm button</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>showCancelButton</td>\n<td>Whether to show cancel button</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>cancelButtonText</td>\n<td>Cancel button text</td>\n<td><em>string</em></td>\n<td><code>Cancel</code></td>\n</tr>\n<tr>\n<td>cancelButtonColor</td>\n<td>Cancel button color</td>\n<td><em>string</em></td>\n<td><code>black</code></td>\n</tr>\n<tr>\n<td>cancelButtonDisabled</td>\n<td>Whether to disable cancel button</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>confirmButtonText</td>\n<td>Confirm button text</td>\n<td><em>string</em></td>\n<td><code>Confirm</code></td>\n</tr>\n<tr>\n<td>confirmButtonColor</td>\n<td>Confirm button color</td>\n<td><em>string</em></td>\n<td><code>#ee0a24</code></td>\n</tr>\n<tr>\n<td>confirmButtonDisabled</td>\n<td>Whether to disable confirm button</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>overlay</td>\n<td>Whether to show overlay</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>overlayClass</td>\n<td>Custom overlay class</td>\n<td><em>string | Array | object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>overlayStyle</td>\n<td>Custom overlay style</td>\n<td><em>object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>closeOnPopstate</td>\n<td>Whether to close when popstate</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>closeOnClickOverlay</td>\n<td>Whether to close when overlay is clicked</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>lockScroll</td>\n<td>Whether to lock body scroll</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>allowHtml</td>\n<td>Whether to allow HTML rendering in message</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>beforeClose</td>\n<td>Callback function before close</td>\n<td><em>(action: string) =&gt; boolean | Promise&lt;boolean&gt;</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>transition</td>\n<td>Transition, equivalent to <code>name</code> prop of <a href="https://vuejs.org/api/built-in-components.html#transition" target="_blank">transition</a></td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>teleport</td>\n<td>Specifies a target element where Dialog will be mounted</td>\n<td><em>string | Element</em></td>\n<td><code>body</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v-model:show</td>\n<td>Whether to show dialog</td>\n<td><em>boolean</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>Title</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>width</td>\n<td>Width</td>\n<td><em>number | string</em></td>\n<td><code>320px</code></td>\n</tr>\n<tr>\n<td>message</td>\n<td>Message</td>\n<td><em>string | () =&gt; JSX.ELement</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>message-align</td>\n<td>Message align, can be set to <code>left</code> <code>right</code> <code>justify</code></td>\n<td><em>string</em></td>\n<td><code>center</code></td>\n</tr>\n<tr>\n<td>theme</td>\n<td>Theme style, can be set to <code>round-button</code></td>\n<td><em>string</em></td>\n<td><code>default</code></td>\n</tr>\n<tr>\n<td>show-confirm-button</td>\n<td>Whether to show confirm button</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>show-cancel-button</td>\n<td>Whether to show cancel button</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>cancel-button-text</td>\n<td>Cancel button text</td>\n<td><em>string</em></td>\n<td><code>Cancel</code></td>\n</tr>\n<tr>\n<td>cancel-button-color</td>\n<td>Cancel button color</td>\n<td><em>string</em></td>\n<td><code>black</code></td>\n</tr>\n<tr>\n<td>cancel-button-disabled</td>\n<td>Whether to disable cancel button</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>confirm-button-text</td>\n<td>Confirm button text</td>\n<td><em>string</em></td>\n<td><code>Confirm</code></td>\n</tr>\n<tr>\n<td>confirm-button-color</td>\n<td>Confirm button color</td>\n<td><em>string</em></td>\n<td><code>#ee0a24</code></td>\n</tr>\n<tr>\n<td>confirm-button-disabled</td>\n<td>Whether to disable confirm button</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>z-index</td>\n<td>Set the z-index to a fixed value</td>\n<td><em>number | string</em></td>\n<td><code>2000+</code></td>\n</tr>\n<tr>\n<td>overlay</td>\n<td>Whether to show overlay</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>overlay-class</td>\n<td>Custom overlay class</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>overlay-style</td>\n<td>Custom overlay style</td>\n<td><em>object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>close-on-popstate</td>\n<td>Whether to close when popstate</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>close-on-click-overlay</td>\n<td>Whether to close when overlay is clicked</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>lazy-render</td>\n<td>Whether to lazy render util appeared</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>lock-scroll</td>\n<td>Whether to lock background scroll</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>allow-html</td>\n<td>Whether to allow HTML rendering in message</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>before-close</td>\n<td>Callback function before close</td>\n<td><em>(action: string) =&gt; boolean | Promise&lt;boolean&gt;</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>transition</td>\n<td>Transition, equivalent to <code>name</code> prop of <a href="https://vuejs.org/api/built-in-components.html#transition" target="_blank">transition</a></td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>teleport</td>\n<td>Specifies a target element where Dialog will be mounted</td>\n<td><em>string | Element</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3>\n<table>\n<thead>\n<tr>\n<th>Event</th>\n<th>Description</th>\n<th>Parameters</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>confirm</td>\n<td>Emitted when the confirm button is clicked</td>\n<td>-</td>\n</tr>\n<tr>\n<td>cancel</td>\n<td>Emitted when the cancel button is clicked</td>\n<td>-</td>\n</tr>\n<tr>\n<td>open</td>\n<td>Emitted when opening Dialog</td>\n<td>-</td>\n</tr>\n<tr>\n<td>close</td>\n<td>Emitted when closing Dialog</td>\n<td>-</td>\n</tr>\n<tr>\n<td>opened</td>\n<td>Emitted when Dialog is opened</td>\n<td>-</td>\n</tr>\n<tr>\n<td>closed</td>\n<td>Emitted when Dialog is closed</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>default</td>\n<td>Custom message</td>\n</tr>\n<tr>\n<td>title</td>\n<td>Custom title</td>\n</tr>\n<tr>\n<td>footer</td>\n<td>Custom footer</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="types" tabindex="-1">Types</h3>\n<p>The component exports the following type definitions:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> {\n  <span class="hljs-title class_">DialogProps</span>,\n  <span class="hljs-title class_">DialogTheme</span>,\n  <span class="hljs-title class_">DialogMessage</span>,\n  <span class="hljs-title class_">DialogOptions</span>,\n  <span class="hljs-title class_">DialogMessageAlign</span>,\n} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n</code></pre>\n</div><h2 id="theming" tabindex="-1">Theming</h2>\n<div class="van-doc-card"><h3 id="css-variables" tabindex="-1">CSS Variables</h3>\n<p>The component provides the following CSS variables, which can be used to customize styles. Please refer to <a href="#/en-US/config-provider" target="_blank">ConfigProvider component</a>.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Default Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>--van-dialog-width</td>\n<td><em>320px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-small-screen-width</td>\n<td><em>90%</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-font-size</td>\n<td><em>var(--van-font-size-lg)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-transition</td>\n<td><em>var(--van-duration-base)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-radius</td>\n<td><em>16px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-background</td>\n<td><em>var(--van-background-2)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-header-font-weight</td>\n<td><em>var(--van-font-bold)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-header-line-height</td>\n<td><em>24px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-header-padding-top</td>\n<td><em>26px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-header-isolated-padding</td>\n<td><em>var(--van-padding-lg) 0</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-message-padding</td>\n<td><em>var(--van-padding-lg)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-message-font-size</td>\n<td><em>var(--van-font-size-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-message-line-height</td>\n<td><em>var(--van-line-height-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-message-max-height</td>\n<td><em>60vh</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-has-title-message-text-color</td>\n<td><em>var(--van-gray-7)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-has-title-message-padding-top</td>\n<td><em>var(--van-padding-xs)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-button-height</td>\n<td><em>48px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-round-button-height</td>\n<td><em>36px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-dialog-confirm-button-text-color</td>\n<td><em>var(--van-primary-color)</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div>'},null,8,d))}}}]);