Vue 3 Seven Segment Display

Modern lightweight Vue 3 seven segment display.

Preview Demo & Docs

Getting started

Installation

First step is to install it using yarn or npm:

npm install vue3-seven-segment-display

# or use yarn
yarn add vue3-seven-segment-display

Basic Using

import SevenSegmentDisplay from 'vue3-seven-segment-display'

const app = createApp(App)
app.use(SevenSegmentDisplay as Plugin)

or

<template>
  <seven-segment-display :value="3421" />
</template>

<script>
import { SevenSegmentDisplay } from 'vue3-seven-segment-display'

export default {
  name: 'App',
  components: {
    SevenSegmentDisplay
  },
}
</script>

Style Custom

You only need to use CSS to customize, and use font-size and color as normal text.

Props

Prop	Descriptoion	Type	Default
value	Number displayed on the screen. Must be integer or String in integer form.	String, Number	undefined
disable-select	Forbidden user select behavior.	Boolean	false