AI营销辅助 普强使用
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-top-tips.vue 2.7 KiB

2 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <view class="u-tips" :class="['u-' + type, isShow ? 'u-tip-show' : '']" :style="{
  3. top: navbarHeight + 'px',
  4. zIndex: uZIndex
  5. }">{{ title }}</view>
  6. </template>
  7. <script>
  8. /**
  9. * topTips 顶部提示
  10. * @description 该组件一般用于页面顶部向下滑出一个提示,尔后自动收起的场景。
  11. * @tutorial https://www.uviewui.com/components/topTips.html
  12. * @property {String Number} navbar-height 导航栏高度(包含状态栏高度在内),单位PX
  13. * @property {String Number} z-index z-index值(默认975)
  14. * @example <u-top-tips ref="uTips"></u-top-tips>
  15. */
  16. export default {
  17. name: "u-top-tips",
  18. props: {
  19. // 导航栏高度,用于提示的初始化
  20. navbarHeight: {
  21. type: [Number, String],
  22. // #ifndef H5
  23. default: 0,
  24. // #endif
  25. // #ifdef H5
  26. default: 44,
  27. // #endif
  28. },
  29. // z-index值
  30. zIndex: {
  31. type: [Number, String],
  32. default: ''
  33. }
  34. },
  35. data() {
  36. return {
  37. timer: null, // 定时器
  38. isShow: false, // 是否显示消息组件
  39. title: '', // 组件中显示的消息内容
  40. type: 'primary', // 消息的类型(颜色不同),primary,success,error,warning,info
  41. duration: 2000, // 组件显示的时间,单位为毫秒
  42. };
  43. },
  44. computed: {
  45. uZIndex() {
  46. return this.zIndex ? this.zIndex : this.$u.zIndex.topTips;
  47. }
  48. },
  49. methods: {
  50. show(config = {}) {
  51. // 先清除定时器(可能是上一次定义的,需要清除了再开始新的)
  52. clearTimeout(this.timer);
  53. // 时间,内容,类型主题(type)等参数
  54. if (config.duration) this.duration = config.duration;
  55. if (config.type) this.type = config.type;
  56. this.title = config.title;
  57. this.isShow = true;
  58. // 倒计时
  59. this.timer = setTimeout(() => {
  60. this.isShow = false;
  61. clearTimeout(this.timer);
  62. this.timer = null;
  63. }, this.duration);
  64. }
  65. }
  66. };
  67. </script>
  68. <style lang="scss" scoped>
  69. @import "../../libs/css/style.components.scss";
  70. view {
  71. box-sizing: border-box;
  72. }
  73. // 顶部弹出类型样式
  74. .u-tips {
  75. width: 100%;
  76. position: fixed;
  77. z-index: 1;
  78. padding: 20rpx 30rpx;
  79. color: #FFFFFF;
  80. font-size: 28rpx;
  81. left: 0;
  82. right: 0;
  83. display: flex;
  84. align-items: center;
  85. justify-content: center;
  86. opacity: 0;
  87. // 此处为最核心点,translateY(-100%)意味着将其从Y轴隐藏(隐藏到顶部(h5)或者说导航栏(app)下面)
  88. transform: translateY(-100%);
  89. transition: all 0.35s linear;
  90. }
  91. .u-tip-show {
  92. transform: translateY(0);
  93. opacity: 1;
  94. z-index: 99;
  95. }
  96. .u-primary {
  97. background: $u-type-primary;
  98. }
  99. .u-success {
  100. background: $u-type-success;
  101. }
  102. .u-warning {
  103. background: $u-type-warning;
  104. }
  105. .u-error {
  106. background: $u-type-error;
  107. }
  108. .u-info {
  109. background: $u-type-info;
  110. }
  111. </style>