Vue.js的翻转信息卡组件 - vue-info-card

Vue.js的翻转信息卡组件 - vue-info-card
插件名称 vue-info-card
发布时间 2020年8月3日
插件作者 karakanb

一个Vue.js组件,用于在应用程序上生成带有火花线的精美翻转信息卡。

变更日志:

v0.1.4(08/01/2020)

  • 更新包

下载安装:

安装并导入vue-info-card

npm install --save vue-info-card

如何使用它:

使用组件。

<template>
  <div>
    <info-card :frontType="front.type"
      :frontTitle="front.title"
      :frontData="front.graphData"
      :backTitle="back.title"
      :backData="back.message"/>
  </div>
</template>
export default {
  components: {
    InfoCard,
  },
  data() {
    return {
      front: {
        title: 'Spark Line',
        graphData: [3, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
      },
      back: {
        title: 'Back Content',
        message: 'Back Content Here',
      },
    };
  },
};

所有可能的 props 。

  • frontType:卡片正面的内容类型:图形或文本
  • frontTitle:标题
  • frontData:火花线的数据
  • frontTrendGradients:火花线上使用的渐变
  • backType:卡片背面的内容类型:图形或文本
  • backTitle:标题
  • backData:火花线的数据
  • backTrendGradients:火花线上使用的渐变