notify.nvue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <view class="u-page">
  3. <u-gap
  4. height="30"
  5. bgColor="#fff"
  6. ></u-gap>
  7. <u-cell-group>
  8. <u-cell
  9. :titleStyle="{fontWeight: 500}"
  10. @click="openNotify(item.notifyData)"
  11. :title="item.title"
  12. v-for="(item, index) in list"
  13. :key="index"
  14. isLink
  15. >
  16. <image
  17. slot="icon"
  18. class="u-cell-icon"
  19. :src="item.iconUrl"
  20. mode="widthFix"
  21. ></image>
  22. </u-cell>
  23. </u-cell-group>
  24. <u-notify ref="uNotify"></u-notify>
  25. </view>
  26. </template>
  27. <script>
  28. export default {
  29. data() {
  30. return {
  31. show: false,
  32. notifyData: {
  33. message: 'notify顶部提示',
  34. type: 'primary',
  35. color: '#ffffff',
  36. bgColor: '',
  37. fontSize: 15,
  38. duration: 3000,
  39. },
  40. list: [{
  41. notifyData: {
  42. message: 'notify顶部提示',
  43. type: 'primary',
  44. color: '#ffffff',
  45. bgColor: '',
  46. fontSize: 15,
  47. duration: 3000
  48. },
  49. title: '主要通知',
  50. iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/main.png'
  51. }, {
  52. notifyData: {
  53. message: 'notify顶部提示',
  54. type: 'success',
  55. color: '#ffffff',
  56. bgColor: '',
  57. fontSize: 15,
  58. duration: 3000,
  59. safeAreaInsetTop: false
  60. },
  61. title: '成功通知',
  62. iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/success.png'
  63. }, {
  64. notifyData: {
  65. message: 'notify顶部提示',
  66. type: 'error',
  67. color: '#ffffff',
  68. bgColor: '',
  69. fontSize: 14,
  70. duration: 3000,
  71. safeAreaInsetTop: false
  72. },
  73. title: '危险通知',
  74. iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/error.png'
  75. }, {
  76. notifyData: {
  77. message: 'notify顶部提示',
  78. type: 'warning',
  79. color: '#ffffff',
  80. bgColor: '',
  81. fontSize: 15,
  82. duration: 3000,
  83. safeAreaInsetTop: false
  84. },
  85. title: '警告通知',
  86. iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/warning.png'
  87. },
  88. {
  89. notifyData: {
  90. message: 'notify顶部提示',
  91. color: '#fff',
  92. bgColor: '#000',
  93. fontSize: 15,
  94. duration: 3000,
  95. safeAreaInsetTop: false
  96. },
  97. title: '自定义样式',
  98. iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/customStyle.png'
  99. },
  100. {
  101. notifyData: {
  102. message: 'notify顶部提示',
  103. type: 'primary',
  104. color: '#ffffff',
  105. bgColor: '',
  106. fontSize: 15,
  107. duration: 6000,
  108. safeAreaInsetTop: false
  109. },
  110. title: '自定义时间',
  111. iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/customTime.png'
  112. },
  113. {
  114. notifyData: {
  115. message: 'notify顶部提示',
  116. color: '#fff',
  117. bgColor: '',
  118. fontSize: 15,
  119. duration: 3000,
  120. safeAreaInsetTop: true
  121. },
  122. title: '插入状态栏高度',
  123. iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/height.png'
  124. }
  125. ]
  126. }
  127. },
  128. onLoad() {},
  129. methods: {
  130. openNotify(params) {
  131. this.$refs.uNotify.show({
  132. ...params
  133. })
  134. // 也可以通过主题形式调用,如:
  135. // this.$refs.uNotify.primary('Primary主题')
  136. }
  137. }
  138. }
  139. </script>
  140. <style lang="scss">
  141. .u-page {
  142. padding: 0;
  143. }
  144. </style>