feat(components): 新增可自定义的diy-tab组件,支持多种样式和布局

添加一个高度可配置的tab组件,支持顶部、底部、左侧、右侧四种布局方式
提供默认、下划线和卡片三种tab样式,支持自定义颜色、间距、指示器等样式
组件包含导航栏和内容区域,支持动态切换和动画效果
- 添加自定义样式配置功能,允许通过 customStyles 完全覆盖组件样式
- 重构代码结构,使用计算属性合并默认值和传入值
- 优化样式处理逻辑,增加 mixin 复用
- 完善注释和文档说明
- 改进响应式动画效果
- 新增 getTabTitle 方法,支持根据当前语言环境显示对应的标签标题。该方法处理对象形式的标题(按语言键值匹配)和字符串形式的标题(支持国际化键翻译),提升组件的多语言适配能力。
This commit is contained in:
2026-01-26 18:17:06 +08:00
parent 0dc4dec616
commit cb86cba389
5 changed files with 837 additions and 12 deletions

View File

@@ -56,15 +56,24 @@ function loadLangPackSync(lang, path) {
export default {
langList: langConfig.langList,
/**
* 获得当前本地语言
* @returns
*/
getCurrentLocale() {
return uni.getStorageSync('lang') || "zh-cn";
},
/**
* * 解析多语言
* @param {Object} field
*/
lang(field) {
let _this = getCurrentPages()[getCurrentPages().length - 1];
if (!_this) return;
let _page = getCurrentPages()[getCurrentPages().length - 1];
if (!_page) return;
const locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
const locale = this.getCurrentLocale(); // 获得当前本地语言
let value = ''; // 存放解析后的语言值
let langPath = ''; // 存放当前页面语言包路径
@@ -74,7 +83,7 @@ export default {
var lang = loadLangPackSync(locale, 'common');
//当前页面语言包(同步加载)
let route = _this.route;
let route = _page.route;
langPath = processRoutePath(route);
// 加载当前页面语言包
@@ -128,11 +137,11 @@ export default {
* @param {String} url 切换后跳转的页面url
*/
change(value, url = '/pages_tool/member/index') {
let _this = getCurrentPages()[getCurrentPages().length - 1];
if (!_this) return;
let _page = getCurrentPages()[getCurrentPages().length - 1];
if (!_page) return;
uni.setStorageSync("lang", value);
const locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
const locale = this.getCurrentLocale();
// 清空已加载的语言包缓存
for (let key in loadedLangPacks) {
@@ -149,9 +158,10 @@ export default {
},
//刷新标题、tabbar
refresh() {
let _this = getCurrentPages()[getCurrentPages().length - 1];
if (!_this) return;
const locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
let _page = getCurrentPages()[getCurrentPages().length - 1];
if (!_page) return;
const locale = this.getCurrentLocale();
this.title(this.lang("title"));