1.0.6 • Published 2 years ago
vue-dark-switch v1.0.6
README 🦉
English | Chinese
动机
暗黑模式开关是一个项目中常用的功能,为了减少后续新项目的工作量,所以封装了这个组件。
特性
- 美观的
- 开箱即用的
- 支持手动操作
naive-ui
支持
使用
安装
npm i vue-dark-switch
基础
<script setup>
import { Switch } from "vue-dark-switch"
</script>
<template>
<Switch />
</template>
支持自定义 Switch
背景色
<template>
<Switch darkBackground="#fff" lightBackground="#2D2D2D" />
</template>
<script setup>
import { Switch } from "vue-dark-switch"
import WorkspacePremiumTwotone from "@vicons/material/es/WorkspacePremiumTwotone"
import WorkspacePremiumOutlined from "@vicons/material/es/WorkspacePremiumOutlined"
</script>
<template>
<Switch>
<template #dark>
<WorkspacePremiumOutlined />
</template>
<template #light>
<WorkspacePremiumTwotone />
</template>
</Switch>
</template>
纯图标
<script setup>
import { SwitchIcon } from "vue-dark-switch"
</script>
<template>
<SwitchIcon />
</template>
自定义图标
<script setup>
import { SwitchIcon } from "vue-dark-switch"
import WorkspacePremiumOutlined from "@vicons/material/es/WorkspacePremiumOutlined"
import WorkspacePremiumTwotone from "@vicons/material/es/WorkspacePremiumTwotone"
</script>
<template>
<SwitchIcon>
<template #dark>
<WorkspacePremiumOutlined />
</template>
<template #light>
<WorkspacePremiumTwotone />
</template>
</SwitchIcon>
</template>
nuxt
// nuxt.config.ts
export default defineNuxtConfig({
build: {
transpile: ["vue-dark-switch"],
},
})
<script setup lang="ts">
import { Switch } from "vue-dark-switch"
</script>
<template>
<div>
<ClientOnly>
<Switch />
</ClientOnly>
</div>
</template>
手动
import { isDark, toggleDark } from "vue-dark-switch"
isDark.value // 是否是暗黑模式
toggleDark(false) // 取消暗黑模式
toggleDark(true) // 开启暗黑模式
toggleDark() // 切换模式
naive-ui
支持
<!-- App.vue -->
<script setup>
import { NConfigProvider } from "naive-ui"
import { naiveTheme } from "vue-dark-switch"
</script>
<template>
<n-config-provider :theme="naiveTheme">
<router-view />
</n-config-provider>
</template>
Refs
该组件由以下库搭建而成
Support
该组件由 vue3-exports 和 vite-layers 提供支持
License
Made with markthree
Published under MIT License.
1.0.6
2 years ago
1.0.1
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.0
2 years ago
0.5.8
2 years ago
0.5.7
2 years ago
0.5.9
2 years ago
0.3.0
2 years ago
0.2.1
2 years ago
0.5.4
2 years ago
0.4.4
2 years ago
0.5.6
2 years ago
0.5.5
2 years ago
0.5.0
2 years ago
0.4.1
2 years ago
0.4.0
2 years ago
0.2.2
2 years ago
0.5.2
2 years ago
0.4.3
2 years ago
0.5.1
2 years ago
0.4.2
2 years ago
0.1.10
3 years ago
0.1.11
3 years ago
0.2.0
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.9
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.2
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.1
3 years ago
0.0.4
3 years ago