vue自定义组件 简单_一个简单且可自定义的时间表Vue组件

vue自定义组件 简单

简单的时间线 (simple-vue-timeline)

A timeline vue component which leverages the use of common libraries:

时间轴Vue组件，利用了公共库的使用：

• bootstrap vue components,

  引导vue组件，

• vue-fontawesome

  Vue-fontawesome

• and fecha date formatting.

  和fecha日期格式。

入门 (Getting Started)

安装 (Installation)

npm install --save simple-vue-timeline

样式 (Style)

@import '~simple-vue-timeline/dist/simple-vue-timeline';

As bootstrap is used, you must add the bootstrap style:

使用引导程序时，必须添加引导程序样式：

@import '~bootstrap/scss/bootstrap';

字体很棒 (Font Awesome)

Refer to vue-fontawesome documentation.

请参阅vue-fontawesome文档。

模板元素 (Template Element)

Add the element as follow:

如下添加元素：

template

template

<timeline :items="items" dateFormat="YY/MM/DD" @timeline-edit="edit" v-on="$listeners"></timeline>

script

script

import { SimpleTimeline, Item, Control, Status } from 'simple-vue-timeline';

@Component({
  components: {
    timeline: SimpleTimeline
  }
})
export default class ...

Refer to the Vue Class Component Sample section below for a complete sample.

有关完整的示例，请参考下面的Vue Class Component Sample部分。

Vue类组件样本 (Vue Class Component Sample)

<template>
  <div id="app">
    <timeline
      :items="items"
      @timeline-edit="edit"
      @timeline-copy="copy"
      @timeline-trash="trash"
      v-on="$listeners"
    ></timeline>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {
  SimpleTimeline,
  Item,
  Control,
  Status
} from "simple-vue-timeline";

@Component({
  components: {
    timeline: SimpleTimeline
  }
})
export default class App extends Vue {
  public items: Item[] = [
    new Item(
      0,
      "calendar-alt",
      Status.WARNING,
      "title",
      [new Control("edit", "pencil-alt"), new Control("copy", "plus")],
      new Date(),
      "Here is the body message of item 0"
    ),
    new Item(
      1,
      "tasks",
      Status.WARNING,
      "title",
      [new Control("edit", "pencil-alt"), new Control("trash", "trash")],
      new Date(2019, 10, 20),
      "Here is the body message of item 1"
    )
  ];

  public edit(e: any) {
    console.log("edit " + e["eventId"]);
  }

  public copy(e: any) {
    console.log("copy " + e["eventId"]);
  }

  public trash(e: any) {
    console.log("trash " + e["eventId"]);
  }
}
</script>

翻译自: https://vuejsexamples.com/a-simple-and-customizable-timeline-vue-component/

vue自定义组件 简单