@vemlavaraloucagamers/vg-delete-button NPM

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>