123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <view
- class="u-tabbar-item"
- :style="[$u.addStyle(customStyle)]"
- @tap="clickHandler"
- >
- <view class="u-tabbar-item__icon">
- <u-icon
- v-if="icon"
- :name="icon"
- :color="isActive? parentData.activeColor : parentData.inactiveColor"
- :size="20"
- ></u-icon>
- <template v-else>
- <slot
- v-if="isActive"
- name="active-icon"
- />
- <slot
- v-else
- name="inactive-icon"
- />
- </template>
- <u-badge
- absolute
- :offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
- :customStyle="badgeStyle"
- :isDot="dot"
- :value="badge || (dot ? 1 : null)"
- :show="dot || badge > 0"
- ></u-badge>
- </view>
-
- <slot name="text">
- <text
- class="u-tabbar-item__text"
- :style="{
- color: isActive? parentData.activeColor : parentData.inactiveColor
- }"
- >{{ text }}</text>
- </slot>
- </view>
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name: 'u-tabbar-item',
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
- data() {
- return {
- isActive: false,
- parentData: {
- value: null,
- activeColor: '',
- inactiveColor: ''
- }
- }
- },
- created() {
- this.init()
- },
- methods: {
- init() {
-
- this.updateParentData()
- if (!this.parent) {
- uni.$u.error('u-tabbar-item必须搭配u-tabbar组件使用')
- }
-
- const index = this.parent.children.indexOf(this)
-
- this.isActive = (this.name || index) === this.parentData.value
- },
- updateParentData() {
-
- this.getParentData('u-tabbar')
- },
-
- updateFromParent() {
-
- this.init()
- },
- clickHandler() {
- this.$nextTick(() => {
- const index = this.parent.children.indexOf(this)
- const name = this.name || index
-
- if (name !== this.parent.value) {
- this.parent.$emit('change', name)
- }
- this.$emit('click', name)
- })
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- .u-tabbar-item {
- @include flex(column);
- align-items: center;
- justify-content: center;
- flex: 1;
-
- &__icon {
- @include flex;
- position: relative;
- width: 150rpx;
- justify-content: center;
- }
- &__text {
- margin-top: 2px;
- font-size: 12px;
- color: $u-content-color;
- }
- }
- /* #ifdef MP */
- // 由于小程序都使用shadow DOM形式实现,需要给影子宿主设置flex: 1才能让其撑开
- :host {
- flex: 1
- }
- /* #endif */
- </style>
|