1.0.7 • Published 4 years ago
janl-components v1.0.7
janl-components
janl-loadingswitch
a component janl-loadingswitch it working like this;
mounted(event) timewait->0 set value
state(init) ----> state(waiting) -----------------------> state(timeout) -----------------> state(ready)
^ | ^ |
| |______________________set value (True/False)_______________________| |
| click it to switch |
----------------------------------------------------------------------------
prop:
val: Boolen , if True switch turn on else turn off. waittime: Nubmer , countdown seconds default is 10
event:
mounted : the component is mounted. for request the fixed status for true or falas. timeouted: the countdown is end , the switch is disabled , cant't click. not set value to it in loading. retry to request. change: the val changed where user click the switch, the val = !val .
quick start
<janl-loadingswitch
:value="val"
:waittime="wait"
@change="loadingSwitchChanged"
@timeouted="loadingTimeOuted"
@mounted="switchMounted"
></janl-loadingswitch>
<button @click="elchange">test button</button>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App',
val: true,
wait: 25,
}
},
methods:{
elchange(){
this.val = !this.val
},
loadingSwitchChanged(val){
console.log("janl-loadingswitchchanged. val is:", val)
},
loadingTimeOuted(val){
console.log("janl-loadingswitch loading timeouted, val is:", val)
},
switchMounted(val){
console.log("janl-loadingswitch mounted, val is:", val)
}
}
}
good lucky
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
For detailed explanation on how things work, consult the docs for vue-loader.