popup.vue 906 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <view @click="close" class="mask">
  3. <view @click.stop="onClick" class="content">
  4. <text class="text">点击蒙层关闭</text>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. methods: {
  11. onClick(e) {
  12. uni.showToast({
  13. title: "点击蒙层关闭"
  14. })
  15. // #ifdef APP-NVUE
  16. e.stopPropagation()
  17. // #endif
  18. },
  19. close() {
  20. uni.navigateBack()
  21. }
  22. }
  23. }
  24. </script>
  25. <style>
  26. page {
  27. background: transparent;
  28. }
  29. .mask {
  30. position: fixed;
  31. left: 0;
  32. top: 0;
  33. right: 0;
  34. bottom: 0;
  35. /* #ifndef APP-NVUE */
  36. display: flex;
  37. /* #endif */
  38. justify-content: center;
  39. align-items: center;
  40. background-color: rgba(0, 0, 0, 0.4);
  41. }
  42. .content {
  43. width: 200px;
  44. height: 200px;
  45. background-color: #007AFF;
  46. }
  47. .text {
  48. /* #ifndef APP-NVUE */
  49. display: block;
  50. /* #endif */
  51. line-height: 200px;
  52. text-align: center;
  53. color: #FFFFFF;
  54. }
  55. </style>