更新记录

1.0.0（2025-10-24） 下载此版本

初次版本

平台兼容性

uni-app(4.18)

uni-app x(4.04)

其他

zmt-label 选项卡插件

插件介绍

zmt-label 是一个基于 uni-app 框架开发的选项卡插件，提供了简洁美观的界面和完整的功能。

特性

• 📋 包含三个预设选项卡：参数规格、技术说明、应用举例
• 📝 集成 AiEditor 富文本编辑器
• 📊 支持 Markdown 和 HTML 格式内容
• 🔄 内容回显功能
• 🎨 简洁美观的界面设计
• 📱 响应式设计，适配各种屏幕尺寸
• 🚀 轻量级，高性能

安装

方式一：通过 HBuilderX 插件市场安装

1. 打开 HBuilderX
2. 点击菜单栏的 "工具" -> "插件安装"
3. 在插件市场搜索 "zmt-label"
4. 点击 "安装" 按钮

方式二：手动导入

1. 下载插件包
2. 解压到项目的 uni_modules 目录下
3. 确保目录结构为：uni_modules/zmt-label/

基本使用

<template>
  <view class="container">
    <zmt-label 
      :content="initialContent"
      @content-change="handleContentChange"
      ref="zmtLabelRef"
    ></zmt-label>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 初始内容（可选）
      initialContent: {
        0: {
          markdown: "# 参数规格\n\n这是参数规格选项卡的初始内容"
        },
        1: {
          markdown: "# 技术说明\n\n这是技术说明选项卡的初始内容"
        },
        2: {
          markdown: "# 应用举例\n\n这是应用举例选项卡的初始内容"
        }
      }
    };
  },
  methods: {
    // 处理内容变化事件
    handleContentChange(content) {
      console.log('内容变化:', content);
      // content 格式：{ tabIndex: { html: '', markdown: '', key: '', title: '' } }
    }
  }
};
</script>

高级用法

获取所有选项卡内容

<template>
  <view>
    <zmt-label ref="zmtLabelRef"></zmt-label>
    <button @click="getContent">获取内容</button>
  </view>
</template>

<script>
export default {
  methods: {
    getContent() {
      const content = this.$refs.zmtLabelRef.getContent();
      console.log('所有选项卡内容:', content);
      /*
      content 格式：
      {
        0: {
          html: '<h1>参数规格</h1>...',
          markdown: '# 参数规格...',
          key: 'specification',
          title: '参数规格'
        },
        1: { ... },
        2: { ... }
      }
      */
    }
  }
};
</script>

切换选项卡

<template>
  <view>
    <zmt-label ref="zmtLabelRef"></zmt-label>
    <button @click="switchToTab(0)">参数规格</button>
    <button @click="switchToTab(1)">技术说明</button>
    <button @click="switchToTab(2)">应用举例</button>
  </view>
</template>

<script>
export default {
  methods: {
    switchToTab(index) {
      this.$refs.zmtLabelRef.switchTab(index);
    }
  }
};
</script>

清空内容

<template>
  <view>
    <zmt-label ref="zmtLabelRef"></zmt-label>
    <button @click="clearContent">清空内容</button>
  </view>
</template>

<script>
export default {
  methods: {
    clearContent() {
      this.$refs.zmtLabelRef.tabs.forEach((tab, index) => {
        if (this.$refs.zmtLabelRef.aiEditors[index]) {
          this.$refs.zmtLabelRef.aiEditors[index].clear();
        }
      });
    }
  }
};
</script>

API

Props

Events

Methods

AiEditor 富文本编辑器

该插件集成了 AiEditor 富文本编辑器，支持以下功能：

• 📝 基础文本编辑：加粗、斜体、下划线、删除线等
• 🔗 链接插入
• 🖼️ 图片上传
• 📊 表格插入
• 💻 代码块
• 📋 列表（有序、无序）
• 📝 Markdown 语法支持
• 🌙 亮色/暗色主题
• 🌐 国际化支持

AiEditor 配置

可以通过修改组件代码来自定义 AiEditor 的配置：

// 在 zmt-label.vue 的 initAiEditors 方法中
const aiEditor = new AiEditor({
  element: container,
  placeholder: `请输入${tab.title}...`,
  height: '400px',
  // 可以添加更多配置项
  theme: 'light', // 主题：light 或 dark
  language: 'zh-CN', // 语言
  // 更多配置请参考 AiEditor 官方文档
});

兼容性

注意事项

1. AiEditor 依赖：该插件依赖 AiEditor 富文本编辑器，请确保项目中已正确安装 AiEditor。

2. 初始内容格式：传入的初始内容可以包含 html 或 markdown 字段，优先使用 markdown。

3. 内容变化监听：通过 @content-change 事件可以实时获取内容变化，也可以通过 getContent() 方法主动获取内容。

4. 编辑器高度：默认编辑器高度为 400px，可以通过修改组件中的 height 属性来自定义。

常见问题

Q1: 如何自定义选项卡标题？

A1: 目前插件预设了三个选项卡标题，如果需要自定义，可以修改组件中的 tabs 数组：

// 在 zmt-label.vue 的 data 中
tabs: [
  { title: '自定义标题1', key: 'key1' },
  { title: '自定义标题2', key: 'key2' },
  { title: '自定义标题3', key: 'key3' }
]

Q2: 如何修改编辑器高度？

A2: 可以通过修改组件中的 height 属性：

// 在 zmt-label.vue 的 initAiEditors 方法中
const aiEditor = new AiEditor({
  element: container,
  placeholder: `请输入${tab.title}...`,
  height: '500px', // 修改高度
  onChange: () => {
    this.emitContentChange();
  }
});

Q3: 如何获取 HTML 格式的内容？

A3: 通过 getContent() 方法获取的内容中包含 html 字段：

const content = this.$refs.zmtLabelRef.getContent();
const htmlContent = content[0].html; // 获取第一个选项卡的 HTML 内容