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
