vue-prevent-back
v0.0.5
Published
prevent back directive for Vue.js.
Downloads
31
Readme
Vue Prevent Back
Prevent Back Directive for Vue2.
Installation
npm install vue-prevent-back --saveUsage
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