overlay.nvue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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-cell
  11. :titleStyle="{fontWeight: 500}"
  12. @click="openMask(index)"
  13. :title="item.title"
  14. v-for="(item, index) in list"
  15. :key="index"
  16. isLink
  17. >
  18. <image
  19. slot="icon"
  20. class="u-cell-icon"
  21. :src="item.iconUrl"
  22. mode="widthFix"
  23. ></image>
  24. </u-cell>
  25. <u-overlay
  26. :show="show"
  27. @click="show = !show"
  28. ></u-overlay>
  29. <u-overlay
  30. :show="showSlot"
  31. @click="showSlot = !showSlot"
  32. >
  33. <view class="overlay-wrap">
  34. <view class="overlay-wrap__box"></view>
  35. </view>
  36. </u-overlay>
  37. <u-overlay
  38. opacity=".85"
  39. :show="showOpcatiy"
  40. @click="showOpcatiy = !showOpcatiy"
  41. >
  42. </u-overlay>
  43. </view>
  44. </template>
  45. <script>
  46. export default {
  47. data() {
  48. return {
  49. show: false,
  50. showSlot: false,
  51. showOpcatiy: false,
  52. list: [{
  53. title: '基本案列',
  54. iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/baseCases.png'
  55. },
  56. {
  57. title: '嵌入内容',
  58. iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/embeddedContent.png'
  59. },
  60. {
  61. title: '设置透明度',
  62. iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/setTransparency.png'
  63. },
  64. ]
  65. }
  66. },
  67. methods: {
  68. openMask(indexNum) {
  69. if (indexNum == 0) {
  70. this.show = !this.show;
  71. } else if (indexNum == 1) {
  72. this.showSlot = !this.showSlot
  73. } else if (indexNum == 2) {
  74. this.showOpcatiy = !this.showOpcatiy
  75. }
  76. },
  77. navigateBack() {
  78. uni.navigateBack()
  79. }
  80. }
  81. }
  82. </script>
  83. <style lang="scss">
  84. .u-page {
  85. padding: 0;
  86. }
  87. .overlay-wrap {
  88. @include flex;
  89. justify-content: center;
  90. align-items: center;
  91. flex: 1;
  92. &__box {
  93. width: 200rpx;
  94. height: 200rpx;
  95. background-color: #70e1f5;
  96. }
  97. }
  98. </style>