From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue | 141 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 141 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue b/minipro_standard/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue
index e69de29..953f33a 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue
@@ -0,0 +1,141 @@
+<template>
+ <view class="u-tabbar">
+ <view
+ class="u-tabbar__content"
+ ref="u-tabbar__content"
+ @touchmove.stop.prevent="noop"
+ :class="[border && 'u-border-top', fixed && 'u-tabbar--fixed']"
+ :style="[tabbarStyle]"
+ >
+ <view class="u-tabbar__content__item-wrapper">
+ <slot />
+ </view>
+ <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
+ </view>
+ <view
+ class="u-tabbar__placeholder"
+ v-if="placeholder"
+ :style="{
+ height: placeholderHeight + 'px',
+ }"
+ ></view>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ // #ifdef APP-NVUE
+ const dom = uni.requireNativePlugin('dom')
+ // #endif
+ /**
+ * Tabbar 搴曢儴瀵艰埅鏍�
+ * @description 姝ょ粍浠舵彁渚涗簡鑷畾涔塼abbar鐨勮兘鍔涖��
+ * @tutorial https://www.uviewui.com/components/tabbar.html
+ * @property {String | Number} value 褰撳墠鍖归厤椤圭殑name
+ * @property {Boolean} safeAreaInsetBottom 鏄惁涓篿PhoneX鐣欏嚭搴曢儴瀹夊叏璺濈锛堥粯璁� true 锛�
+ * @property {Boolean} border 鏄惁鏄剧ず涓婃柟杈规锛堥粯璁� true 锛�
+ * @property {String | Number} zIndex 鍏冪礌灞傜骇z-index锛堥粯璁� 1 锛�
+ * @property {String} activeColor 閫変腑鏍囩鐨勯鑹诧紙榛樿 '#1989fa' 锛�
+ * @property {String} inactiveColor 鏈�変腑鏍囩鐨勯鑹诧紙榛樿 '#7d7e80' 锛�
+ * @property {Boolean} fixed 鏄惁鍥哄畾鍦ㄥ簳閮紙榛樿 true 锛�
+ * @property {Boolean} placeholder fixed瀹氫綅鍥哄畾鍦ㄥ簳閮ㄦ椂锛屾槸鍚︾敓鎴愪竴涓瓑楂樺厓绱犻槻姝㈠闄凤紙榛樿 true 锛�
+ * @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',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+ data() {
+ return {
+ placeholderHeight: 0
+ }
+ },
+ computed: {
+ tabbarStyle() {
+ const style = {
+ zIndex: this.zIndex
+ }
+ // 鍚堝苟鏉ヨ嚜鐖剁粍浠剁殑customStyle鏍峰紡
+ return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
+ },
+ // 鐩戝惉澶氫釜鍙傛暟鐨勫彉鍖栵紝閫氳繃鍦╟omputed鎵ц瀵瑰簲鐨勬搷浣�
+ updateChild() {
+ return [this.value, this.activeColor, this.inactiveColor]
+ },
+ updatePlaceholder() {
+ return [this.fixed, this.placeholder]
+ }
+ },
+ watch: {
+ updateChild() {
+ // 濡傛灉updateChildren涓殑鍏冪礌鍙戠敓浜嗗彉鍖栵紝鍒欐墽琛屽瓙鍏冪礌鍒濆鍖栨搷浣�
+ this.updateChildren()
+ },
+ updatePlaceholder() {
+ // 濡傛灉fixed锛宲laceholder绛夊弬鏁板彂鐢熷彉鍖栵紝閲嶆柊璁＄畻鍗犱綅鍏冪礌鐨勯珮搴�
+ this.setPlaceholderHeight()
+ }
+ },
+ created() {
+ this.children = []
+ },
+ mounted() {
+ this.setPlaceholderHeight()
+ },
+ methods: {
+ updateChildren() {
+ // 濡傛灉瀛樺湪瀛愬厓绱狅紝鍒欐墽琛屽瓙鍏冪礌鐨剈pdateFromParent杩涜鏇存柊鏁版嵁
+ this.children.length && this.children.map(child => child.updateFromParent())
+ },
+ // 璁剧疆鐢ㄤ簬闃叉濉岄櫡鍏冪礌鐨勯珮搴�
+ async setPlaceholderHeight() {
+ if (!this.fixed || !this.placeholder) return
+ // 寤舵椂涓�瀹氭椂闂�
+ await uni.$u.sleep(20)
+ // #ifndef APP-NVUE
+ this.$uGetRect('.u-tabbar__content').then(({height = 50}) => {
+ // 淇IOS safearea bottom 鏈～鍏呴珮搴�
+ this.placeholderHeight = height
+ })
+ // #endif
+
+ // #ifdef APP-NVUE
+ dom.getComponentRect(this.$refs['u-tabbar__content'], (res) => {
+ const {
+ size
+ } = res
+ this.placeholderHeight = size.height
+ })
+ // #endif
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ .u-tabbar {
+ @include flex(column);
+ flex: 1;
+ justify-content: center;
+
+ &__content {
+ @include flex(column);
+ background-color: #fff;
+
+ &__item-wrapper {
+ height: 50px;
+ @include flex(row);
+ }
+ }
+
+ &--fixed {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+ }
+</style>
--
Gitblit v1.9.3