aslanon / Vue Confirm Dialog
Licence: mit
Simple Confirm Dialog verification plugin with Vue.js.
Stars: ✭ 62
Projects that are alternatives of or similar to Vue Confirm Dialog
Telegram Anti Revoke
Telegram anti-revoke plugin - Telegram 防撤回插件
Stars: ✭ 1,084 (+1648.39%)
Mutual labels: plugin
Killy
🎮 🆓 Play TiDB in Minecraft! Created by @gaocegege @codeworm96 @hawkingrei in Go Hack 2017
Stars: ✭ 59 (-4.84%)
Mutual labels: plugin
Winhellounlock
KeePass 2 plugin to automatically unlock databases with Windows Hello
Stars: ✭ 61 (-1.61%)
Mutual labels: plugin
Layer
丰富多样的 Web 弹出层组件,可轻松实现 Alert/Confirm/Prompt/ 普通提示/页面区块/iframe/tips等等几乎所有的弹出交互。目前已成为最多人使用的弹层解决方案
Stars: ✭ 8,202 (+13129.03%)
Mutual labels: confirm
Chartjs Plugin Rough
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance
Stars: ✭ 59 (-4.84%)
Mutual labels: plugin
Webconsole
Spigot plugin to manage your server remotely using a web interface
Stars: ✭ 62 (+0%)
Mutual labels: plugin
Babel Plugin Partial Application
[DEPRECATED] Please use https://github.com/citycide/param.macro
Stars: ✭ 60 (-3.23%)
Mutual labels: plugin
Matlab Editor Plugin
Extends features for the matlab editor, Bookmarks, FileStructure, Clipboard stack
Stars: ✭ 58 (-6.45%)
Mutual labels: plugin
Serverauth
An advanced authentication plugin for PocketMine-MP
Stars: ✭ 58 (-6.45%)
Mutual labels: plugin
Quickcolor
Quickly apply fills from the global or document color palettes to selected elements - 🎨
Stars: ✭ 59 (-4.84%)
Mutual labels: plugin
Framework7 Plugin 3d Panels
Framework7 plugin to add 3d effect for side panels
Stars: ✭ 56 (-9.68%)
Mutual labels: plugin
Fileuploaderplugin
Simple cross platform plugin to upload files.
Stars: ✭ 59 (-4.84%)
Mutual labels: plugin
vue-confirm-dialog
Simple Confirm Dialog verification plugin with Vue.js.
Demo: https://aslanon.github.io/vue-confirm-dialog/
Install
$ npm install --save vue-confirm-dialog
Quick Start Usage
In main.js or plugin (for Nuxt.js):
import Vue from 'vue'
import VueConfirmDialog from 'vue-confirm-dialog'
Vue.use(VueConfirmDialog)
Vue.component('vue-confirm-dialog', VueConfirmDialog.default)
In App.vue (or in the template file for Nuxt.js (layout/default.vue)):
<template>
<div id="app">
<vue-confirm-dialog></vue-confirm-dialog>
<!-- your code -->
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
In any of functions :
methods: {
handleClick(){
this.$confirm(
{
message: `Are you sure?`,
button: {
no: 'No',
yes: 'Yes'
},
/**
* Callback Function
* @param {Boolean} confirm
*/
callback: confirm => {
if (confirm) {
// ... do something
}
}
}
)
}
}
If you want to use in *.js file (e.g Vuex Store) before import Vue and after use Vue.$confirm.
import Vue from 'vue'
export default {
namespaced: true,
state: {},
actions: {
logout({ commit }) {
Vue.$confirm({
title: 'Are you sure?',
message: 'Are you sure you want to logout?',
button: {
yes: 'Yes',
no: 'Cancel'
},
callback: confirm => {
// ...do something
}
})
}
}
}
API
If you want to password confirm, "auth" key is must be true.
this.$confirm({
auth: true,
message: 'foo',
button: {
yes: 'Yes',
no: 'Cancel'
},
/**
* Callback Function
* @param {Boolean} confirm
* @param {String} password
*/
callback: (confirm, password) => {
if (confirm && password == YOUR_PASSWORD) {
// ...do something
}
}
})
Use only for information
If you want to use only for information and you want of see one button in dialog, you can use only one of 'no' or 'yes' button object.
methods: {
handleClick(){
this.$confirm(
{
title: 'Information',
message: 'This content has been removed',
button: {
yes: 'OK',
}
},
/**
* Callback Function
* @param {Boolean} confirm
*/
callback: confirm => {
if (confirm) {
// ... do something
}
}
)
}
}
Style
You can add own class name to vue-confirm-dialog component. and you can write your own styles for confirm dialog.
<vue-confirm-dialog class="my-class"></vue-confirm-dialog>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].