u-tabbar-item.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <view
  3. class="u-tabbar-item"
  4. :style="[$u.addStyle(customStyle)]"
  5. @tap="clickHandler"
  6. >
  7. <view class="u-tabbar-item__icon">
  8. <u-icon
  9. v-if="icon"
  10. :name="icon"
  11. :color="isActive? parentData.activeColor : parentData.inactiveColor"
  12. :size="20"
  13. ></u-icon>
  14. <template v-else>
  15. <slot
  16. v-if="isActive"
  17. name="active-icon"
  18. />
  19. <slot
  20. v-else
  21. name="inactive-icon"
  22. />
  23. </template>
  24. <u-badge
  25. absolute
  26. :offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
  27. :customStyle="badgeStyle"
  28. :isDot="dot"
  29. :value="badge || (dot ? 1 : null)"
  30. :show="dot || badge > 0"
  31. ></u-badge>
  32. </view>
  33. <slot name="text">
  34. <text
  35. class="u-tabbar-item__text"
  36. :style="{
  37. color: isActive? parentData.activeColor : parentData.inactiveColor
  38. }"
  39. >{{ text }}</text>
  40. </slot>
  41. </view>
  42. </template>
  43. <script>
  44. import props from './props.js';
  45. /**
  46. * TabbarItem 底部导航栏子组件
  47. * @description 此组件提供了自定义tabbar的能力。
  48. * @tutorial https://www.uviewui.com/components/tabbar.html
  49. * @property {String | Number} name item标签的名称,作为与u-tabbar的value参数匹配的标识符
  50. * @property {String} icon uView内置图标或者绝对路径的图片
  51. * @property {String | Number} badge 右上角的角标提示信息
  52. * @property {Boolean} dot 是否显示圆点,将会覆盖badge参数(默认 false )
  53. * @property {String} text 描述文本
  54. * @property {Object | String} badgeStyle 控制徽标的位置,对象或者字符串形式,可以设置top和right属性(默认 'top: 6px;right:2px;' )
  55. * @property {Object} customStyle 定义需要用到的外部样式
  56. *
  57. * @example <u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item></u-tabbar>
  58. */
  59. export default {
  60. name: 'u-tabbar-item',
  61. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  62. data() {
  63. return {
  64. isActive: false, // 是否处于激活状态
  65. parentData: {
  66. value: null,
  67. activeColor: '',
  68. inactiveColor: ''
  69. }
  70. }
  71. },
  72. created() {
  73. this.init()
  74. },
  75. methods: {
  76. init() {
  77. // 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环引用
  78. this.updateParentData()
  79. if (!this.parent) {
  80. uni.$u.error('u-tabbar-item必须搭配u-tabbar组件使用')
  81. }
  82. // 本子组件在u-tabbar的children数组中的索引
  83. const index = this.parent.children.indexOf(this)
  84. // 判断本组件的name(如果没有定义name,就用index索引)是否等于父组件的value参数
  85. this.isActive = (this.name || index) === this.parentData.value
  86. },
  87. updateParentData() {
  88. // 此方法在mixin中
  89. this.getParentData('u-tabbar')
  90. },
  91. // 此方法将会被父组件u-tabbar调用
  92. updateFromParent() {
  93. // 重新初始化
  94. this.init()
  95. },
  96. clickHandler() {
  97. this.$nextTick(() => {
  98. const index = this.parent.children.indexOf(this)
  99. const name = this.name || index
  100. // 点击的item为非激活的item才发出change事件
  101. if (name !== this.parent.value) {
  102. this.parent.$emit('change', name)
  103. }
  104. this.$emit('click', name)
  105. })
  106. }
  107. },
  108. }
  109. </script>
  110. <style lang="scss" scoped>
  111. @import "../../libs/css/components.scss";
  112. .u-tabbar-item {
  113. @include flex(column);
  114. align-items: center;
  115. justify-content: center;
  116. flex: 1;
  117. &__icon {
  118. @include flex;
  119. position: relative;
  120. width: 150rpx;
  121. justify-content: center;
  122. }
  123. &__text {
  124. margin-top: 2px;
  125. font-size: 12px;
  126. color: $u-content-color;
  127. }
  128. }
  129. /* #ifdef MP */
  130. // 由于小程序都使用shadow DOM形式实现,需要给影子宿主设置flex: 1才能让其撑开
  131. :host {
  132. flex: 1
  133. }
  134. /* #endif */
  135. </style>