popupNews.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <view @click="close" class="mask">
  3. <uni-popup ref="popup" type="dialog" :maskClass="maskClass">
  4. <uni-popup-dialog type="info" mode="base" content="确定全部消息已读吗?" :duration="2000" :before-close="true" @close="close"
  5. @confirm="confirm"></uni-popup-dialog>
  6. </uni-popup>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. data(){
  12. return {
  13. maskClass:{
  14. position: 'fixed',
  15. bottom: 0,
  16. top: 0,
  17. left: 0,
  18. right: 0,
  19. }
  20. }
  21. },
  22. onReady() {
  23. this.$refs.popup.open()
  24. },
  25. methods: {
  26. confirm() {
  27. uni.$emit("readAll")
  28. },
  29. close() {
  30. uni.navigateBack()
  31. }
  32. }
  33. }
  34. </script>
  35. <style>
  36. page {
  37. background: transparent;
  38. }
  39. .mask {
  40. position: fixed;
  41. left: 0;
  42. top: 0;
  43. right: 0;
  44. bottom: 0;
  45. /* #ifndef APP-NVUE */
  46. display: flex;
  47. /* #endif */
  48. justify-content: center;
  49. align-items: center;
  50. background-color: rgba(0, 0, 0, 0.4);
  51. }
  52. .content {
  53. width: 200px;
  54. height: 200px;
  55. background-color: #007AFF;
  56. }
  57. .text {
  58. /* #ifndef APP-NVUE */
  59. display: block;
  60. /* #endif */
  61. line-height: 200px;
  62. text-align: center;
  63. color: #FFFFFF;
  64. }
  65. </style>