TinyVue 组件库文档再升级：体验更友好，使用更方便！

2023-08-23 23:33:30

TinyVue：文档优化，体验升级

TinyVue 组件库自开源以来，好评如潮，其丰富的组件和详细的文档受到了广大开发者的青睐。然而，我们也注意到，在文档的某些方面还存在着一些小小的瑕疵。为了更好地满足用户的需求，我们对文档进行了全面优化，提升了文档的质量和实用性。

**1. ** 类型更详细

优化前，TinyVue 组件库文档中的类型过于简洁，例如，仅标注为 string、number、boolean 等，并未明确解释它们的具体含义和取值范围。优化后，我们对类型描述进行了完善，详细说明了不同类型的含义，如 string 表示一个字符串，可以包含任意长度的字符序列；number 表示一个数字，可以是整数或小数；boolean 表示一个布尔值，可以是 true 或 false。

优化前：

// Button 组件
props: {
label: String,
icon: String,
disabled: Boolean,
}

优化后：

// Button 组件
props: {
/**

按钮上的文字标签。
类型：字符串
*/
label: String,

/**

按钮上的图标。
类型：字符串（图标名称）
*/
icon: String,

/**

是否禁用按钮。
类型：布尔值
*/
disabled: Boolean,
}


**2. **  **描述更清晰** 

优化前，文档中的某些描述不够清晰，例如，我们提到 `props` 是组件的属性，`emit` 是组件的事件，但并没有深入解释它们的使用方法。优化后，我们对这些描述进行了详细说明，帮助用户理解这些属性和事件的具体作用。例如，我们明确指出 `props` 是组件的输入，用于接收父组件传递的数据；`emit` 是组件的输出，用于向父组件发送事件。

优化前：

// Dialog 组件
emit: {
  'close': null,
}

优化后：

// Dialog 组件
emit: {
  /**
   * 当对话框关闭时触发。
   */
  'close': null,
}

**3. ** 新增示例代码

优化前，文档中缺乏示例代码，导致很多新手用户难以理解组件的使用方法。优化后，我们为每个组件添加了详尽的示例代码，这些代码简单易懂，帮助用户快速上手。

// Button 组件的示例代码

<template>
  <Button label="提交" @click="submitForm" />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const formSubmitted = ref(false)

    const submitForm = () => {
      formSubmitted.value = true
    }

    return {
      formSubmitted,
      submitForm,
    }
  },
}
</script>