PreferenceSwitch.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <script setup lang="tsx">
  2. import { useStorage } from '@vueuse/core';
  3. import { Switch, Descriptions, DescriptionsItem, theme } from 'ant-design-vue';
  4. import { onMounted, ref } from 'vue';
  5. defineOptions({ name: 'VpPreferenceSwitch' });
  6. const { token } = theme.useToken();
  7. const checked = ref(false);
  8. const preferLocal = useStorage('antdx-docs-preference', 'tsx')
  9. const triggerPreference = (prefer: 'tsx' | 'setup') => {
  10. if (typeof localStorage === 'undefined') {
  11. return () => {}
  12. }
  13. const classList = document.documentElement.classList
  14. classList.remove('prefer-tsx', 'prefer-setup')
  15. classList.add(`prefer-${prefer}`)
  16. preferLocal.value = prefer
  17. };
  18. onMounted(() => {
  19. if (preferLocal.value === 'tsx') {
  20. checked.value = true
  21. }
  22. });
  23. </script>
  24. <template>
  25. <div style="margin-top: 16px;">
  26. <Descriptions>
  27. <DescriptionsItem label="风格偏好">
  28. <Switch
  29. v-model:checked="checked"
  30. @change="(e) => triggerPreference(e ? 'tsx' : 'setup')"
  31. :style="{
  32. background: token.colorBgSpotlight,
  33. }"
  34. unCheckedChildren="setup"
  35. checkedChildren="tsx"
  36. />
  37. </DescriptionsItem>
  38. </Descriptions>
  39. </div>
  40. </template>