Vue degree picker
A degree picker component for Vue 3.
๐ Installation
Install using your package manager of choice:
yarn add degree-picker
Register the component inside your main.ts
file and import the stylesheet:
import degreePicker from "degree-picker"; import "degree-picker/dist/degree-picker.css"; const app = createApp(App); app.use(degreePicker);
โ๏ธ Usage
<template> <degree-picker active-color="green" v-model="degrees" /> </template> <script lang="ts" setup> import degreePicker from "./components/degreePicker.vue"; import { ref } from "vue"; const degrees = ref(0); </script>
๐ Props
NameTypeDefaultDescriptionactive-colorstring
#567a0dBackground color of the active value and clock handbody-colorstring
#eeeBackground color of the picker bodyv-modelnumber
Standard two way inputstepnumber
30The step used for displaying the degreeswidthnumber/string
290pxSets the width of the element โ can be provided as a string like โ290pxโ or โ290โ or a number, defaults to 290pxfull-widthboolean
falseIgnores the previous width
prop and sets the width to 100% of the parent containerdisabledboolean
falseMakes the component unclickablereadonlyboolean
falseMakes the component unclickable, but does not make it seem disabled