1# dialog<a name="ZH-CN_TOPIC_0000001209210697"></a> 2 3自定义弹窗容器。 4 5## 权限列表<a name="zh-cn_topic_0000001173324657_section11257113618419"></a> 6 7无 8 9## 子组件<a name="zh-cn_topic_0000001173324657_section9288143101012"></a> 10 11支持单个子组件。 12 13## 属性<a name="zh-cn_topic_0000001173324657_section2907183951110"></a> 14 15除支持[通用属性](js-components-common-attributes.md)外，支持如下属性： 16 17<a name="zh-cn_topic_0000001173324657_tb330011ff53049a69f27cec012adf8c1"></a> 18<table><thead align="left"><tr id="zh-cn_topic_0000001173324657_r4301f3a3b24c499c9bfc42b76ab785f9"><th class="cellrowborder" valign="top" width="19.598040195980403%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173324657_a9ba8c579217b4b8b841b035f1d28b20e"><a name="zh-cn_topic_0000001173324657_a9ba8c579217b4b8b841b035f1d28b20e"></a><a name="zh-cn_topic_0000001173324657_a9ba8c579217b4b8b841b035f1d28b20e"></a>名称</p> 19</th> 20<th class="cellrowborder" valign="top" width="11.178882111788822%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173324657_a633002333b024497914a4b172446f14e"><a name="zh-cn_topic_0000001173324657_a633002333b024497914a4b172446f14e"></a><a name="zh-cn_topic_0000001173324657_a633002333b024497914a4b172446f14e"></a>类型</p> 21</th> 22<th class="cellrowborder" valign="top" width="9.899010098990102%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173324657_a4950f7884c6540b9ad523ac34657d952"><a name="zh-cn_topic_0000001173324657_a4950f7884c6540b9ad523ac34657d952"></a><a name="zh-cn_topic_0000001173324657_a4950f7884c6540b9ad523ac34657d952"></a>默认值</p> 23</th> 24<th class="cellrowborder" valign="top" width="7.56924307569243%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173324657_p58189597166"><a name="zh-cn_topic_0000001173324657_p58189597166"></a><a name="zh-cn_topic_0000001173324657_p58189597166"></a>必填</p> 25</th> 26<th class="cellrowborder" valign="top" width="51.754824517548236%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173324657_a1313564aa9404a338447087d5918c17d"><a name="zh-cn_topic_0000001173324657_a1313564aa9404a338447087d5918c17d"></a><a name="zh-cn_topic_0000001173324657_a1313564aa9404a338447087d5918c17d"></a>描述</p> 27</th> 28</tr> 29</thead> 30<tbody><tr id="zh-cn_topic_0000001173324657_r06a481428e8d455fba919d3d4618be31"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324657_adb8a73146d764f2aab50fc046169ab26"><a name="zh-cn_topic_0000001173324657_adb8a73146d764f2aab50fc046169ab26"></a><a name="zh-cn_topic_0000001173324657_adb8a73146d764f2aab50fc046169ab26"></a>dragable<sup id="zh-cn_topic_0000001173324657_sup999420218191"><a name="zh-cn_topic_0000001173324657_sup999420218191"></a><a name="zh-cn_topic_0000001173324657_sup999420218191"></a><span>7+</span></sup></p> 31</td> 32<td class="cellrowborder" valign="top" width="11.178882111788822%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324657_a06898db2627246f78e85d4fbadeee85c"><a name="zh-cn_topic_0000001173324657_a06898db2627246f78e85d4fbadeee85c"></a><a name="zh-cn_topic_0000001173324657_a06898db2627246f78e85d4fbadeee85c"></a>boolean</p> 33</td> 34<td class="cellrowborder" valign="top" width="9.899010098990102%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324657_ae685ead324a647bcba1bbb45c9402dd6"><a name="zh-cn_topic_0000001173324657_ae685ead324a647bcba1bbb45c9402dd6"></a><a name="zh-cn_topic_0000001173324657_ae685ead324a647bcba1bbb45c9402dd6"></a>false</p> 35</td> 36<td class="cellrowborder" valign="top" width="7.56924307569243%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324657_p78183594166"><a name="zh-cn_topic_0000001173324657_p78183594166"></a><a name="zh-cn_topic_0000001173324657_p78183594166"></a>否</p> 37</td> 38<td class="cellrowborder" valign="top" width="51.754824517548236%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324657_a692121725a9b4ebbae65cd22b94b672e"><a name="zh-cn_topic_0000001173324657_a692121725a9b4ebbae65cd22b94b672e"></a><a name="zh-cn_topic_0000001173324657_a692121725a9b4ebbae65cd22b94b672e"></a>设置对话框是否支持拖拽。</p> 39</td> 40</tr> 41</tbody> 42</table> 43 44> **说明：** 45>- 弹窗类组件不支持focusable、click-effect属性。 46 47## 样式<a name="zh-cn_topic_0000001173324657_section5775351116"></a> 48 49仅支持[通用样式](js-components-common-styles.md)中的width、height、margin、margin-\[left|top|right|bottom\]、margin-\[start|end\]样式。 50 51## 事件<a name="zh-cn_topic_0000001173324657_section8562129182916"></a> 52 53不支持[通用事件](js-components-common-events.md)，仅支持如下事件： 54 55<a name="zh-cn_topic_0000001173324657_table20562102982910"></a> 56<table><thead align="left"><tr id="zh-cn_topic_0000001173324657_row9562162932910"><th class="cellrowborder" valign="top" width="18.459999999999997%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173324657_p195626291296"><a name="zh-cn_topic_0000001173324657_p195626291296"></a><a name="zh-cn_topic_0000001173324657_p195626291296"></a>名称</p> 57</th> 58<th class="cellrowborder" valign="top" width="30.769999999999996%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173324657_p185622029202914"><a name="zh-cn_topic_0000001173324657_p185622029202914"></a><a name="zh-cn_topic_0000001173324657_p185622029202914"></a>参数</p> 59</th> 60<th class="cellrowborder" valign="top" width="50.77%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173324657_p9562132915297"><a name="zh-cn_topic_0000001173324657_p9562132915297"></a><a name="zh-cn_topic_0000001173324657_p9562132915297"></a>描述</p> 61</th> 62</tr> 63</thead> 64<tbody><tr id="zh-cn_topic_0000001173324657_row7562729142911"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324657_p145622291299"><a name="zh-cn_topic_0000001173324657_p145622291299"></a><a name="zh-cn_topic_0000001173324657_p145622291299"></a>cancel</p> 65</td> 66<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324657_p356210295295"><a name="zh-cn_topic_0000001173324657_p356210295295"></a><a name="zh-cn_topic_0000001173324657_p356210295295"></a>-</p> 67</td> 68<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324657_p55621629122916"><a name="zh-cn_topic_0000001173324657_p55621629122916"></a><a name="zh-cn_topic_0000001173324657_p55621629122916"></a>用户点击非dialog区域触发取消弹窗时触发的事件。</p> 69</td> 70</tr> 71<tr id="zh-cn_topic_0000001173324657_row154462392615"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324657_p84461834266"><a name="zh-cn_topic_0000001173324657_p84461834266"></a><a name="zh-cn_topic_0000001173324657_p84461834266"></a>show<sup id="zh-cn_topic_0000001173324657_sup2397204717198"><a name="zh-cn_topic_0000001173324657_sup2397204717198"></a><a name="zh-cn_topic_0000001173324657_sup2397204717198"></a><span>7+</span></sup></p> 72</td> 73<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324657_p164468315263"><a name="zh-cn_topic_0000001173324657_p164468315263"></a><a name="zh-cn_topic_0000001173324657_p164468315263"></a>-</p> 74</td> 75<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324657_p204465311269"><a name="zh-cn_topic_0000001173324657_p204465311269"></a><a name="zh-cn_topic_0000001173324657_p204465311269"></a>对话框弹出时触发该事件。</p> 76</td> 77</tr> 78<tr id="zh-cn_topic_0000001173324657_row28470175299"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324657_p2848161792917"><a name="zh-cn_topic_0000001173324657_p2848161792917"></a><a name="zh-cn_topic_0000001173324657_p2848161792917"></a>close<sup id="zh-cn_topic_0000001173324657_sup4231174871918"><a name="zh-cn_topic_0000001173324657_sup4231174871918"></a><a name="zh-cn_topic_0000001173324657_sup4231174871918"></a><span>7+</span></sup></p> 79</td> 80<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324657_p128481917132913"><a name="zh-cn_topic_0000001173324657_p128481917132913"></a><a name="zh-cn_topic_0000001173324657_p128481917132913"></a>-</p> 81</td> 82<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324657_p5848121742920"><a name="zh-cn_topic_0000001173324657_p5848121742920"></a><a name="zh-cn_topic_0000001173324657_p5848121742920"></a>对话框关闭时触发该事件。</p> 83</td> 84</tr> 85</tbody> 86</table> 87 88## 方法<a name="zh-cn_topic_0000001173324657_section11753103216253"></a> 89 90不支持[通用方法](js-components-common-methods.md)，仅支持如下方法。 91 92<a name="zh-cn_topic_0000001173324657_table20753173210251"></a> 93<table><thead align="left"><tr id="zh-cn_topic_0000001173324657_row575363214257"><th class="cellrowborder" valign="top" width="18.459999999999997%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173324657_p157531032112517"><a name="zh-cn_topic_0000001173324657_p157531032112517"></a><a name="zh-cn_topic_0000001173324657_p157531032112517"></a>名称</p> 94</th> 95<th class="cellrowborder" valign="top" width="30.769999999999996%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173324657_p77531632132518"><a name="zh-cn_topic_0000001173324657_p77531632132518"></a><a name="zh-cn_topic_0000001173324657_p77531632132518"></a>参数</p> 96</th> 97<th class="cellrowborder" valign="top" width="50.77%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173324657_p147531232132512"><a name="zh-cn_topic_0000001173324657_p147531232132512"></a><a name="zh-cn_topic_0000001173324657_p147531232132512"></a>描述</p> 98</th> 99</tr> 100</thead> 101<tbody><tr id="zh-cn_topic_0000001173324657_row15753113210251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324657_p2314135812511"><a name="zh-cn_topic_0000001173324657_p2314135812511"></a><a name="zh-cn_topic_0000001173324657_p2314135812511"></a>show</p> 102</td> 103<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324657_p7314115819256"><a name="zh-cn_topic_0000001173324657_p7314115819256"></a><a name="zh-cn_topic_0000001173324657_p7314115819256"></a>-</p> 104</td> 105<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324657_p0314958162512"><a name="zh-cn_topic_0000001173324657_p0314958162512"></a><a name="zh-cn_topic_0000001173324657_p0314958162512"></a>弹出对话框。</p> 106</td> 107</tr> 108<tr id="zh-cn_topic_0000001173324657_row393410526251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324657_p7314358182512"><a name="zh-cn_topic_0000001173324657_p7314358182512"></a><a name="zh-cn_topic_0000001173324657_p7314358182512"></a>close</p> 109</td> 110<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324657_p1231455814253"><a name="zh-cn_topic_0000001173324657_p1231455814253"></a><a name="zh-cn_topic_0000001173324657_p1231455814253"></a>-</p> 111</td> 112<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324657_p10314105842512"><a name="zh-cn_topic_0000001173324657_p10314105842512"></a><a name="zh-cn_topic_0000001173324657_p10314105842512"></a>关闭对话框。</p> 113</td> 114</tr> 115</tbody> 116</table> 117 118> **说明：** 119>dialog属性、样式均不支持动态更新。 120 121## 示例<a name="zh-cn_topic_0000001173324657_section6663311114620"></a> 122 123``` 124<!-- xxx.hml --> 125<div class="doc-page"> 126 <div class="btn-div"> 127 <button type="capsule" value="Click here" class="btn" onclick="showDialog"></button> 128 </div> 129 <dialog id="simpledialog" class="dialog-main" oncancel="cancelDialog"> 130 <div class="dialog-div"> 131 <div class="inner-txt"> 132 <text class="txt">Simple dialog</text> 133 </div> 134 <div class="inner-btn"> 135 <button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button> 136 <button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button> 137 </div> 138 </div> 139 </dialog> 140</div> 141``` 142 143``` 144/* xxx.css */ 145.doc-page { 146 flex-direction: column; 147 justify-content: center; 148 align-items: center; 149} 150.btn-div { 151 width: 100%; 152 height: 200px; 153 flex-direction: column; 154 align-items: center; 155 justify-content: center; 156} 157.btn { 158 background-color: #F2F2F2; 159 text-color: #0D81F2; 160} 161.txt { 162 color: #000000; 163 font-weight: bold; 164 font-size: 39px; 165} 166.dialog-main { 167 width: 500px; 168} 169.dialog-div { 170 flex-direction: column; 171 align-items: center; 172} 173.inner-txt { 174 width: 400px; 175 height: 160px; 176 flex-direction: column; 177 align-items: center; 178 justify-content: space-around; 179} 180.inner-btn { 181 width: 400px; 182 height: 120px; 183 justify-content: space-around; 184 align-items: center; 185} 186.btn-txt { 187 background-color: #F2F2F2; 188 text-color: #0D81F2; 189} 190``` 191 192``` 193// xxx.js 194import prompt from '@system.prompt'; 195 196export default { 197 showDialog(e) { 198 this.$element('simpledialog').show() 199 }, 200 cancelDialog(e) { 201 prompt.showToast({ 202 message: 'Dialog cancelled' 203 }) 204 }, 205 cancelSchedule(e) { 206 this.$element('simpledialog').close() 207 prompt.showToast({ 208 message: 'Successfully cancelled' 209 }) 210 }, 211 setSchedule(e) { 212 this.$element('simpledialog').close() 213 prompt.showToast({ 214 message: 'Successfully confirmed' 215 }) 216 } 217} 218``` 219 220 221 222
