0.7.0 • Published 2 years ago

@frontend_worker/switch-loading v0.7.0

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

switch切换组件,支持切换前判断

import switchLoading from '@frontend_worker/switch-loading/dist/switchLoading'
import '@frontend_worker/switch-loading/dist/styles/switchLoading.css'

Vue.use(switchLoading)
    <div>
        单独使用
        <SwitchLoading v-model="switch1">
            <span slot="open">开</span>
            <span slot="close">关</span>
        </SwitchLoading>
        尺寸
        <SwitchLoading size="large" loading></SwitchLoading>
        <SwitchLoading></SwitchLoading>
        <SwitchLoading size="small" v-model="m1" :loading="loading"></SwitchLoading>
        文字和图标
        <SwitchLoading>
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
        </SwitchLoading>
        <SwitchLoading size="large">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
        </SwitchLoading>
        <SwitchLoading size="large" v-model="m1" :loading="loading">
            <span slot="open">ON</span>
            <span slot="close">OFF</span>
        </SwitchLoading>
        不可用
        <SwitchLoading :disabled="disabled"></SwitchLoading>
        <button type="primary" @click="disabled = !disabled">Toggle Disabled</button>
        切换前判断
        <SwitchLoading v-model="m2" :loading="loading2" @on-change="change" :before-change="beforeChange">
            <span slot="open">开</span>
            <span slot="close">关</span>
        </SwitchLoading>
    </div>
    export default {
        data () {
            return {
                m1: true,
                m2: true,
                disabled: true,
                loading: false,
                loading2: false,
                switch1: true
            };
        },
        methods: {
            change (status) {
                console.log(status);
            },
            beforeChange () {
                this.loading2 = true;
                return new Promise(async(resolve, reject) => {
                    setTimeout(() => {
                        resolve();
                        this.loading2 = false;
                    }, 1000);
                });
            }
        }
    };
属性说明类型默认值
before-change切换前调用Function
0.5.0

2 years ago

0.7.0

2 years ago

0.6.0

2 years ago

0.4.0

2 years ago

0.3.0

2 years ago

0.2.0

2 years ago