0.7.0 • Published 2 years ago
@frontend_worker/switch-loading v0.7.0
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 |