1.0.12 • Published 5 years ago
@mathewparet/vue-bs-disabled v1.0.12
@mathewparet/vue-bs-disabled
A Vue.Js directive to disable bootstrap controls. Unlike normal disable property of control buttons, bootstrap requires disabled added to the class to get the control to be disabled. This is useful mostly when you need to disable some controls in VUE based on certain conditions.
Build Setup
# install dependencies
npm install
# build for production with minification
npm run build
Installation
npm i @mathewparet/vue-bs-disabled
Initial Configuration Usage
// In your App.js
import Vue from 'vue';
import BsDisabled from '@mathewparet/vue-bs-disabled';
Vue.use(BsDisabled)
To use the directive simply add v-bs-disabled
to the corresponding element with the required condition.
Simple Usage Example
<div>
<a class="btn btn-primary" v-bs-disabled="1==1">This button is disabled</a><br>
<a class="btn btn-primary" v-bs-disabled="1==0">This button is enabled</a><br>
<a class="btn btn-primary" v-bs-disabled.hidden="1==1">This button is hidden</a><br>
<a class="btn btn-primary" v-bs-disabled.hidden="1==0">This button is enabled + visible</a><br>
</div>
Advanced Usage Example
<div>
<a class="btn btn-primary" v-bs-disabled="{hidden: false, condition: 1==1}">This button is disabled</a><br>
<a class="btn btn-primary" v-bs-disabled="{hidden: false, condition: 1==0}">This button is enabled</a><br>
<a class="btn btn-primary" v-bs-disabled="{hidden: true, condition: 1==1}">This button is hidden</a><br>
<a class="btn btn-primary" v-bs-disabled="{hidden: true, condition: 1==0}">This button is enabled + visible</a><br>
</div>
Note
When both .hidden
modifier and the hidden
property of the v-bs-disabled
directives are present, then the element is hidden if the condition evaluates to true
.