index.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <uni-shadow-root class="vant-notify-index"><van-transition name="slide-down" :show="show" custom-class="van-notify__container" :custom-style="'z-index: '+(zIndex)+';'" @click.native="onTap">
  3. <view :class="'van-notify van-notify--'+(type)" :style="'background:'+(background)+';color:'+(color)+';'">
  4. <view v-if="safeAreaInsetTop" class="van-notify__safe-area"></view>
  5. <text>{{ message }}</text>
  6. </view>
  7. </van-transition></uni-shadow-root>
  8. </template>
  9. <script>
  10. import VanTransition from '../transition/index.vue'
  11. global['__wxVueOptions'] = {components:{'van-transition': VanTransition}}
  12. global['__wxRoute'] = 'vant/notify/index'
  13. import { VantComponent } from '../common/component';
  14. import { WHITE } from '../common/color';
  15. VantComponent({
  16. props: {
  17. message: String,
  18. background: String,
  19. type: {
  20. type: String,
  21. value: 'danger'
  22. },
  23. color: {
  24. type: String,
  25. value: WHITE
  26. },
  27. duration: {
  28. type: Number,
  29. value: 3000
  30. },
  31. zIndex: {
  32. type: Number,
  33. value: 110
  34. },
  35. safeAreaInsetTop: {
  36. type: Boolean,
  37. value: false
  38. }
  39. },
  40. created() {
  41. const { statusBarHeight } = wx.getSystemInfoSync();
  42. this.setData({ statusBarHeight });
  43. },
  44. methods: {
  45. showNotify() {
  46. const { duration, onOpened } = this.data;
  47. clearTimeout(this.timer);
  48. this.setData({
  49. show: true
  50. }, onOpened);
  51. if (duration > 0 && duration !== Infinity) {
  52. this.timer = setTimeout(() => {
  53. this.hide();
  54. }, duration);
  55. }
  56. },
  57. hide() {
  58. const { onClose } = this.data;
  59. clearTimeout(this.timer);
  60. this.setData({
  61. show: false
  62. }, onClose);
  63. },
  64. onTap(event) {
  65. const { onClick } = this.data;
  66. if (onClick) {
  67. onClick(event.detail);
  68. }
  69. }
  70. }
  71. });
  72. export default global['__wxComponents']['vant/notify/index']
  73. </script>
  74. <style platform="mp-weixin">
  75. @import '../common/index.css';.van-notify{text-align:center;word-wrap:break-word;padding:6px 15px;padding:var(--notify-padding,6px 15px);font-size:14px;font-size:var(--notify-font-size,14px);line-height:20px;line-height:var(--notify-line-height,20px)}.van-notify__container{position:fixed;top:0;box-sizing:border-box;width:100%}.van-notify--primary{background-color:#1989fa;background-color:var(--notify-primary-background-color,#1989fa)}.van-notify--success{background-color:#07c160;background-color:var(--notify-success-background-color,#07c160)}.van-notify--danger{background-color:#ee0a24;background-color:var(--notify-danger-background-color,#ee0a24)}.van-notify--warning{background-color:#ff976a;background-color:var(--notify-warning-background-color,#ff976a)}
  76. </style>