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

一、此功能的应用场景

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

参考 TDesign 如何在 markdown 实现这个示例的功能？

二、实现思路

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

三、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 (val) {
      console.log(val)
    }
  },
  methods: {
    onClick () {
      console.log(123)
    }
  }
}
</script>

<style scoped>
</style>

3.2、IsSet.vue

<template>
  <div>
    <!-- 动态组件  v-bind直接挂载所有点击的属性直接传递 -->
    <component :is="componentName" v-bind="attrObj"></component>
    <div v-for="item in list" :key="item.name">
      <div v-if="item.type=='radio'">
        <span @click="isRadioClick(item.name,true)"> 是 </span>
        <span @click="isRadioClick(item.name,false)"> 否 </span>
      </div>
      <div v-if="item.type=='select'">
        <span @click="isSelectClick(item.name,e)" style="margin-left:10px" v-for="(e,i) in item.list" :key="i">
          {{e}}
        </span>
      </div>
    </div>
  </div>
</template>

<script >
// 手动引入 buttonJSON 后续可以改成 ajax 引入
import buttonJSON from './Button.json'
export default {
  name: 'IsSet',
  props: ['componentName'],
  data () {
    return {
      // list 遍历数据
      list: buttonJSON,
      // attrObj对象
      attrObj: {

      }
    }
  },
  methods: {
    // 点击单选项
    isRadioClick (name, val) {
      this.$set(this.attrObj, name, val)
    },
    // 点击select框选项
    isSelectClick (name, val) {
      this.$set(this.attrObj, name, val)
    }
  }

}
</script>

<style scoped>
</style>

3.3、Button.json

[
  {
    "name": "disabled", // 属性
    "type": "radio", // 类型是switch还是select
    "value": false // 默认值
  },
  {
    "name": "color", // 属性
    "type": "select", // 类型是switch还是select
    "value": "", // 默认值
    "list": ["red","blue","green"] // list 数组对象
  }
]

3.4、README.md

# Hello VuePress 
<IsSet  componentName="Button"></IsSet>

最后实现的代码 直接在 markdown 里面书写 IsSet 组件

简单的实现效果也就是如此

结语

✨ 每天创作一点点
✨ 开心快乐一整天
✨ 点赞关注加收藏
✨ 美好一天又一天

铁铁们 感谢支持 我需要你们的三连 👍👍👍