115 lines
3.7 KiB
Vue
115 lines
3.7 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="l-tabbar" :class="tabBarClass" :style="[styles]">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="fixed && placeholder" :style="{height: rootHeight + 'px'}"></view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts">
|
|||
|
|
// @ts-nocheck
|
|||
|
|
/**
|
|||
|
|
* Tabbar 底部导航栏组件
|
|||
|
|
* @description 用于实现应用底部导航功能，支持多种样式风格和交互效果
|
|||
|
|
* <br>插件类型：LTabbarComponentPublicInstance
|
|||
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-tabbar
|
|||
|
|
*
|
|||
|
|
* @property {boolean} bordered 显示外边框（默认：true）
|
|||
|
|
* @property {boolean} fixed 固定在底部（默认：true）
|
|||
|
|
* @property {boolean} safeAreaInsetBottom 适配iPhoneX底部安全区（默认：true）
|
|||
|
|
* @property {'normal' | 'round'} shape 标签栏形状（默认："normal"）
|
|||
|
|
* @value normal
|
|||
|
|
* @value round
|
|||
|
|
* @property {boolean} split 显示分割线（默认：true）
|
|||
|
|
* @property {'normal' | 'tag'} theme 选项风格（默认："normal"）
|
|||
|
|
* @value normal
|
|||
|
|
* @value tag
|
|||
|
|
* @property {string} value 当前选中值（兼容旧版）
|
|||
|
|
* @property {string} defaultValue 默认选中值（非受控属性）
|
|||
|
|
* @property {string} modelValue 当前选中值（推荐使用v-model）
|
|||
|
|
* @property {boolean} placeholder 固定时生成占位元素（默认：false）
|
|||
|
|
* @property {string} activeColor 选中项颜色（默认：主题色）
|
|||
|
|
* @property {string} color 未选中项颜色（默认："#7d7e80"）
|
|||
|
|
* @property {string} lStyle 自定义样式（CSS字符串）
|
|||
|
|
* @property {string} activeBgColor 选中项背景色
|
|||
|
|
* @property {string} bgColor 背景颜色
|
|||
|
|
* @property {number} zIndex 层级（默认：100）
|
|||
|
|
* @property {string} iconSize 图标尺寸（支持CSS单位）
|
|||
|
|
* @property {string} fontSize 文字大小（支持CSS单位）
|
|||
|
|
* @event {Function} change 选项变化时触发（返回选中值）
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { ref, defineComponent, computed, Ref, provide, toRefs, onMounted, getCurrentInstance } from '@/uni_modules/lime-shared/vue';
|
|||
|
|
import TabbarProps from './props'
|
|||
|
|
import { getRect } from '@/uni_modules/lime-shared/getRect'
|
|||
|
|
const name = `l-tabbar`
|
|||
|
|
export default defineComponent({
|
|||
|
|
// name,
|
|||
|
|
props: TabbarProps,
|
|||
|
|
emits: ['change', 'input', 'update:modelValue'],
|
|||
|
|
setup(props, { emit }) {
|
|||
|
|
const instance = getCurrentInstance()!.proxy!
|
|||
|
|
const innerValue = ref('0');
|
|||
|
|
const activeValue = computed({
|
|||
|
|
set(value: string) {
|
|||
|
|
innerValue.value = value
|
|||
|
|
emit('change', value)
|
|||
|
|
emit('update:modelValue', value)
|
|||
|
|
// #ifdef VUE2
|
|||
|
|
emit('input', value)
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
get():string {
|
|||
|
|
return props.value ?? props.modelValue ?? innerValue.value
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const defaultIndex : Ref<number> = ref(-1);
|
|||
|
|
const rootHeight = ref(0);
|
|||
|
|
const children = ref([])
|
|||
|
|
const tabBarClass = computed(() => [
|
|||
|
|
// `${name}`,
|
|||
|
|
{
|
|||
|
|
[`${name}--bordered`]: props.bordered,
|
|||
|
|
[`${name}--fixed`]: props.fixed,
|
|||
|
|
[`${name}--safe`]: props.safeAreaInsetBottom,
|
|||
|
|
},
|
|||
|
|
`${name}--${props.shape}`,
|
|||
|
|
]);
|
|||
|
|
const styles = computed(()=>{
|
|||
|
|
const style:Record<string, string> = {};
|
|||
|
|
if(props.zIndex) {
|
|||
|
|
style['z-index'] = props.zIndex!
|
|||
|
|
}
|
|||
|
|
if(props.bgColor) {
|
|||
|
|
style['background'] = props.bgColor!
|
|||
|
|
}
|
|||
|
|
return style
|
|||
|
|
})
|
|||
|
|
const updateChild = (currentValue: number | string) => {
|
|||
|
|
activeValue.value = currentValue;
|
|||
|
|
};
|
|||
|
|
onMounted(() => {
|
|||
|
|
if(!(props.placeholder && props.fixed)) return;
|
|||
|
|
|
|||
|
|
getRect(`.${name}`, instance).then(res => {
|
|||
|
|
rootHeight.value = res.height
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
provide('tab-bar', {
|
|||
|
|
...toRefs(props),
|
|||
|
|
defaultIndex,
|
|||
|
|
activeValue,
|
|||
|
|
updateChild,
|
|||
|
|
children
|
|||
|
|
});
|
|||
|
|
return {
|
|||
|
|
rootHeight,
|
|||
|
|
styles,
|
|||
|
|
tabBarClass
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import './index-u';
|
|||
|
|
</style>
|