From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
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 姝ょ粍浠舵彁渚涗簡鑷畾涔塼abbar鐨勮兘鍔涖��
+ * @tutorial https://www.uviewui.com/components/tabbar.html
+ * @property {String | Number} name item鏍囩鐨勫悕绉帮紝浣滀负涓巙-tabbar鐨剉alue鍙傛暟鍖归厤鐨勬爣璇嗙
+ * @property {String} icon uView鍐呯疆鍥炬爣鎴栬�呯粷瀵硅矾寰勭殑鍥剧墖
+ * @property {String | Number} badge 鍙充笂瑙掔殑瑙掓爣鎻愮ず淇℃伅
+ * @property {Boolean} dot 鏄惁鏄剧ず鍦嗙偣锛屽皢浼氳鐩朾adge鍙傛暟锛堥粯璁� false 锛�
+ * @property {String} text 鎻忚堪鏂囨湰
+ * @property {Object | String} badgeStyle 鎺у埗寰芥爣鐨勪綅缃紝瀵硅薄鎴栬�呭瓧绗︿覆褰㈠紡锛屽彲浠ヨ缃畉op鍜宺ight灞炴�э紙榛樿 '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() {
+ // 鏀粯瀹濆皬绋嬪簭涓嶆敮鎸乸rovide/inject锛屾墍浠ヤ娇鐢ㄨ繖涓柟娉曡幏鍙栨暣涓埗缁勪欢锛屽湪created瀹氫箟锛岄伩鍏嶅惊鐜紩鐢�
+ this.updateParentData()
+ if (!this.parent) {
+ uni.$u.error('u-tabbar-item蹇呴』鎼厤u-tabbar缁勪欢浣跨敤')
+ }
+ // 鏈瓙缁勪欢鍦╱-tabbar鐨刢hildren鏁扮粍涓殑绱㈠紩
+ const index = this.parent.children.indexOf(this)
+ // 鍒ゆ柇鏈粍浠剁殑name(濡傛灉娌℃湁瀹氫箟name锛屽氨鐢╥ndex绱㈠紩)鏄惁绛変簬鐖剁粍浠剁殑value鍙傛暟
+ this.isActive = (this.name || index) === this.parentData.value
+ },
+ updateParentData() {
+ // 姝ゆ柟娉曞湪mixin涓�
+ this.getParentData('u-tabbar')
+ },
+ // 姝ゆ柟娉曞皢浼氳鐖剁粍浠秛-tabbar璋冪敤
+ updateFromParent() {
+ // 閲嶆柊鍒濆鍖�
+ this.init()
+ },
+ clickHandler() {
+ this.$nextTick(() => {
+ const index = this.parent.children.indexOf(this)
+ const name = this.name || index
+ // 鐐瑰嚮鐨刬tem涓洪潪婵�娲荤殑item鎵嶅彂鍑篶hange浜嬩欢
+ 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.9.3