vue实现帮助功能

Vue 实现帮助功能的常见方法

基于路由的独立帮助页面

创建一个独立的帮助页面组件，通过路由导航访问。适合内容较多、结构复杂的帮助文档。

<template>
  <div class="help-page">
    <h3>帮助中心</h3>
    <!-- 帮助内容 -->
  </div>
</template>

<script>
export default {
  name: 'HelpPage'
}
</script>

路由配置示例：

{
  path: '/help',
  name: 'Help',
  component: () => import('./views/Help.vue')
}

悬浮式帮助面板

使用Vue的过渡和条件渲染实现可展开/折叠的帮助面板。

<template>
  <div>
    <button @click="showHelp = !showHelp">帮助</button>
    <transition name="fade">
      <div v-if="showHelp" class="help-panel">
        <!-- 帮助内容 -->
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHelp: false
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

上下文敏感的帮助提示

为特定表单字段或功能添加工具提示式帮助。

<template>
  <div>
    <label>
      用户名
      <span class="help-icon" @mouseenter="showTooltip" @mouseleave="hideTooltip">?</span>
    </label>
    <div v-if="tooltipVisible" class="tooltip">
      请输入3-20个字符的用户名
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tooltipVisible: false
    }
  },
  methods: {
    showTooltip() {
      this.tooltipVisible = true
    },
    hideTooltip() {
      this.tooltipVisible = false
    }
  }
}
</script>

基于Markdown的动态帮助内容

使用第三方库如marked.js渲染Markdown格式的帮助文档。

<template>
  <div v-html="compiledMarkdown"></div>
</template>

<script>
import marked from 'marked'
export default {
  data() {
    return {
      markdown: '# 帮助文档\n\n## 使用说明\n...'
    }
  },
  computed: {
    compiledMarkdown() {
      return marked(this.markdown)
    }
  }
}
</script>

国际化帮助系统

结合vue-i18n实现多语言帮助内容。

// i18n配置
messages: {
  en: {
    help: {
      title: 'Help Center',
      content: '...'
    }
  },
  zh: {
    help: {
      title: '帮助中心',
      content: '...'
    }
  }
}

常见问题FAQ组件

实现可折叠的FAQ列表。

<template>
  <div class="faq">
    <div v-for="(item, index) in faqs" :key="index" class="faq-item">
      <div class="question" @click="toggleAnswer(index)">
        {{ item.question }}
      </div>
      <div v-if="item.expanded" class="answer">
        {{ item.answer }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      faqs: [
        {
          question: '如何重置密码？',
          answer: '在登录页面点击忘记密码...',
          expanded: false
        }
        // 更多问题...
      ]
    }
  },
  methods: {
    toggleAnswer(index) {
      this.faqs[index].expanded = !this.faqs[index].expanded
    }
  }
}
</script>