89 lines
2.0 KiB
Vue
89 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useTranslate } from '@demo/use-translate';
|
|
import { Dialog } from '../../dialog';
|
|
|
|
const i18n = {
|
|
'zh-CN': {
|
|
title: '标题',
|
|
confirm: '提醒',
|
|
message: '是否切换开关？',
|
|
withCell: '搭配单元格使用',
|
|
customSize: '自定义大小',
|
|
customColor: '自定义颜色',
|
|
asyncControl: '异步控制',
|
|
},
|
|
'en-US': {
|
|
title: 'Title',
|
|
confirm: 'Confirm',
|
|
message: 'Are you sure to toggle switch?',
|
|
withCell: 'Inside a Cell',
|
|
customSize: 'Custom Size',
|
|
customColor: 'Custom Color',
|
|
asyncControl: 'Async Control',
|
|
},
|
|
};
|
|
|
|
const t = useTranslate(i18n);
|
|
const checked = ref(true);
|
|
const checked2 = ref(true);
|
|
const checked3 = ref(true);
|
|
const checked4 = ref(true);
|
|
const checked5 = ref(true);
|
|
|
|
const onUpdateValue = (checked: boolean) => {
|
|
Dialog.confirm({
|
|
title: t('title'),
|
|
message: t('message'),
|
|
}).then(() => {
|
|
checked4.value = checked;
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<demo-block :title="t('basicUsage')">
|
|
<van-switch v-model="checked" />
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('disabled')">
|
|
<van-switch v-model="checked" disabled />
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('loadingStatus')">
|
|
<van-switch v-model="checked" loading />
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('customSize')">
|
|
<van-switch v-model="checked2" size="24px" />
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('customColor')">
|
|
<van-switch
|
|
v-model="checked3"
|
|
active-color="#ee0a24"
|
|
inactive-color="#dcdee0"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('asyncControl')">
|
|
<van-switch :model-value="checked4" @update:model-value="onUpdateValue" />
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('withCell')">
|
|
<van-cell center :title="t('title')">
|
|
<template #right-icon>
|
|
<van-switch v-model="checked5" size="24" />
|
|
</template>
|
|
</van-cell>
|
|
</demo-block>
|
|
</template>
|
|
|
|
<style lang="less">
|
|
.demo-switch {
|
|
.van-switch {
|
|
margin-left: var(--van-padding-md);
|
|
}
|
|
}
|
|
</style>
|