toast.nvue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="u-page">
  3. <u-gap
  4. height="30"
  5. bgColor="#fff"
  6. ></u-gap>
  7. <u-toast ref="uToast"></u-toast>
  8. <u-cell-group title-bg-color="rgb(243, 244, 246)">
  9. <u-cell
  10. :titleStyle="{fontWeight: 500}"
  11. :title="item.title"
  12. v-for="(item, index) in list"
  13. :key="index"
  14. isLink
  15. :icon="item.iconUrl"
  16. @click="showToast(item)"
  17. >
  18. <!-- <image
  19. slot="icon"
  20. class="u-cell-icon"
  21. :src="getIcon(item.icon)"
  22. mode="widthFix"
  23. ></image> -->
  24. </u-cell>
  25. </u-cell-group>
  26. </view>
  27. </template>
  28. <script>
  29. export default {
  30. data() {
  31. return {
  32. show: false,
  33. list: [{
  34. type: 'default',
  35. title: '默认主题',
  36. message: "锦瑟无端五十弦",
  37. iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
  38. },
  39. {
  40. type: 'error',
  41. icon: false,
  42. title: '失败主题',
  43. message: "一弦一柱思华年",
  44. iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
  45. },
  46. {
  47. type: 'success',
  48. title: '成功主题(带图标)',
  49. message: "庄生晓梦迷蝴蝶",
  50. iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
  51. },
  52. {
  53. type: 'warning',
  54. position: "top",
  55. title: '位置偏移上方',
  56. message: "望帝春心托杜鹃",
  57. iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png'
  58. },
  59. {
  60. type: 'loading',
  61. title: '正在加载',
  62. message: "正在加载",
  63. iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
  64. },
  65. {
  66. type: 'default',
  67. title: '结束后跳转标签页',
  68. message: "此情可待成追忆",
  69. url: '/pages/componentsB/tag/tag',
  70. iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
  71. }
  72. ],
  73. }
  74. },
  75. computed: {
  76. getIcon() {
  77. return path => {
  78. return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
  79. }
  80. },
  81. },
  82. methods: {
  83. showToast(params) {
  84. this.$refs.uToast.show({
  85. ...params,
  86. complete() {
  87. params.url && uni.navigateTo({
  88. url: params.url
  89. })
  90. }
  91. })
  92. }
  93. }
  94. }
  95. </script>
  96. <style lang="scss">
  97. .u-page {
  98. padding: 0;
  99. }
  100. .u-cell-icon {
  101. width: 36rpx;
  102. height: 36rpx;
  103. margin-right: 8rpx;
  104. }
  105. .u-cell-group__title__text {
  106. font-weight: bold;
  107. }
  108. </style>