Vue-prevent-back NPM

Vue Prevent Back

Prevent Back Directive for Vue2.

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

@infinitebrahmanuniverse/nolb-vue-pr @everything-registry/sub-chunk-3089

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago