記錄一下如何使用Naive UI+Vue3代碼來實現(xiàn)一鍵切換明暗主題的功能。
效果如下：
Naive UI + Vue3 項目的搭建
終端下輸入：
npm init vue@latest
起好項目的名稱，然后一路回車即可。
cd vue3
npm install
npm run dev
至此Vue3的項目已經(jīng)搭建完畢，打開http://127.0.0.1:5173/就可以看到項目的默認首頁了。
安裝Naive UI依賴庫
npm i -D naive-ui
npm i -D vfonts
然后我們根據(jù)官方出的配置對項目進行簡單的修改vue3項目下邊的main.js
import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'
const app = createApp(App)
app.use(naive)
app.mount('#app')
好啦，Naive UI的依賴也安裝好了。
實現(xiàn)點擊按鈕一鍵切換明暗主題的功能
首先，我們需要從Naive UI中導入darkTheme：
import { darkTheme } from "naive-ui";
然后，我們需要定義一個ref變量來存儲按鈕的標題：
const theme = ref(null); //主題變量
const themebtntit = ref("暗色主題"); //主體按鈕title
接下來，我們需要定義一個函數(shù)來切換主題：
const changetheme = () => {
theme.value = theme.value == null ? darkTheme : null;
themebtntit.value = themebtntit.value == "亮色主題" ? "暗色主題" : "亮色主題";
};
最后，我們需要在模板中添加一個按鈕，并將changetheme函數(shù)綁定到按鈕的點擊事件上：
<n-config-provider :theme="theme">
<n-button @click="changetheme">
{{ themebtntit }}
</n-button>
<n-global-style />
</n-config-provider>
</template>
這樣，當用戶點擊按鈕時，就可以實現(xiàn)一鍵切換明暗主題的功能了。文章來源：http://www.zghlxwxcb.cn/news/detail-660794.html
完整代碼如下
項目代碼倉庫：
https://github.com/bosichong/vue_naive_todos文章來源地址http://www.zghlxwxcb.cn/news/detail-660794.html
到了這里，關于Naive UI+Vue3來實現(xiàn)點擊按鈕一鍵切換明暗主題的功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
