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-button

Usage

// 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 | | Sets the id attribute to differentiate from other components | | 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

License

MIT