关于前端:从01实践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>

页面成果

2- 2 页面贴怎么调用的源码
须要再 md 把调用代码再写一点同时用 ` 包起来

页面成果：

2- 3 写属性和办法

页面成果：