popup.nvue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <view>
  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. :titleStyle="{fontWeight: 500}"
  17. @click="openPopup(item.popupData)"
  18. :title="item.title"
  19. v-for="(item, index) in list"
  20. :key="index"
  21. isLink
  22. >
  23. <image
  24. slot="icon"
  25. class="u-cell-icon"
  26. :src="item.iconUrl"
  27. mode="widthFix"
  28. ></image>
  29. </u-cell>
  30. </u-cell-group>
  31. <u-popup
  32. :safeAreaInsetBottom="true"
  33. :safeAreaInsetTop="true"
  34. :mode="popupData.mode"
  35. :show="show"
  36. :round="popupData.round"
  37. :overlay="popupData.overlay"
  38. :borderRadius="popupData.borderRadius"
  39. :closeable="popupData.closeable"
  40. :closeOnClickOverlay="popupData.closeOnClickOverlay"
  41. @close="close"
  42. @open="open"
  43. >
  44. <view
  45. class="u-popup-slot"
  46. :style="{
  47. width: ['bottom', 'top'].includes(popupData.mode) ? '750rpx' : '200px',
  48. marginTop: ['left', 'right'].includes(popupData.mode) ? '480rpx' : '0',
  49. }"
  50. >
  51. <u-button
  52. type="success"
  53. text="点我关闭"
  54. customStyle="width: 200rpx"
  55. @click="show = !show"
  56. ></u-button>
  57. </view>
  58. </u-popup>
  59. </view>
  60. </template>
  61. <script>
  62. export default {
  63. data() {
  64. return {
  65. show: false,
  66. popupData: {
  67. overlay: true,
  68. mode: 'bottom',
  69. borderRadius: '',
  70. closeable: true,
  71. closeOnClickOverlay: true
  72. },
  73. list: [{
  74. popupData: {
  75. overlay: true,
  76. mode: 'top',
  77. closeOnClickOverlay: true
  78. },
  79. title: '顶部弹出',
  80. iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeTop.png'
  81. },
  82. {
  83. popupData: {
  84. overlay: true,
  85. mode: 'right',
  86. closeOnClickOverlay: true
  87. },
  88. title: '右侧弹出',
  89. iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeRight.png'
  90. },
  91. {
  92. popupData: {
  93. overlay: true,
  94. mode: 'bottom',
  95. closeOnClickOverlay: true
  96. },
  97. title: '底部弹出',
  98. iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeBottom.png'
  99. },
  100. {
  101. popupData: {
  102. overlay: true,
  103. mode: 'left',
  104. closeOnClickOverlay: true
  105. },
  106. title: '左侧弹出',
  107. iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeLeft.png'
  108. },
  109. {
  110. popupData: {
  111. overlay: true,
  112. mode: 'center',
  113. round: 10,
  114. closeOnClickOverlay: true
  115. },
  116. title: '居中弹出',
  117. iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeCenter.png'
  118. },
  119. {
  120. popupData: {
  121. overlay: true,
  122. mode: 'bottom',
  123. round: 10,
  124. closeOnClickOverlay: true
  125. },
  126. title: '显示圆角',
  127. iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showRadis.png'
  128. },
  129. {
  130. popupData: {
  131. overlay: true,
  132. mode: 'bottom',
  133. closeable: false,
  134. closeOnClickOverlay: false
  135. },
  136. title: '禁止点击遮罩关闭',
  137. iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/noClose.png'
  138. },
  139. {
  140. popupData: {
  141. overlay: true,
  142. mode: 'bottom',
  143. closeable: true,
  144. closeOnClickOverlay: true
  145. },
  146. title: '显示关闭按钮',
  147. iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showCloseBtn.png'
  148. }
  149. ]
  150. }
  151. },
  152. methods: {
  153. openPopup(popupData) {
  154. this.popupData = popupData
  155. uni.$u.sleep().then(() => {
  156. this.show = !this.show
  157. })
  158. },
  159. navigateBack() {
  160. uni.navigateBack()
  161. },
  162. open() {
  163. // console.log('open');
  164. },
  165. close() {
  166. this.show = false
  167. // console.log('close');
  168. }
  169. }
  170. }
  171. </script>
  172. <style lang="scss">
  173. .u-popup-slot {
  174. width: 200px;
  175. height: 150px;
  176. @include flex;
  177. justify-content: center;
  178. align-items: center;
  179. }
  180. </style>