❤
npm
Sign UpSign In

vue-prevent-back

0.0.5 • Public • Published

Vue Prevent Back

vue-js downloads npm-version

Prevent Back Directive for Vue2.

Demo

Installation

npm install vue-prevent-back --save

Usage

ES6

import Vue from 'vue'
import VuePreventBack from 'vue-prevent-back'
 
Vue.use(VuePreventBack, options)

Globals

<html>
<head>
  ...
</head>
<body>
  <div id="app">
    <form v-prevent-back>
        ...
    </form>
  </div>
 
  <script src="path/to/vue.js"></script> 
  <script src="path/to/vue-prevent-back.js"></script> 
  <script>
    new Vue({
      el: '#app'
    })
  </script> 
</body>
</html>

Example

Install Options

Option Type Default Description
name String 'prevent-back' change directive name.
message String 'You have unsaved work. Are you sure you want to leave this page?' change default message.

name Example.

import VuePreventBack from 'vue-prevent-back'
 
Vue.use(VuePreventBack, {
    name: "my-prevent-back",
})

Now, you can use directive below.

<form v-my-prevent-back></form>

message Example.

import VuePreventBack from 'vue-prevent-back'
 
Vue.use(VuePreventBack, {
    message: "Are you OKay?",
})

Value

Key Type Default Description
message String install options's message change confirm message.
tester Function () => true checking that form is changing.

message Example.

<form v-prevent-back="'Are you Okay?'"></form>
<form v-prevent-back="{message: 'Are you Okay?'}"></form>

tester Example.

<form v-prevent-back="{tester: () => !isChange)}">
  <CustomInput @change="isChange = true" />
</form>
export default {
  data() {
    return {
      isChange: false,
    };
  },
};

Modifier

Key Description
vue-router-disable not prevent, when vue router changes.
beforeunload-disable not prevent, when beforeunload event occured.
tester-only using tester only. vue-prevent-back check all input's changing. if turn on this modifier, only check tester method.

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i vue-prevent-back

Repository

github.com/wan2land/vue-prevent-back

Homepage

github.com/wan2land/vue-prevent-back#readme

Weekly Downloads

1

Version

0.0.5

License

MIT

Last publish

Collaborators

  • wan2land
Try on RunKit
Report malware