mayiming/QXTstore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加bar组件

Browse Source
This commit is contained in:
马懿铭
2025-11-05 17:34:23 +08:00
parent 7314f23529
commit 3cb63ffca7
223 changed files with 23185 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
QXTfront/uni_modules/lime-tabbar/changelog.md Normal file
View File

@@ -0,0 +1,26 @@
## 0.1.3（2025-10-03）
- fix: 修复uniapp 纯文本无法使用css var
## 0.1.2（2025-10-03）
- fix: 优化条件编译
## 0.1.1（2025-07-18）
- feat：修复ellipsis
## 0.1.0（2025-07-18）
- feat：增加ellipsis,文本超过一行使用省略号
## 0.0.9（2025-07-14）
- fix：修复插槽icon不生效问题
## 0.0.8（2025-07-01）
- fix: 修复颜色不生效的问题
## 0.0.7（2025-07-01）
- fix: 修复uniapp微信小程序不显示图标的问题
## 0.0.6（2025-04-21）
- feat: 兼容uniappx 鸿蒙next
## 0.0.5（2025-03-04）
- fix: 修复uniappx 微信小程序 占位符高度问题
## 0.0.4（2025-02-10）
- fix: 修复深层文本样式不生效问题
## 0.0.3（2025-01-18）
- chore: 更新文档
## 0.0.2（2024-12-15）
- feat: 兼容uniapp x微信小程序
## 0.0.1（2024-11-13）
- init

120
QXTfront/uni_modules/lime-tabbar/components/l-tabbar-item/index-u.scss Normal file
View File

@@ -0,0 +1,120 @@
@import '@/uni_modules/lime-style/index.scss';
@import '@/uni_modules/lime-style/mixins/ellipsis.scss';
/* #ifdef uniVersion >= 4.75 */
$use-css-var: true;
/* #endif */
$item: #{$prefix}-tabbar-item;
// 尺寸变量
$tabbar-height: create-var(tabbar-height, 40px);
$tabbar-font-size: create-var(tabbar-font-size, $font-size-md);
$tabbar-min-font-size: create-var(tabbar-font-size, $font-size-sm);
// 颜色变量
$tabbar-color: create-var(tabbar-color, $text-color-1);
$tabbar-bg-color: create-var(tabbar-bg-color, $bg-color-container);
$tabbar-active-color: create-var(tabbar-active-color, $primary-color);
$tabbar-active-bg-color: create-var(tabbar-active-bg-color, $primary-color-1);
// 间距变量（新增）
$tabbar-item-margin-x: create-var(tabbar-item-margin-x, 0); // 水平margin
$tabbar-item-margin-y: create-var(tabbar-item-margin-y, 8px); // 垂直margin
$tabbar-item-padding-x: create-var(tabbar-item-padding-x, 12px); // 水平padding
$tabbar-item-padding-y: create-var(tabbar-item-padding-y, 0); // 垂直padding
$tabbar-item-crowded-padding-x: create-var(tabbar-item-crowded-padding-x, 8px); // 拥挤状态水平padding
/* #ifdef MP */
:host {
flex: 1;
}
/* #endif */
.#{$item} {
/* #ifndef UNI-APP-X && APP */
box-sizing: border-box;
user-select: none;
display: flex;
/* #endif */
flex: 1;
height: $tabbar-height;
position: relative;
// margin: $tabbar-item-margin-y $tabbar-item-margin-x; // 使用拆分后的margin变量
@include margin($tabbar-item-margin-y $tabbar-item-margin-x);
background-color: $tabbar-bg-color;
// padding: $tabbar-item-padding-y $tabbar-item-padding-x; // 使用拆分后的padding变量
@include padding($tabbar-item-padding-y $tabbar-item-padding-x);
overflow: visible;
&__icon {
&-wrap {
overflow: visible;
}
}
&--crowded {
// padding: $tabbar-item-padding-y $tabbar-item-crowded-padding-x; // 拥挤状态使用专用变量
@include padding($tabbar-item-padding-y $tabbar-item-padding-x);
}
&--round {
border-radius: 99px;
}
&__content {
box-sizing: border-box;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 16rpx;
overflow: visible;
&--checked {
/* #ifndef UNI-APP-X && APP */
color: $tabbar-active-color;
/* #endif */
/* #ifndef UNI-APP-X */
.l-tabbar-item__text {
color: $tabbar-active-color;
font-weight: 700;
}
/* #endif */
}
&--disabled {
opacity: 0.5;
}
&--tag {
border-radius: 99px;
}
&--tag#{&}--checked {
background-color: $tabbar-active-bg-color;
}
}
&__icon {
color: $tabbar-color;
}
&__text {
color: $tabbar-color;
&--small {
font-size: $tabbar-min-font-size;
padding-top: 4px;
}
&--only {
font-size: $tabbar-font-size;
}
&--checked {
color: $tabbar-active-color;
font-weight: 700;
}
&--ellipsis {
@include ellipsisLn(1);
}
}
}

166
QXTfront/uni_modules/lime-tabbar/components/l-tabbar-item/l-tabbar-item.uvue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<view class="l-tabbar-item" :class="classes">
<view :class="contentClass" :style="[contentStyle]" @click="toggle">
<view class="l-tabbar-item__icon-wrap" :style="[iconStyle]" v-if="icon != null || $slots['icon'] != null">
<template v-if="(icon != null || $slots['icon'] != null) && badgeProps?.['dot'] == true || badgeProps?.['content'] != null">
<l-badge
:dot="badgeProps?.['dot'] == true"
:max="badgeProps?.['max'] ?? 99"
:offset="badgeProps?.['offset'] ?? [0, 0]"
:content="badgeProps?.['content']">
<slot name="icon">
<l-icon class="l-tabbar-item__icon"
:class="{'l-tabbar-item__text--checked': isChecked}"
:name="icon" :size="iconSize" :color="colorStyle['color']">
</l-icon>
</slot>
</l-badge>
</template>
<template v-else-if="(icon != null || $slots['icon'] != null)">
<slot name="icon">
<l-icon class="l-tabbar-item__icon"
:class="{'l-tabbar-item__text--checked': isChecked}"
:name="icon" :size="iconSize" :color="colorStyle['color']">
</l-icon>
</slot>
</template>
</view>
<text
v-if="label != null || $slots['default'] != null"
class="l-tabbar-item__text"
:class="{
'l-tabbar-item__text--small': icon != null,
'l-tabbar-item__text--only': icon == null,
'l-tabbar-item__text--checked': isChecked,
'l-tabbar-item__text--ellipsis': ellipsis
}"
:style="[colorStyle, textStyle]">
<slot>{{label}}</slot>
</text>
<slot name="extra"></slot>
</view>
</view>
</template>
<script lang="uts" setup>
/**
* TabbarItem 底部导航项组件
* @description 用于构建Tabbar的单个导航项，必须作为Tabbar的子组件使用
* <br>插件类型：LTabbarItemComponentPublicInstance
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-tabbar
*
* @property {Object} badgeProps 徽标配置（支持uni-badge所有属性）
* @property {string} icon 图标名称（支持uni-icons或自定义图标）
* @property {string} value 唯一标识符（用于v-model绑定）
* @property {string} label 文本标签
* @property {boolean} disabled 是否禁用（默认：false）
* @property {boolean} ellipsis 是否超一行省略（默认：false）
*/
import { TabbarProvide } from '../l-tabbar/type';
import { TabbarItemProps } from './type';
import {addUnit} from '@/uni_modules/lime-shared/addUnit'
const themeVars = inject('limeConfigProviderThemeVars', computed(()=> ({})))
const name = 'l-tabbar-item';
const props = withDefaults(defineProps<TabbarItemProps>(), {
disabled: false,
ellipsis: false
})
const instance = getCurrentInstance()!
const parent = inject<TabbarProvide|null>('limeTabbar', null);
const index = ref(0)
const currentName = computed(():string=> props.value ?? `${index.value}`)
// @ts-ignore
const crowded = computed((): boolean => parent != null && parent.children.value.length > 3)
const isChecked = computed((): boolean => currentName.value == parent?.activeValue.value);
const classes = computed(():Map<string, any>=>{
const cls = new Map<string, any>()
const split = parent?.props.split ?? false;
const shape = parent?.props.shape ?? false;
cls.set(`${name}--split`, split);
cls.set(`${name}--${shape}`, true);
cls.set(`${name}--text-only`, props.icon == null)
cls.set(`${name}--crowded`, crowded.value)
return cls
})
const contentClass = computed(():Map<string, any>=> {
const cls = new Map<string, any>()
const theme = parent?.props.theme;
cls.set(`${name}__content`, true)
cls.set(`${name}__content--checked`, isChecked.value)
cls.set(`${name}__content--disabled`, props.disabled)
cls.set(`${name}__content--${theme}`, true)
return cls
})
const contentStyle = computed(():UTSJSONObject=>{
const style = {}
const activeBgColor = parent?.props.activeBgColor;
if(activeBgColor != null && isChecked.value){
style.set('background', activeBgColor)
}
return style
})
const colorStyle = computed(():UTSJSONObject => {
const style = {}
// #ifdef APP
// 安卓 深层文本样式不生效 bug https://issues.dcloud.net.cn/pages/issues/detail?id=11930
const activeColor:any|null = parent?.props.activeColor ?? themeVars.value['tabbarActiveColor'] ?? '#3283ff'
const color:any|null = parent?.props.color ?? themeVars.value['tabbarColor'] ?? 'rgba(0,0,0,0.88)'
// #endif
// #ifndef APP
const activeColor = parent?.props.activeColor
const color = parent?.props.color
// #endif
if(activeColor != null && isChecked.value){
style.set('color', `${activeColor}`)
}
if(color != null && !isChecked.value){
style.set('color', `${color}`)
}
return style
})
const textStyle = computed(():UTSJSONObject=>{
const style = {}
const fontSize = parent?.props.fontSize
if(fontSize != null){
style.set('font-size', fontSize)
}
return style
})
// @ts-ignore
const iconSize = computed(():string => addUnit(parent?.props.iconSize ?? (props.icon !=null && instance.slots['default'] == null ? 24 : 20))!)
const iconStyle = computed(():Map<string, any> =>{
const style = new Map<string, any>()
style.set('height', iconSize.value);
return style
})
const toggle = ()=>{
if(props.disabled || isChecked.value || parent == null) return
parent.updateChild(currentName.value)
// parent!.activeValue.value = currentName.value
}
onMounted(()=>{
if(parent == null) return
parent.defaultIndex.value +=1;
index.value = parent.defaultIndex.value;
parent.children.value.push(instance.proxy! as LTabbarItemComponentPublicInstance)
})
onUnmounted(()=>{
// @ts-ignore
if(parent == null) return
const _index = parent.children.value.indexOf(instance.proxy! as LTabbarItemComponentPublicInstance);
parent.children.value.splice(_index, 1);
})
</script>
<style lang="scss">
@import './index-u';
</style>

166
QXTfront/uni_modules/lime-tabbar/components/l-tabbar-item/l-tabbar-item.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<view class="l-tabbar-item" :class="classes">
<view :class="contentClass" :style="[contentStyles]" @click="toggle">
<view class="l-tabbar-item__icon-wrap" :style="[iconStyle]" v-if="icon">
<!-- <l-badge
v-if="(icon || $slots.icon) && (badgeProps.dot || badgeProps.content)"
:dot="badgeProps.dot || false"
:max="badgeProps.max || 99"
:content="badgeProps.content || 0">
<slot icon="icon"></slot>
<l-icon :name="icon"></l-icon>
</l-badge>
<slot icon="icon" v-else-if="$slots.icon"></slot>
<l-icon v-else-if="icon" :name="icon"></l-icon> -->
<template v-if="(icon || $slots.icon) && (badgeProps.dot || badgeProps.content)" >
<l-badge
:dot="badgeProps.dot || false"
:max="badgeProps.max || 99"
:offset="badgeProps.offset || [0, 0]"
:content="badgeProps.content || 0">
<slot name="icon">
<l-icon :name="icon" ></l-icon>
</slot>
</l-badge>
</template>
<template v-else-if="icon || $slots.icon">
<slot name="icon">
<l-icon :name="icon"></l-icon>
</slot>
</template>
</view>
<view class="l-tabbar-item__text"
:class="{
'l-tabbar-item__text--small': !!icon,
'l-tabbar-item__text--only': !icon,
'l-tabbar-item__text--ellipsis': ellipsis
}">
<slot>{{label}}</slot>
</view>
<slot name="extra"></slot>
</view>
</view>
</template>
<script lang="ts">
// @ts-nocheck
/**
* TabbarItem 底部导航项组件
* @description 用于构建Tabbar的单个导航项，必须作为Tabbar的子组件使用
* <br>插件类型：LTabbarItemComponentPublicInstance
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-tabbar
*
* @property {Object} badgeProps 徽标配置（支持uni-badge所有属性）
* @property {string} icon 图标名称（支持uni-icons或自定义图标）
* @property {string} value 唯一标识符（用于v-model绑定）
* @property {string} label 文本标签
* @property {boolean} disabled 是否禁用（默认：false）
* @property {boolean} ellipsis 是否超一行省略（默认：false）
*/
import {ref, defineComponent, computed, inject, getCurrentInstance, onUnmounted} from '@/uni_modules/lime-shared/vue';
import tabbarProps from './props'
import {addUnit} from '@/uni_modules/lime-shared/addUnit'
const name = `l-tabbar-item`
export default defineComponent({
name,
props: tabbarProps,
setup(props) {
const context = getCurrentInstance()
const { split, shape, theme, defaultIndex, activeValue, updateChild, children, activeColor, color, activeBgColor, iconSize, fontSize } = inject('tab-bar');
defaultIndex.value += 1
const currentName = props.value || defaultIndex.value
children.value.push(context.uid)
// 拥挤
const crowded = computed(() => children.value.length > 3)
const isChecked = computed(() => {
return currentName === activeValue.value;
});
const classes = computed(() => {
const cls = [`${name}--${shape.value}`];
if(split.value) {
cls.push(`${name}--split`)
}
if(!props.icon) {
cls.push(`${name}--text-only`)
}
if(crowded.value) {
cls.push(`${name}--crowded`)
}
return cls.join(' ')
// return {
// // [`${name}`]: true,
// [`${name}--split`]: split.value,
// [`${name}--text-only`]: !props.icon,
// [`${name}--crowded`]: crowded.value,
// [`${name}--${shape.value}`]: true,
// }
})
const contentClass = computed(() => {
const cls = [`${name}__content`, `${name}__content--${theme.value}`];
if(isChecked.value) {
cls.push(`${name}__content--checked`)
}
if(props.disabled) {
cls.push(`${name}__content--disabled`)
}
return cls.join(' ')
// return {
// [`${name}__content`]: true,
// [`${name}__content--checked`]: isChecked.value,
// [`${name}__content--disabled`]: props.disabled,
// [`${name}__content--${theme.value}`]: true,
// }
})
const contentStyles = computed(() => {
const style:Record<string, string> = {}
if(fontSize.value) {
style['font-size'] = fontSize.value
}
if(activeBgColor.value) {
style['background'] = activeBgColor.value
}
if(activeColor.value || color.value) {
style['color'] = isChecked.value ? activeColor.value : color.value
}
if(activeColor.value) {
style['--l-tabbar-active-color'] = activeColor.value
}
if(color.value) {
style['--l-tabbar-color'] = color.value
}
return style
})
const iconStyle = computed(() => {
const size = addUnit(iconSize.value || (props.icon && !context.slots.default ? 24 : 20))
return {
height: size,
fontSize: size
}
})
const toggle = () => {
if(props.disabled) return
updateChild(currentName);
}
onUnmounted(() => {
const index = children.value.indexOf(context.uid);
children.value.splice(index, 1);
})
return {
classes,
contentClass,
contentStyles,
iconStyle,
toggle
}
}
})
</script>
<style lang="scss">
@import './index-u';
</style>

28
QXTfront/uni_modules/lime-tabbar/components/l-tabbar-item/props.ts Normal file
View File

@@ -0,0 +1,28 @@
// @ts-nocheck
export default {
/** 图标右上角提示信息 */
badgeProps: {
type: Object,
default: () => ({})
},
/** 图标名称 */
icon: {
type: String,
},
/** 标识符 */
value: {
type: [String, Number],
default: null
},
disabled: {
type: Boolean,
default: false
},
label: {
type: String
},
ellipsis: {
type: Boolean,
default: false
}
};

26
QXTfront/uni_modules/lime-tabbar/components/l-tabbar-item/type.ts Normal file
View File

@@ -0,0 +1,26 @@
// @ts-nocheck
// #ifndef UNI-APP-X
type UTSJSONObject = Object
// #endif
export interface TabbarItemProps {
/**
* 图标右上角提示信息
*/
badgeProps?: UTSJSONObject;
/**
* 图标名称
*/
icon?: string;
/**
* 标识符
*/
value?: string;
label?: string;
disabled: boolean;
/**
* 文本超过时是否显示省略号
*/
ellipsis: boolean;
}

83
QXTfront/uni_modules/lime-tabbar/components/l-tabbar/index-u.scss Normal file
View File

@@ -0,0 +1,83 @@
@import '@/uni_modules/lime-style/index.scss';
@import '@/uni_modules/lime-style/mixins/hairline.scss';
/* #ifdef uniVersion >= 4.75 */
$use-css-var: true;
/* #endif */
$tabbar: #{$prefix}-tabbar;
$tabbar-bg-color: create-var(tabbar-bg-color, $bg-color-container);
$tabbar-border-color: create-var(tabbar-border-color, $border-color-1);
$tabbar-z-index: create-var(tabbar-z-index, 10);
$tabbar-round-margin-x: create-var(tabbar-round-margin-x, $spacer);
/* #ifndef UNI-APP-X && APP */
$tabbar-round-shadow: create-var(tabbar-round-shadow, $shadow-3);
/* #endif */
/* #ifdef UNI-APP-X && APP */
$tabbar-round-shadow: $shadow-3;
/* #endif */
.#{$tabbar} {
/* #ifndef UNI-APP-X */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
position: relative;
// font-size: 16px;
background-color: $tabbar-bg-color;
overflow: visible;
&--fixed {
position: fixed;
left: 0;
bottom: 0;
right: 0;
z-index: $tabbar-z-index;
}
&--round {
margin-left: $tabbar-round-margin-x;
margin-right: $tabbar-round-margin-x;
border-radius: 999px;
box-shadow: $tabbar-round-shadow;
}
/* #ifndef UNI-APP-X && APP */
&--normal#{&}--bordered {
// z-index: 1;
// border-top: 1rpx solid $tabbar-border-color;
border-top-width: 1rpx;
border-top-style: solid;
border-top-color: $tabbar-border-color;
}
/* #endif */
/* #ifndef UNI-APP-X && APP */
&--normal#{&}--bordered::before {
// z-index: 1;
@include hairline-top($color: $tabbar-border-color);
}
/* #endif */
&--normal#{&}--safe {
/* #ifdef UNI-APP-X */
padding-bottom: var(--uni-safe-area-inset-bottom);
/* #endif */
/* #ifndef UNI-APP-X */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* #endif */
}
&--fixed#{&}--round#{&}--safe {
/* #ifdef UNI-APP-X */
bottom: var(--uni-safe-area-inset-bottom);
/* #endif */
/* #ifndef UNI-APP-X */
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
/* #endif */
}
}

131
QXTfront/uni_modules/lime-tabbar/components/l-tabbar/l-tabbar.uvue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<view ref="rootRef" :class="classes" :style="[styles, lStyle]">
<slot></slot>
</view>
<view v-if="fixed && placeholder" :style="{height: rootHeight + 'px'}"></view>
</template>
<script lang="uts" setup>
/**
* 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 { addUnit } from '@/uni_modules/lime-shared/addUnit';
import { TabbarProps, TabbarProvide } from './type'
const name = 'l-tabbar'
const emit = defineEmits(['change', 'update:modelValue'])
const props = withDefaults(defineProps<TabbarProps>(), {
bordered: true,
fixed: true,
safeAreaInsetBottom: true,
shape: 'normal',
theme: 'normal',
split: true,
placeholder: true,
// #ifdef APP-ANDROID || APP-IOS
// color: 'rgba(0,0,0,0.8)',
// activeColor: '#3283ff'
// #endif
});
const innerValue = ref('0');
const activeValue = computed({
set(value: string) {
emit('change', value)
emit('update:modelValue', value)
innerValue.value = value
},
get():string {
return props.value ?? props.modelValue ?? innerValue.value
}
} as WritableComputedOptions<string>);
const defaultIndex = ref(-1)
// @ts-ignore
const children = ref<LTabbarItemComponentPublicInstance[]>([])
const rootRef = ref<UniElement|null>(null)
const rootHeight = ref(0)
// const safeAreaBottom = uni.getWindowInfo().safeAreaInsets.bottom;
const classes = computed(():Map<string, any>=>{
const cls = new Map<string, any>();
cls.set(`${name}`, true)
cls.set(`${name}--bordered`, props.bordered)
cls.set(`${name}--fixed`, props.fixed)
cls.set(`${name}--safe`, props.safeAreaInsetBottom)
cls.set(`${name}--${props.shape}`, true)
return cls
})
const styles = computed(():Map<string, any>=>{
const style = new Map<string, any>();
if(props.zIndex != null) {
style.set('z-index', props.zIndex!)
}
if(props.bgColor != null) {
style.set('background', props.bgColor!)
}
// if(props.safeAreaInsetBottom && safeAreaBottom > 0){
// const size = addUnit(safeAreaBottom)
// if (props.shape == 'normal') {
// style.set('padding-bottom', size)
// }
// if (props.fixed && props.shape == 'round') {
// style.set('bottom', size)
// }
// }
return style
})
const updateChild = (currentValue: string)=>{
activeValue.value = currentValue
}
provide('limeTabbar', {
props,
defaultIndex,
activeValue,
updateChild,
children
} as TabbarProvide)
onMounted(()=>{
if (!props.placeholder) return;
nextTick(()=>{
rootRef.value?.getBoundingClientRectAsync()?.then(res => {
rootHeight.value = res.height
})
// rootHeight.value = rootRef.value?.offsetHeight??0
})
})
</script>
<style lang="scss">
@import './index-u';
</style>

115
QXTfront/uni_modules/lime-tabbar/components/l-tabbar/l-tabbar.vue Normal file
View File

@@ -0,0 +1,115 @@
<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>

94
QXTfront/uni_modules/lime-tabbar/components/l-tabbar/props.ts Normal file
View File

@@ -0,0 +1,94 @@
// @ts-nocheck
export default {
/** 是否显示外边框 */
bordered: {
type: Boolean,
default: true,
},
/** 是否固定在底部 */
fixed: {
type: Boolean,
default: true,
},
/** 是否为 iPhoneX 留出底部安全距离 */
safeAreaInsetBottom: {
type: Boolean,
default: true,
},
/** 当前选中标签的索引 */
value: {
type: [String, Number],
default: undefined,
},
modelValue: {
type: [String, Number],
default: undefined,
},
/** 当前选中标签的索引，非受控属性 */
defaultValue: {
type: [String, Number],
default: undefined,
},
/** 固定在底部时，是否在标签位置生成一个等高的占位元素 */
placeholder: {
type: Boolean,
default: true,
},
/** 标签栏的形状 */
shape: {
type: String,
default: 'normal',
validator(val) {
if (!val) return true;
return ['normal', 'round'].includes(val);
},
},
/** 选项风格 */
theme: {
type: String,
default: 'normal',
validator(val) {
if (!val) return true;
return ['normal', 'tag'].includes(val);
},
},
/** 是否需要分割线 */
split: {
type: Boolean,
default: false,
},
/** 选中标签的颜色 */
activeColor: {
type: String,
default: null,
},
/** 未选中标签的颜色 */
color: {
type: String,
default: null,
},
lStyle: {
type: [String, Object],
default: null,
},
bgColor: {
type: String,
default: null,
},
activeBgColor: {
type: String,
default: null,
},
zIndex: {
type: Number,
default: null
},
iconSize: {
type: String,
default: null
},
fontSize: {
type: String,
default: null
}
}

68
QXTfront/uni_modules/lime-tabbar/components/l-tabbar/type.ts Normal file
View File

@@ -0,0 +1,68 @@
// @ts-nocheck
// #ifndef APP-ANDROID
import type { ComputedRef } from '@/uni_modules/lime-shared/vue';
type ComputedRefImpl<T> = ComputedRef<T>
// #endif
export interface TabbarProps {
/**
* 是否显示外边框 true
*/
bordered : boolean;
/**
* 是否固定在底部 true
*/
fixed : boolean;
/**
* 是否为 iPhoneX 留出底部安全距离 true
*/
safeAreaInsetBottom : boolean;
/**
* 标签栏的形状 normal
*/
shape : 'normal' | 'round';
/**
* 是否需要分割线 true
*/
split : boolean;
/**
* 选项风格 normal
*/
theme : 'normal' | 'tag';
/**
* 当前选中标签的索引
*/
value ?: string;
/**
* 当前选中标签的索引，非受控属性
*/
defaultValue ?: string;
/**
* 当前选中标签的索引
*/
modelValue ?: string;
/** 固定在底部时，是否在标签位置生成一个等高的占位元素 */
placeholder:boolean;
// #ifdef APP-ANDROID || APP-IOS
activeColor ?: string;
color ?: string;
// #endif
// #ifndef APP-ANDROID || APP-IOS
activeColor ?: string;
color ?: string;
// #endif
lStyle ?: string|UTSJSONObject;
activeBgColor ?: string;
bgColor?: string
zIndex?:number;
iconSize?: string;
fontSize?: string;
}
export type TabbarProvide = {
defaultIndex : Ref<number>,
props: LTabbarComponentPublicInstance,
activeValue: ComputedRefImpl<string>,
updateChild: (value: string) => void,
children: Ref<LTabbarItemComponentPublicInstance[]>
}

249
QXTfront/uni_modules/lime-tabbar/components/lime-tabbar/lime-tabbar.uvue Normal file
View File

@@ -0,0 +1,249 @@
<template>
<view class="demo-block">
<text class="demo-block__title-text ultra">标签栏</text>
<text class="demo-block__desc-text">用于在不同功能模块之间进行快速切换，位于页面底部</text>
<view class="demo-block__body">
<view class="demo-block">
<text class="demo-block__title-text large">组件类型</text>
<view class="demo-block__body">
<view class="demo-block">
<text class="demo-block__title-text">基础{{active}}</text>
<view class="demo-block__body">
<l-tabbar theme="tag" shape="normal" l-style="border-top-right-radius:20px; border-top-left-radius:20px" v-model="active" :fixed="false" :safeAreaInsetBottom="false" @change="change">
<l-tabbar-item icon="home">首页</l-tabbar-item>
<l-tabbar-item icon="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user">我的</l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">纯文本</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false">
<l-tabbar-item label="首页"></l-tabbar-item>
<l-tabbar-item label="应用"></l-tabbar-item>
<l-tabbar-item label="聊天"></l-tabbar-item>
<l-tabbar-item>我的</l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">图标加文字标签栏</text>
<view class="demo-block__body">
<l-tabbar v-model="active1" :fixed="false" :safeAreaInsetBottom="false">
<l-tabbar-item icon="home" value="home" :badgeProps="badgeProps">首页</l-tabbar-item>
<l-tabbar-item icon="app" value="app" :badgeProps="badgeProps">应用</l-tabbar-item>
<l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">自定义图标{{active2}}</text>
<view class="demo-block__body">
<l-tabbar v-model="active2" :fixed="false" :safeAreaInsetBottom="false">
<l-tabbar-item value="home" ellipsis>
<text class="text">首页首页首页首页首页首页</text>
<template #icon>
<image style="width: 20px;height: 20px;" v-show="active2 == 'home'"
:src="activeImg"></image>
<image style="width: 20px;height: 20px;" v-show="active2 != 'home'"
:src="inactiveImg"></image>
</template>
</l-tabbar-item>
<l-tabbar-item icon="app" value="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">纯图标</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">颜色</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false" activeColor="red" color="#999">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">禁用</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat" :disabled="true"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">监听切换事件</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false" @change="change">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text large">组件样式</text>
<view class="demo-block__body">
<view class="demo-block">
<text class="demo-block__title-text">默认样式</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false" theme="tag" @change="change">
<l-tabbar-item icon="home" :badgeProps="{ content: 16, max:5 }"
value="home">首页</l-tabbar-item>
<l-tabbar-item icon="app" :badgeProps="badgeProps" value="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat" :badgeProps="{ content: 'New', offset: [10,-2] }"
value="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user" :badgeProps="{ content: '···' }"
value="user">我的</l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">悬浮胶囊标签栏</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false" theme="tag" shape="round">
<l-tabbar-item icon="home" value="home" :badgeProps="badgeProps">首页</l-tabbar-item>
<l-tabbar-item icon="app" value="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>
</view>
</view>
</view>
</view>
<text style="lines:1; width:40px">悬浮胶囊标签栏</text>
</view>
</view>
</template>
<script setup>
const badgeProps = { dot: true }
const active = ref('0')
const active1 = ref('home')
const active2 = ref('home')
const activeImg = 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png'
const inactiveImg = 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png'
const change = (value : string) => {
nextTick(()=>{
console.log('value', active.value, value)
})
}
setTimeout(()=>{
active.value = '2'
},1000)
</script>
<style lang="scss">
$card-bg-color: var(--doc-card-bg-color, white);
// $page-bg-color: var(--doc-page-bg-color, #f5f5f5);
$title-color: var(--doc-title-color, #000000E6);
$summary-color: var(--doc-summary-color, #00000099);
.text {
color: $summary-color;
font-size: 14px;
}
.badge {
position: absolute;
transform-origin: 100%;
background-color: #FF4D4F;
overflow: visible;
border-radius: 999px;
}
.demo-block {
margin: 32px 0 0;
overflow: visible;
&__title {
margin: 0;
margin-top: 8px;
&-text {
color: $summary-color;
font-weight: 400;
font-size: 14px;
line-height: 16px;
padding-left: 20px;
&.large {
color: $title-color;
font-size: 18px;
font-weight: 700;
line-height: 26px;
}
&.ultra {
color: $title-color;
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
}
}
&__desc-text {
color: $summary-color;
margin: 8px 16px 0 0;
font-size: 14px;
line-height: 22px;
padding-left: 20px;
}
&__body {
margin: 16px 0;
overflow: visible;
.demo-block {
// margin-top: 0px;
margin: 0;
}
}
}
</style>

207
QXTfront/uni_modules/lime-tabbar/components/lime-tabbar/lime-tabbar.vue Normal file
View File

@@ -0,0 +1,207 @@
<template>
<view class="demo-block">
<text class="demo-block__title-text ultra">标签栏</text>
<text class="demo-block__desc-text">用于在不同功能模块之间进行快速切换，位于页面底部</text>
<view class="demo-block__body">
<view class="demo-block">
<text class="demo-block__title-text large">组件类型</text>
<view class="demo-block__body">
<view class="demo-block">
<text class="demo-block__title-text">纯文本</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false">
<l-tabbar-item label="首页"></l-tabbar-item>
<l-tabbar-item label="应用"></l-tabbar-item>
<l-tabbar-item>聊天</l-tabbar-item>
<l-tabbar-item>我的</l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">图标加文字标签栏</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false">
<l-tabbar-item icon="home" value="home" :badgeProps="badgeProps"></l-tabbar-item>
<l-tabbar-item icon="app" value="app" :badgeProps="badgeProps"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">纯图标</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">颜色</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false" activeColor="red" color="#999">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">禁用</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat" :disabled="true"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">监听切换事件</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false" @change="change">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text large">组件样式</text>
<view class="demo-block__body">
<view class="demo-block">
<text class="demo-block__title-text">默认样式</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false" theme="tag" @change="change">
<l-tabbar-item icon="home" :badgeProps="{ content: 16, max:5 }"
value="home"></l-tabbar-item>
<l-tabbar-item icon="app" :badgeProps="badgeProps" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" :badgeProps="{ content: 'New', offset: [10,-2] }"
value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" :badgeProps="{ content: '···' }"
value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text">悬浮胶囊标签栏</text>
<view class="demo-block__body">
<l-tabbar :fixed="false" :safeAreaInsetBottom="false" theme="tag" shape="round">
<l-tabbar-item icon="home" value="home" :badgeProps="badgeProps"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
badgeProps: {dot: true}
}
},
methods:{
change(value){
console.log('value', value)
}
}
}
</script>
<style lang="scss">
.badge {
position: absolute;
transform-origin: 100%;
background-color: #FF4D4F;
overflow: visible;
border-radius: 999px;
}
.demo-block {
margin: 32px 0 0;
overflow: visible;
&__title {
margin: 0;
margin-top: 8px;
&-text {
color: rgba(0, 0, 0, 0.6);
font-weight: 400;
font-size: 14px;
line-height: 16px;
padding-left: 20px;
&.large {
color: rgba(0, 0, 0, 0.9);
font-size: 18px;
font-weight: 700;
line-height: 26px;
}
&.ultra {
color: rgba(0, 0, 0, 0.9);
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
}
}
&__desc-text {
color: rgba(0, 0, 0, 0.6);
margin: 8px 16px 0 0;
font-size: 14px;
line-height: 22px;
padding-left: 20px;
}
&__body {
margin: 16px 0;
overflow: visible;
.demo-block {
// margin-top: 0px;
margin: 0;
}
}
}
</style>

110
QXTfront/uni_modules/lime-tabbar/package.json Normal file
View File

@@ -0,0 +1,110 @@
{
"id": "lime-tabbar",
"displayName": "lime-tabbar 标签栏",
"version": "0.1.3",
"description": "lime-tabbar 标签栏 底部导航栏，用于在不同页面之间进行切换。兼容uniapp/uniappx",
"keywords": [
"lime-tabbar",
"tabbar",
"标签栏"
],
"repository": "",
"engines": {
"HBuilderX": "^4.32",
"uni-app": "^4.54",
"uni-app-x": "^4.75"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "",
"darkmode": "x",
"i18n": "x",
"widescreen": "x"
},
"uni_modules": {
"dependencies": [
"lime-shared",
"lime-icon",
"lime-badge",
"lime-style"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "√",
"aliyun": "√",
"alipay": "√"
},
"client": {
"uni-app": {
"vue": {
"vue2": "√",
"vue3": "√"
},
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"vue": "√",
"nvue": "-",
"android": {
"extVersion": "",
"minVersion": "22"
},
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√",
"alipay": "-",
"toutiao": "-",
"baidu": "-",
"kuaishou": "-",
"jd": "-",
"harmony": "-",
"qq": "-",
"lark": "-"
},
"quickapp": {
"huawei": "-",
"union": "-"
}
},
"uni-app-x": {
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"android": {
"extVersion": "",
"minVersion": "22"
},
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√"
}
}
}
}
}
}

210
QXTfront/uni_modules/lime-tabbar/readme - 副本.md Normal file
View File

@@ -0,0 +1,210 @@
# lime-tabbar 标签栏
- 用于在不同功能模块之间进行快速切换，位于页面底部。兼容uniapp/uniappx
- 插件依赖`lime-style`,`lime-shared`,`lime-badge`,`lime-icon`,`lime-svg`不喜勿下。
## 文档
[tabbar【站点1】](https://limex.qcoon.cn/components/tabbar.html)
[tabbar【站点2】](https://limeui.netlify.app/components/tabbar.html)
[tabbar【站点3】](https://limeui.familyzone.top/components/tabbar.html)
## 安装
在插件市场导入即可，首次安装可能需要重新编译
**注意**
* 本插件依赖的[lime-svg](https://ext.dcloud.net.cn/plugin?id=18519)在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
* 如果不需要[lime-svg](https://ext.dcloud.net.cn/plugin?id=18519)在lime-icon代码中注释掉即可
```html
// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->
```
## 代码演示
### 基础使用
`v-model` 默认绑定选中标签的索引值，通过修改 `v-model` 即可切换选中的标签。
```html
<l-tabbar v-model="active">
<l-tabbar-item icon="home">首页</l-tabbar-item>
<l-tabbar-item icon="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user">我的</l-tabbar-item>
</l-tabbar>
```
```js
const active = ref('0')
```
### 通过值匹配
在标签指定 `value` 属性的情况下，`v-model` 的值为当前标签的 `value`。
```html
<l-tabbar v-model="active">
<l-tabbar-item icon="home" value="home">首页</l-tabbar-item>
<l-tabbar-item icon="app" value="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>
```
```js
const active = ref('home')
```
### 徽标提示
设置 [lime-badge](https://ext.dcloud.net.cn/plugin?id=13616)插件的 `badgeProps` 在图标右上角展示相应的徽标。
```html
<l-tabbar v-model="active">
<l-tabbar-item icon="home" :badgeProps="{ content: 16, max:5 }" value="home">首页</l-tabbar-item>
<l-tabbar-item icon="app" :badgeProps="{ dot: true }" value="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat" :badgeProps="{ content: 'New', offset: [10,-2] }" value="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user" :badgeProps="{ content: '···' }" value="user">我的</l-tabbar-item>
</l-tabbar>
```
```js
const active = ref('home')
```
### 自定义图标
设置`icon`属性可设置图标，图标可看 [lime-icon](https://ext.dcloud.net.cn/plugin?id=14057)或`icon插槽`。
```html
<l-tabbar v-model="active">
<l-tabbar-item icon="home" value="home">
<template #icon>
<image style="width: 20px;height: 20px;" v-show="active == 'home'" :src="activeImg" ></image>
<image style="width: 20px;height: 20px;" v-show="active != 'home'" :src="inactiveImg" ></image>
</template>
</l-tabbar-item>
<l-tabbar-item icon="app" value="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>
```
```js
const active = ref('home')
const activeImg = 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png'
const inactiveImg = 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png'
```
### 自定义颜色
通过 `active-color` 属性设置选中标签的颜色，通过 `color` 属性设置未选中标签的颜色。
```html
<l-tabbar activeColor="red" color="#999">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
```
### 监听切换事件
通过 `change` 事件来监听选中标签的变化。
```html
<l-tabbar v-model="active" @change="change">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
```
```js
const change = (value : string) => {
console.log('value', value)
}
```
### 查看示例
- 导入后直接使用这个标签查看演示效果
```html
<!-- // 代码位于 uni_modules/lime-tabbar/compoents/lime-tabbar -->
<lime-tabbar />
```
### 插件标签
- 默认 l-tabbar 为 component
- 默认 lime-tabbar 为 demo
### Vue2使用
- 插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
- 关键代码是: 在main.js中 在vue2部分加上这一段即可
```js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
## API
### Tabbar Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前选中标签的名称或索引值 | _string_ | `-` |
| value | 当前选中标签的名称或索引值 | _string_ | `-` |
| fixed | 是否固定在底部 | _boolean_ | `true` |
| bordered | 是否显示外边框 | _boolean_ | `true` |
| placeholder | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `true` |
| zIndex | 元素 z-index | _number_ | `885` |
| shape | 标签栏的形状,可选`round` | _boolean_ | `normal` |
| safeAreaInsetBottom | 是否开启底部安全区适配，设置 fixed 时默认开启 | _boolean_ | `true` |
| activeColor | 选中标签的颜色 | _string_ | `-` |
| color | 未选中标签的颜色 | _string_ | `-` |
| activeBgColor | 选中标签的背景颜色 | _string_ | `-` |
| iconSize | 图标大小 | _string_ | `-` |
| lStyle | 样式 | _string_ | `-` |
### Tabbar Events
| 事件名 | 说明 | 回调参数 |
| ---------------- | -------------------------- | ------------------- |
| change | 切换标签时触发 | active: string |
### TabbarItem Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 标签值，作为匹配的标识符 | _string_ | `-` |
| icon | 图标名称或图片链接，等同于 [Icon](https://ext.dcloud.net.cn/plugin?id=14057) 组件的 name 属性 | _string_ | `-` |
| disabled | 是否禁用 | _boolean_ | `false` |
| label | 标签文本 | _string_ | `` |
| badgeProps | 自定义徽标的属性，传入的对象会被透传给 [Badge](https://ext.dcloud.net.cn/plugin?id=13616) 组件的 props | _Object_ | `` |
### TabbarItem Slots
| 名称 | 说明 |
| --------------- | ------------ |
| icon | 自定义图标 |
## 主题定制
### 样式变量
组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。
| 名称 | 默认值 | 描述 |
| ------------------------------ | ------------------------------------ | ---- |
| --l-tabbar-bg-color | _$bg-color-container_ | - |
| --l-tabbar-border-color | _$border-color-1_ | - |
| --l-tabbar-round-shadow | _$shadow-3_ | - |
| --l-tabbar-z-index | _10_ | - |
| --l-tabbar-height | _80rpx_ | - |
| --l-tabbar-color | _$text-color-1_ | - |
| --l-tabbar-active-color | _$primary-color_ | - |
| --l-tabbar-font-size | _32rpx_ | - |
## 打赏
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)

219
QXTfront/uni_modules/lime-tabbar/readme.md Normal file
View File

@@ -0,0 +1,219 @@
# lime-tabbar 标签栏
用于在不同功能模块之间进行快速切换，位于页面底部。兼容uniapp/uniappx。
> 插件依赖：`lime-style`、`lime-shared`、`lime-badge`、`lime-icon`、`lime-svg`
## 文档链接
📚 组件详细文档请访问以下站点：
- [tabbar文档 - 站点1](https://limex.qcoon.cn/components/tabbar.html)
- [tabbar文档 - 站点2](https://limeui.netlify.app/components/tabbar.html)
- [tabbar文档 - 站点3](https://limeui.familyzone.top/components/tabbar.html)
## 安装方法
1. 在uni-app插件市场中搜索并导入`lime-tabbar`
2. 首次导入可能需要重新编译
3. 在页面中使用`l-tabbar`组件（组件）或`lime-tabbar`（演示）
::: tip 注意🔔
本插件依赖的[【lime-svg】](https://ext.dcloud.net.cn/plugin?id=18519)是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用，
若不需要删除即可
:::
## 代码演示
### 基础使用
`v-model` 默认绑定选中标签的索引值，通过修改 `v-model` 即可切换选中的标签。
```html
<l-tabbar v-model="active">
<l-tabbar-item icon="home">首页</l-tabbar-item>
<l-tabbar-item icon="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user">我的</l-tabbar-item>
</l-tabbar>
```
```js
const active = ref('0')
```
### 通过值匹配
在标签指定 `value` 属性的情况下，`v-model` 的值为当前标签的 `value`。
```html
<l-tabbar v-model="active">
<l-tabbar-item icon="home" value="home">首页</l-tabbar-item>
<l-tabbar-item icon="app" value="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>
```
```js
const active = ref('home')
```
### 徽标提示
设置 [lime-badge](https://ext.dcloud.net.cn/plugin?id=13616)插件的 `badgeProps` 在图标右上角展示相应的徽标。
```html
<l-tabbar v-model="active">
<l-tabbar-item icon="home" :badgeProps="{ content: 16, max:5 }" value="home">首页</l-tabbar-item>
<l-tabbar-item icon="app" :badgeProps="{ dot: true }" value="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat" :badgeProps="{ content: 'New', offset: [10,-2] }" value="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user" :badgeProps="{ content: '···' }" value="user">我的</l-tabbar-item>
</l-tabbar>
```
```js
const active = ref('home')
```
### 自定义图标
设置`icon`属性可设置图标，图标可看 [lime-icon](https://ext.dcloud.net.cn/plugin?id=14057)或`icon插槽`。
```html
<l-tabbar v-model="active">
<l-tabbar-item icon="home" value="home">
<template #icon>
<image style="width: 20px;height: 20px;" v-show="active == 'home'" :src="activeImg" ></image>
<image style="width: 20px;height: 20px;" v-show="active != 'home'" :src="inactiveImg" ></image>
</template>
</l-tabbar-item>
<l-tabbar-item icon="app" value="app">应用</l-tabbar-item>
<l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
<l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>
```
```js
const active = ref('home')
const activeImg = 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png'
const inactiveImg = 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png'
```
### 自定义颜色
通过 `active-color` 属性设置选中标签的颜色，通过 `color` 属性设置未选中标签的颜色。
```html
<l-tabbar activeColor="red" color="#999">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
```
### 监听切换事件
通过 `change` 事件来监听选中标签的变化。
```html
<l-tabbar v-model="active" @change="change">
<l-tabbar-item icon="home" value="home"></l-tabbar-item>
<l-tabbar-item icon="app" value="app"></l-tabbar-item>
<l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
<l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>
```
```js
const change = (value : string) => {
console.log('value', value)
}
```
## Vue2使用说明
本插件使用了`composition-api`，请按照[官方教程](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置。
关键配置代码（在main.js中添加）：
```js
// main.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
## 快速预览
导入插件后，可以直接使用以下标签查看演示效果：
```html
<!-- 代码位于 uni_modules/lime-tabbar/components/lime-tabbar -->
<lime-tabbar />
```
## 插件标签说明
- `l-tabbar`：标签栏组件
- `lime-tabbar`：演示标签
## API文档
### Tabbar Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前选中标签的名称或索引值 | string | - |
| value | 当前选中标签的名称或索引值 | string | - |
| fixed | 是否固定在底部 | boolean | `true` |
| bordered | 是否显示外边框 | boolean | `true` |
| split | 是否显示分割线 | boolean | `false` |
| placeholder | 固定在底部时是否生成占位元素 | boolean | `true` |
| zIndex | 元素z-index | number | `885` |
| shape | 标签栏形状，可选`round` | string | `normal` |
| theme | 选项风格，可选`tag` | string | `normal` |
| safeAreaInsetBottom | 是否开启底部安全区适配 | boolean | `true` |
| activeColor | 选中标签的颜色 | string | - |
| color | 未选中标签的颜色 | string | - |
| activeBgColor | 选中标签的背景颜色 | string | - |
| iconSize | 图标大小 | string | - |
| fontSize | 字体大小 | string | - |
| lStyle | 样式 | string | - |
### Tabbar Events
| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 切换标签时触发 | active: string |
### TabbarItem Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 标签值，作为匹配的标识符 | _string_ | `-` |
| icon | 图标名称或图片链接，等同于 [Icon](https://ext.dcloud.net.cn/plugin?id=14057) 组件的 name 属性 | _string_ | `-` |
| disabled | 是否禁用 | _boolean_ | `false` |
| label | 标签文本 | _string_ | `` |
| badgeProps | 自定义徽标的属性，传入的对象会被透传给 [Badge](https://ext.dcloud.net.cn/plugin?id=13616) 组件的 props | _Object_ | `` |
### TabbarItem Slots
| 插槽名 | 说明 |
| --- | --- |
| icon | 自定义图标 |
| default | 默认插槽 |
| extra | 额外插槽，在文本下方 |
## 主题定制
组件提供了下列 CSS 变量，可用于自定义样式。
| 变量名称 | 默认值 | 描述 |
|---------|--------|------|
| `--l-tabbar-bg-color` | `$bg-color-container` | 标签栏背景色 |
| `--l-tabbar-border-color` | `$border-color-1` | 标签栏边框颜色 |
| `--l-tabbar-round-shadow` | `$shadow-3` | 圆角模式阴影效果 |
| `--l-tabbar-z-index` | `10` | 标签栏的 z-index 层级 |
| `--l-tabbar-height` | `80rpx` | 标签栏高度 |
| `--l-tabbar-round-margin-x` | `16px` | 圆角模式水平外边距 |
| `--l-tabbar-item-margin-x` | `0` | 标签项水平外边距 |
| `--l-tabbar-item-margin-y` | `8px` | 标签项垂直外边距 |
| `--l-tabbar-item-padding-x` | `12px` | 标签项水平内边距 |
| `--l-tabbar-item-padding-y` | `0` | 标签项垂直内边距 |
| `--l-tabbar-item-crowded-padding-x` | `8px` | 拥挤状态下标签项水平内边距 |
| `--l-tabbar-color` | `$text-color-1` | 标签项默认文字颜色 |
| `--l-tabbar-active-color` | `$primary-color` | 标签项激活状态文字颜色 |
| `--l-tabbar-font-size` | `32rpx` | 标签项默认文字大小 |
| `--l-tabbar-min-font-size` | `$font-size-sm` | 标签项最小文字大小 |
| `--l-tabbar-active-bg-color` | `$primary-color-1` | 标签项激活状态背景色 |
| `--l-tabbar-disabled-opacity` | `0.5` | 禁用状态透明度 |
## 支持与赞赏
如果你觉得本插件解决了你的问题，可以考虑支持作者：
| 支付宝赞助 | 微信赞助 |
|------------|------------|
| ![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png) | ![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png) |