<template>
<zk-theme type="page" :padding="30" showBack navbarTitle="开关">
<!-- 基础用法 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" align="center" />
<view class="block-item">
<zk-text type="third" :size="26" text="默认" />
<zk-switch v-model="value1" />
</view>
<view class="block-item">
<zk-text type="third" :size="26" text="自定义颜色" />
<zk-switch v-model="value2" active-color="#10B981" inactive-color="#E5E7EB" />
</view>
</zk-theme>
<!-- 不同尺寸 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="不同尺寸" align="center" />
<view class="block-item">
<zk-text type="third" :size="26" text="小号" />
<zk-switch v-model="value3" size="small" />
</view>
<view class="block-item">
<zk-text type="third" :size="26" text="默认" />
<zk-switch v-model="value4" size="normal" />
</view>
<view class="block-item">
<zk-text type="third" :size="26" text="大号" />
<zk-switch v-model="value5" size="large" />
</view>
</zk-theme>
<!-- 不同类型 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="不同类型" align="center" />
<view class="block-item">
<zk-text type="third" :size="26" text="主要" />
<zk-switch v-model="value6" type="primary" />
</view>
<view class="block-item">
<zk-text type="third" :size="26" text="成功" />
<zk-switch v-model="value7" type="success" />
</view>
<view class="block-item">
<zk-text type="third" :size="26" text="警告" />
<zk-switch v-model="value8" type="warning" />
</view>
<view class="block-item">
<zk-text type="third" :size="26" text="错误" />
<zk-switch v-model="value9" type="error" />
</view>
</zk-theme>
<!-- 禁用状态 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="禁用状态" align="center" />
<view class="block-item">
<zk-text type="third" :size="26" text="关闭禁用" />
<zk-switch v-model="value12" :disabled="true" />
</view>
<view class="block-item">
<zk-text type="third" :size="26" text="打开禁用" />
<zk-switch v-model="value13" :disabled="true" />
</view>
</zk-theme>
<!-- 加载状态 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="加载状态" align="center" />
<view class="block-item">
<zk-text type="third" :size="26" text="关闭加载" />
<zk-switch v-model="value14" :loading="true" />
</view>
<view class="block-item">
<zk-text type="third" :size="26" text="打开加载" />
<zk-switch v-model="value15" :loading="true" />
</view>
</zk-theme>
<!-- 异步控制 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="异步控制" align="center" />
<view class="block-item">
<zk-text type="third" :size="26" text="异步操作" />
<zk-switch v-model="value16" :loading="loading" @change="onAsyncChange" />
</view>
</zk-theme>
</zk-theme>
</template>
<script>
export default {
data() {
return {
value1: false,
value2: true,
value3: false,
value4: true,
value5: false,
value6: true,
value7: true,
value8: true,
value9: true,
value10: false,
value11: true,
value12: false,
value13: true,
value14: false,
value15: true,
value16: false,
loading: false
}
},
methods: {
// 异步切换
onAsyncChange(value) {
this.loading = true
// 模拟异步请求
setTimeout(() => {
this.loading = false
this.value16 = value
}, 1000)
}
}
}
</script>
<style lang="scss">
.block-item {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 24rpx;
&:last-child {
margin-bottom: 0;
}
.zk-text {
width: 160rpx;
}
}
/* #ifdef APP-NVUE */
.block-item {
width: 662rpx;
}
/* #endif */
</style>