从0->1实践-VuePress搭建组件库+文档(三)

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>

页面效果