Vg-Delete-Button
This component is only for Vue.js 3+
This is a component delete button.
It doesn't have any logic internally, but it returns an event when clicked.
Installation
npm install @vemlavaraloucagamers/vg-delete-button
# or
yarn add @vemlavaraloucagamers/vg-delete-buttonUsage
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VgDeleteButton from '@vemlavaraloucagamers/vg-delete-button'
import "@vemlavaraloucagamers/vg-delete-button/dist/style.css";
const app = createApp(App)
app.use(VgDeleteButton)
app.mount('#app')// page.vue
<template>
<VgDeleteButton />
</template>
<template>
<vg-delete-button />
</template>
<template>
<vg-delete-button></vg-delete-button>
</template>Props
Items with an (*) mean they are required
| name | Value type | Description |
|---|---|---|
| vgId (*) | String | |
| text | String | Define text button |
| activeBg | String | Define active background color (Hex or Color name) |
| activeColor | String | Define active text color (Hex or Color name) |
Events
| name | Return type | Description |
|---|---|---|
| clicked | Boolean | Triggered when the button is clicked, it returns the status (false for inactive and true for active) |
Example
// page.vue
<template>
<VgDeleteButton
vg-id="vg-delete-button"
text="Delete"
activeBg="blue"
activeColor="#E35BF9"
@clicked="changeStatus"
/>
</template>
<script setup>
const changeStatus = (value) => {
console.log('clicked event: ', value)
}
return {
changeStatus
}
</script># console
clicked event: true