janl-components

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.