vue-flop-card

This is a flop card for vuejs, A digital card flop, usually used in data analysis and large-screen projects

Feel free to report issues, fork, send feature/pull-requests, or reuse for whatever purpose you see fit.

Preview

Installation

npm install vue-flop-card --save

Getting started

Global registration

Within a Vue project, add these lines in your main.js or index.js;

import Vue from 'vue';
import VueFlopCard from 'vue-flop-card';

Vue.use(VueFlopCard);

Local registration

import VueFlopCard from "vue-flop-card";

export default {
    components: {VueFlopCard}
}

Example usage

Component usage content:

data(){
  return {
    earAmount: 0
  }
}

<vue-flop-card
    :amount="earAmount"
    :places="9"
    :flop-width="45"
    :flop-height="60">
</vue-flop-card>

Props

Prop | Type | Default Value | Description :---: | :---: | :---: | --- amount | Number | 0 | Card numerical value background-color | String | #05c8c0 | Card background color color | String (enum) | #FFFFFF | Card font color separator | String | , | Separator places | Number | 9 | The flop card places flop-width | Number | 22 | flop item card width flop-height | Object | 38 | flop item card width font-size | Number | 26 | flop item card font size font-family | String | - | flop item card font family is-coverage | Boolean | true | IS zero padding is-separator | Boolean | true | Is show separator

License

Copyright (c) 2021 BZ-koko