vuejs 组件_简单美观的卡片组件，带有优雅的VueJS火花线

最新推荐文章于 2024-08-26 07:28:14 发布

翻译最新推荐文章于 2024-08-26 07:28:14 发布 · 2.6k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://vuejsexamples.com/simple-and-beautiful-card-component-with-an-elegant-spark-line-for-vuejs/

文章标签：

#python #vue #java #数据可视化 #js #ViewUI

介绍了一个用于VueJS的简单美观的卡片组件，该组件特色在于具有优雅的火花线效果。安装后，可通过传入道具展示数据和消息。组件的每个面包含类型、标题和显示在卡片主体的数据。同时，道具可以接受HTML输入，允许直接注入元素到卡片内容中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vuejs 组件

信息卡 (vue-info-card)

Simple and beautiful card component with an elegant spark line, for VueJS.

用于VueJS的简单美观的卡片组件，带有优雅的火花线。

View Demo 查看演示 Download Source 下载源

安装 (Installation)

npm i -S vue-info-card

用法 (Usage)

After the installation, the component can be used by passing the appropriate props for displaying the data and messages. A sample usage within a single file component is as follows:

安装后，可以通过传递适当的道具来使用组件来显示数据和消息。单个文件组件中的用法示例如下：

<template>
  <div>
    <info-card :frontType="'graph'"
      :frontTitle="front.title"
      :frontData="front.graphData"
      :backTitle="back.title"
      :backData="back.message" />
  </div>
</template>

<script>
import InfoCard from 'vue-info-card';

export default {
  components: {
    InfoCard,
  },
  data() {
    return {
      front: {
        title: 'Daily Conversion Value',
        graphData: [3, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
      },
      back: {
        title: 'Monthly Summary',
        message: 'Your average daily conversion value for this month is <b>50.4$</b>. It is below the average of the last six months.',
      },
    };
  },
};
</script>

道具 (Props)

There are basically three different props for each faces of the card. A face requires a type, such as graph or text, a title, and a data to display in the body of the card. The props are as follows:

卡的每个面基本上都有三种不同的道具。人脸需要一种类型(例如graph或text ，标题以及要显示在卡主体中的数据。道具如下：

prop	Type	Optional?	Default	Description
`frontType`	`String`	:white_check_mark:	`'text'`	Type of the front face of the card. Available options are `graph` or `text`.
`frontTitle`	`String`	:white_check_mark:	`'Default Card Title'`	Title of the front face of the card.
`frontData`	`String` or `Array`	:x:		Data that will be displayed on the front face of the card. If `frontType` is set to `graph`, this must be an array; otherwise, a string.
`frontTrendGradients`	`Array`	:white_check_mark:	`['#4facfe', '#00f2fe']`	Gradient that will be used on the spark line, expected to be an array of color hexas as strings.
`backType`	`String`	:white_check_mark:	`'text'`	Type of the back face of the card. Available options are `graph` or `text`.
`backTitle`	`String`	:white_check_mark:	`'Default Card Title'`	Title of the back face of the card.
`backData`	`String` or `Array`	:x:		Data that will be displayed on the back face of the card. If `frontType` is set to `graph`, this must be an array; otherwise, a string.
`backTrendGradients`	`Array`	:white_check_mark:	`['#4facfe', '#00f2fe']`	Gradient that will be used on the spark line, expected to be an array of color hexas as strings.

Struts	类型	可选的？	默认	描述
`frontType`	`String`	：white_check_mark：	`'text'`	卡正面的类型。可用的选项是`graph`或`text` 。
`frontTitle`	`String`	：white_check_mark：	`'Default Card Title'`	卡正面的标题。
`frontData`	`String`或`Array`	：X：		数据将显示在卡的正面。如果`frontType`设置为`graph` ，那么它必须是一个数组；否则为字符串。
`frontTrendGradients`	`Array`	：white_check_mark：	`['#4facfe', '#00f2fe']`	将在火花线上使用的渐变，应该是作为字符串的六边形数组。
`backType`	`String`	：white_check_mark：	`'text'`	卡背面的类型。可用的选项是`graph`或`text` 。
`backTitle`	`String`	：white_check_mark：	`'Default Card Title'`	卡背面的标题。
`backData`	`String`或`Array`	：X：		数据将显示在卡的背面。如果`frontType`设置为`graph` ，那么它必须是一个数组；否则为字符串。
`backTrendGradients`	`Array`	：white_check_mark：	`['#4facfe', '#00f2fe']`	将在火花线上使用的渐变，应该是作为字符串的六边形数组。

Note that both frontData and backData props accept HTML as input, which means you can inject elements to the card body directly.

请注意， frontData和backData道具均接受HTML作为输入，这意味着您可以将元素直接注入到卡体内。

翻译自: https://vuejsexamples.com/simple-and-beautiful-card-component-with-an-elegant-spark-line-for-vuejs/

vuejs 组件