從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>

頁面效果

2-2頁面貼怎麼調用的源碼
須要再md把調用代碼再寫一點同時用`包起來

頁面效果：

2-3寫屬性和方法

頁面效果：