App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<template> <div class="app"> <h1>Vue Ellipse Progress Example</h1> <!-- Progress Bar with Gradient Color --> <ve-progress :progress="progress" :size="150" :thickness="8" :color="gradientColor" :linecap="'round'" /> <!-- Controls to Adjust Progress --> <div class="controls"> <button @click="decreaseProgress">-</button> <span>{{ progress }}%</span> <button @click="increaseProgress">+</button> </div> </div> </template> <script setup> // Import the component import { VeProgress } from "vue-ellipse-progress"; import { ref } from "vue"; // Register the component const progress = ref(50); // Gradient Color Definition const gradientColor = { radial: false, // Set to false for a linear gradient colors: [ { color: "#3498DB", offset: "0" }, { color: "#8A2BE2", offset: "100" }, ], }; // Methods to adjust progress const increaseProgress = () => { if (progress.value < 100) progress.value += 10; }; const decreaseProgress = () => { if (progress.value > 0) progress.value -= 10; }; </script> |
