0.3.0 • Published 4 years ago
vue-confirm-mobile v0.3.0
vue-confirm-mobile
A confirm component based on Vue2 in mobile.
Install
$ npm i vue-confirm-mobile --save
Usage
This module provides two ways to use components. First, in main.js Import components in:
- Mount as component:
// main.js
import Vue from "vue";
import App from "./App.vue";
import { VConfirm } from "vue-confirm-mobile";
// import style
import "vue-confirm-mobile/lib/vue-confirm-mobile.css"
Vue.config.productionTip = false;
Vue.component(VConfirm.name, VConfirm);
// Then use it in any. Vue file
<template>
<v-confirm
:visible.sync="visible"
round
shadow
@cancel="cancel"
@open="open"
@close="close"
@confirm="confirm"
titleClassName="title"
// use prop to define content
title="title"
content="content"
>
<!--or use slot to define content
<template slot="head">I'm title</template>
<template slot="body">I'm content</template>-->
</v-confirm>
</template>
<script>
export default {
data(){
return {
visible:true
}
},
methods:{
cancel(){},
close(){},
open(){},
confirm(){}
}
}
</script>
Using components as methods
// main.js import Vue from "vue"; import App from "./App.vue"; import VConfirm from "vue-confirm-mobile"; // import style import "vue-confirm-mobile/lib/vue-confirm-mobile.css" Vue.config.productionTip = false; Vue.use(VConfirm); // Then use it in any. Vue file export default { //... methods:{ openConfirm(){ this.$confirm({ title:'title', content:'content' }) } } }
Options
When used as a component:
basic property:
name type default description visible Boolean false Whether the component is visible or not. .Sync
modifier is required to synchronize the status.title String 'confirm' Component title content String 'Are you sure?' Component body content cancelText String 'cancel' Text displayed on Cancel button confirmText String 'confirm' Text displayed on Confirm button mask Boolean true Whether there is a mask titleClassName String --- --- contentClassName String --- --- footerClassName String --- --- round Boolean false Whether there is fillet effect shadow Boolean false Whether there is shadow password Boolean false Whether there is a password input passwordRequired Boolean true Whether password is required or not passwordPlaceholder String 'Password' password placeholder closeOnClickMask Boolean false --- events:
eventName | description |
---|---|
open | Triggered when displayed |
close | Trigger when it disappears |
cancel | Triggered when the cancel button is clicked |
confirm | Triggered when the confirm button is clicked,if password set to true,will receive password value as parameter. |
slots:
slotName | description |
---|---|
head | Custom header content |
body | Custom body content |
- When used as a function:
this.$confirm(options)
options
:
{
title,
content,
cancelText,
confirmText,
titleClassName,
contentClassName,
footerClassName,
mask,
round,
shadow,
password,
passwordRequired,
passwordPlaceholder,
closeOnClickMask,
onConfirm,
onCancel
}
License
MIT