VuePress搭建组件库+文档(三)
成果：
步骤：
1.先写疾速抉择工夫的组件
docs/.vuepress/components/FastTimeButton.vue
<template><ButtonGroup> <Button v-for="(item,index) in value" :key="index" @click="changeTime(item)" :style="lightValue === item ? 'color:#2b85ec' : ''" type="text"> {{allTimeSelect[item]}} </Button></ButtonGroup></template><script>import moment from 'moment';export default { name: "FastTimeButton", props: { value: { // 展现哪些值 一天前 三天前 七天前... type: Array, default: () => [1,3,7,30,90,180] }, defaultValue: { // 默认选中哪个 type: Number, default: () => 1 // 1示意1天前 }, format: { // 返回的工夫格局 type: String, default: () => 'YYYY-MM-DD' } }, data() { return { lightValue: 1, allTimeSelect: { 1:'昨天', 3:'最近3天', 7:'最近一周', 30:'最近一个月', 90:'最近三个月', 180:'最近半年', } }; }, created() { this.lightValue = this.defaultValue; this.changeTime(this.defaultValue); }, methods: { changeTime(item) { this.lightValue = item; this.$emit('clickTime', [moment().subtract(item, 'days').format(this.format), moment().format(this.format)]) } }};</script>2.写文档
docs/info/fasttimebutton.md
md能够直写vue代码并且能够间接解析
2-1md里能够间接调用组件
<div class="test"> <DatePicker type="datetimerange" format="yyyy-MM-dd" v-model="time" :value="time" placeholder="工夫" style="width: 200px"> </DatePicker> <FastTimeButton @clickTime="changeTime1"> </FastTimeButton></div><script> export default { data() { return { time: [] } }, methods: { changeTime1(value) { this.time = value; }, }, }</script>页面成果
2-2页面贴怎么调用的源码
须要再md把调用代码再写一点同时用`包起来
页面成果：
2-3写属性和办法
页面成果：