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. .Syncmodifier 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