From 659d09ec24dab6c451220c8f3bb3943b0fdb3ba1 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 08 Jan 2024 16:16:12 +0800
Subject: [PATCH] fix:地图导航
---
uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue | 142 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 142 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue b/uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue
new file mode 100644
index 0000000..8ee00cf
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue
@@ -0,0 +1,142 @@
+<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';
+ /**
+ * TabbarItem ������������������������
+ * @description ���������������������������tabbar������������
+ * @tutorial https://www.uviewui.com/components/tabbar.html
+ * @property {String | Number} name item���������������������������u-tabbar���value������������������������
+ * @property {String} icon uView���������������������������������������
+ * @property {String | Number} badge ������������������������������
+ * @property {Boolean} dot ���������������������������������badge��������������� false ���
+ * @property {String} text ������������
+ * @property {Object | String} badgeStyle ������������������������������������������������������������������top���right��������������� 'top: 6px;right:2px;' ���
+ * @property {Object} customStyle ���������������������������������
+ *
+ * @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>
+ */
+ 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() {
+ // ���������������������������provide/inject������������������������������������������������������created���������������������������
+ this.updateParentData()
+ if (!this.parent) {
+ uni.$u.error('u-tabbar-item������������u-tabbar������������')
+ }
+ // ���������������u-tabbar���children������������������
+ const index = this.parent.children.indexOf(this)
+ // ������������������name(������������������name���������index������)������������������������value������
+ this.isActive = (this.name || index) === this.parentData.value
+ },
+ updateParentData() {
+ // ������������mixin���
+ this.getParentData('u-tabbar')
+ },
+ // ���������������������������u-tabbar������
+ updateFromParent() {
+ // ���������������
+ this.init()
+ },
+ clickHandler() {
+ this.$nextTick(() => {
+ const index = this.parent.children.indexOf(this)
+ const name = this.name || index
+ // ���������item���������������item���������change������
+ 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>
--
Gitblit v1.8.0