custom-toast.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <view class="custom-toast" v-if="show">
  3. <view class="toast-icon">
  4. <uni-icons type="checkmarkempty" size="80" color="#FFF"></uni-icons>
  5. </view>
  6. <view class="toast-content">
  7. <text class="font34">{{ message }}</text>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. name: 'custom-toast',
  14. data() {
  15. return {
  16. show: false,
  17. message: ''
  18. };
  19. },
  20. methods: {
  21. showToast(msg, duration = 2000) {
  22. this.message = msg;
  23. this.show = true;
  24. setTimeout(() => {
  25. this.show = false;
  26. }, duration);
  27. }
  28. }
  29. };
  30. </script>
  31. <style scoped>
  32. .custom-toast {
  33. position: fixed;
  34. top: 50%;
  35. left: 50%;
  36. transform: translate(-50%, -50%);
  37. background-color: #fff;
  38. padding: 60rpx;
  39. border-radius: 10px;
  40. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  41. color: #333;
  42. z-index: 9999;
  43. display: flex;
  44. flex-direction: column;
  45. align-items: center;
  46. }
  47. .toast-icon {
  48. width: 100px;
  49. height: 100px;
  50. background-color: #F2D0A2;
  51. border-radius: 50%;
  52. display: flex;
  53. justify-content: center;
  54. align-items: center;
  55. margin-bottom: 10px;
  56. }
  57. .toast-icon text {
  58. font-size: 40px;
  59. color: #fff;
  60. }
  61. .toast-content {
  62. text-align: center;
  63. font-size: 32rpx;
  64. }
  65. </style>