modal.nvue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <view class="u-page">
  3. <u-navbar
  4. title="模态框"
  5. @leftClick="navigateBack"
  6. safeAreaInsetTop
  7. fixed
  8. placeholder
  9. ></u-navbar>
  10. <u-gap
  11. height="20"
  12. bgColor="#fff"
  13. ></u-gap>
  14. <u-cell-group>
  15. <u-cell
  16. @click="showModal(index)"
  17. :title="item.title"
  18. v-for="(item, index) in list"
  19. :key="index"
  20. isLink
  21. >
  22. <image
  23. slot="icon"
  24. class="u-cell-icon"
  25. :src="item.iconUrl"
  26. mode="widthFix"
  27. ></image>
  28. </u-cell>
  29. </u-cell-group>
  30. <u-modal
  31. :content="content"
  32. title="标题"
  33. :show="show1"
  34. @confirm="() => show1 = false"
  35. ></u-modal>
  36. <u-modal
  37. :content="content"
  38. :show="show2"
  39. @confirm="() => show2 = false"
  40. ></u-modal>
  41. <u-modal
  42. :content="content"
  43. :show="show3"
  44. showCancelButton
  45. closeOnClickOverlay
  46. @confirm="confirm"
  47. @cancel="cancel"
  48. @close="close"
  49. ></u-modal>
  50. <u-modal
  51. :content="content"
  52. :show="show4"
  53. showCancelButton
  54. asyncClose
  55. @confirm="confirm4"
  56. @cancel="() => show4 = false"
  57. ></u-modal>
  58. <u-modal
  59. :content="content"
  60. :show="show5"
  61. showCancelButton
  62. buttonReverse
  63. @confirm="() => show5 = false"
  64. @cancel="() => show5 = false"
  65. ></u-modal>
  66. <u-modal
  67. :content="content"
  68. title="标题"
  69. :show="show6"
  70. closeOnClickOverlay
  71. @confirm="() => show6 = false"
  72. @close="() => show6 = false"
  73. ></u-modal>
  74. <u-modal
  75. title="利剑出鞘,一统江湖"
  76. :show="show7"
  77. closeOnClickOverlay
  78. @confirm="() => show7 = false"
  79. >
  80. <image
  81. style="width: 80px;height: 80px;"
  82. src="/static/uview/common/logo.png"
  83. ></image>
  84. </u-modal>
  85. <u-modal
  86. title="标题"
  87. :show="show8"
  88. :content="content"
  89. closeOnClickOverlay
  90. showCancelButton
  91. >
  92. <u-button
  93. slot="confirmButton"
  94. text="确定"
  95. type="success"
  96. shape="circle"
  97. @click="show8 = false"
  98. ></u-button>
  99. </u-modal>
  100. <u-modal
  101. :content="content"
  102. title="标题"
  103. :show="show9"
  104. :zoom="false"
  105. @confirm="() => show9 = false"
  106. ></u-modal>
  107. </view>
  108. </template>
  109. <script>
  110. export default {
  111. data() {
  112. return {
  113. content: '模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作',
  114. show1: false,
  115. show2: false,
  116. show3: false,
  117. show4: false,
  118. show5: false,
  119. show6: false,
  120. show7: false,
  121. show8: false,
  122. show9: false,
  123. list: [{
  124. title: '基础使用',
  125. iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/4.png'
  126. },
  127. {
  128. title: '无标题',
  129. iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/5.png'
  130. },
  131. {
  132. title: '带取消按钮',
  133. iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/2.png'
  134. },
  135. {
  136. title: '异步关闭',
  137. iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/6.png'
  138. },
  139. {
  140. title: '对调取消和确认按钮',
  141. iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/3.png'
  142. },
  143. {
  144. title: '允许点击遮罩关闭',
  145. iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/7.png'
  146. },
  147. {
  148. title: '传入slot',
  149. iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/1.png'
  150. },
  151. {
  152. title: '自定义按钮',
  153. iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/8.png'
  154. },
  155. {
  156. title: '淡入淡出动画',
  157. iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/9.png'
  158. }
  159. ]
  160. }
  161. },
  162. methods: {
  163. showModal(index) {
  164. this[`show${index + 1}`] = true
  165. },
  166. navigateBack() {
  167. uni.navigateBack()
  168. },
  169. confirm4() {
  170. setTimeout(() => {
  171. this.show4 = false
  172. }, 2000)
  173. },
  174. confirm() {
  175. this.show3 = false
  176. console.log('confirm');
  177. },
  178. cancel() {
  179. this.show3 = false
  180. console.log('cancel');
  181. },
  182. close() {
  183. this.show3 = false
  184. console.log('close');
  185. }
  186. }
  187. }
  188. </script>
  189. <style lang="scss">
  190. .u-page {
  191. padding: 0;
  192. }
  193. </style>