open-index/open-npm huggingface dataset:
npm package: @frontend_worker/switch-loading
Description: switch切换组件，支持切换前判断
Author: Aresn
Latest version: 0.7.0


switch切换组件，支持切换前判断

```javascript
import switchLoading from '@frontend_worker/switch-loading/dist/switchLoading'
import '@frontend_worker/switch-loading/dist/styles/switchLoading.css'

Vue.use(switchLoading)
```

```html
    <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>
```

```javascript
    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 |  |