https://github.com/amitavroy/vuejs-confirm-directive

A simple directive on any HTML element to get a confirm action
https://github.com/amitavroy/vuejs-confirm-directive

Last synced: about 7 hours ago
JSON representation

A simple directive on any HTML element to get a confirm action

• Host: GitHub
• URL: https://github.com/amitavroy/vuejs-confirm-directive
• Owner: amitavroy
• Created: 2018-06-21T16:56:39.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-27T16:29:08.000Z (over 6 years ago)
• Last Synced: 2024-12-29T11:37:26.946Z (18 days ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue.js Confirm directive

A confirmation is always required on tasks which if a user takes, can have certain consequences. For example deleting a user, publishing an article and many such things. Creating a confirmation box to show a message and make the user aware is important.

This directive will help create a confirmation box for the user with a custom alert message and then allow to handle the action.

There exist a lot of components which gives you buttons but why should we restrict a user to a button. Can be any HTML element like image. And hence, this directive.

## Installation

#### using NPM:

```js

npm i vuejs-confirm-directive

```

#### using Yarn:

```js

yarn add vuejs-confirm-directive

```

## Usage

You can do a require in your main js and then use the directive anywhere in the

application.

```

require('vuejs-confirm-directive');

```

### Example 1 - get confirmation, send post data and reload page

```

```

### Example 2 - get confirmation, send post data and handle the callback

```

```

### Example 3 - get confirmation, and do nothing

```

```

## Options / attributes to send with the directive

Below is a list of attributes that you can send and what that does.

| Props | Type | Optional | Options |

| ----- | ---- | -------- | ------- |

| link | String | required | any valid url

| message | String | required | custom message

| data | Object | optional | payload to the post url

| callback | function | optional | function or name of function

**NOTE:** When the reload modifier is not provided, a callback function is

required. If, for any situation you don't want to handle the confirm of user

(which I feel is a rare case) pass null or false to the callback property.