如何使用 markdown 结合组件 props 实现可控制的响应式 ui组件库文档

最新推荐文章于 2025-09-09 13:43:46 发布

原创

最新推荐文章于 2025-09-09 13:43:46 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

本文档介绍了如何在VuePress中创建一个交互式的UI组件库文档。通过将组件封装并配合JSON数据，实现了在Markdown中预览组件属性变化的效果。详细讲述了Button.vue、IsSet.vue和Button.json的实现细节，以及在README.md中的使用方法。

文章目录

一、此功能的应用场景

ui组件库文档如何实现，读到此文章，我相信大家都会略有接触，那么首先我们要考虑的一个问题就是，组件库文档是如何实现的呢？总的来说基本上我们使用的这些组件库大体的文档方式都是模块、props属性介绍这些。主流的方式是 markdown 文档结合各类语言去实现一套组件库文档，那么现在我想实现一套可以让用户结合我的props属性，可以再我的页面上进行操作效果展示，该如何实现呢？
在这里插入图片描述
参考 TDesign 如何在 markdown 实现这个示例的功能？

二、实现思路

首先要考虑的肯定是将这个示例封装成一个组件
左侧展示，右侧分为 switch（单选），select（选择）两个模块，当我们变动右侧的数据时，会自动将对应的属性等同步到右侧展示区域
获取组件的所有 props 属性并暴露，抓取方式（暂定：手写 json 文件，手动引入）
左侧塞入的组件采用动态组件实现对应的功能

三、vue-press 实现方式

首先来看我的 vue-press 目录，markdown可以自动识别对应components目录下的.vue文件，我们主要的也是讲代码内容，里面的东西是如何实现的
在这里插入图片描述
其实主要的就是三个文件

3.1、Button.vue(对应的组件)

<template>
  <button :style="`color:${color}`" :disabled="disabled" @click="onClick">click me</button>
</template>

<script >
export default {
   
   
  name: 'historyData',
  props: ['color', 'disabled'],
  watch: {
   
   
    color (val) {
   
   

      console.log(val)
    },
    disabled