{"id":553,"date":"2024-01-13T18:26:47","date_gmt":"2024-01-13T10:26:47","guid":{"rendered":"https:\/\/fugary.com\/?p=553"},"modified":"2024-01-13T18:26:47","modified_gmt":"2024-01-13T10:26:47","slug":"%e4%bb%8e%e9%9b%b6%e6%90%ad%e5%bb%ba%e5%9f%ba%e4%ba%8eelement-plus%e7%9a%84vue3%e9%a1%b9%e7%9b%ae04-%e9%bb%91%e7%99%bd%e8%89%b2%e4%b8%bb%e9%a2%98","status":"publish","type":"post","link":"https:\/\/fugary.com\/?p=553","title":{"rendered":"\u4ece\u96f6\u642d\u5efa\u57fa\u4e8eelement-plus\u7684Vue3\u9879\u76ee04\u2014\u2014\u9ed1\u767d\u8272\u4e3b\u9898"},"content":{"rendered":"<p><code>element-plus<\/code>\u9ed8\u8ba4\u5c31\u652f\u6301\u9ed1\u767d\u8272\u4e3b\u9898\uff0c\u56e0\u6b64\u8981\u5b9e\u73b0\u4e3b\u9898\u5207\u6362\u53ea\u9700\u8981\u5f15\u5165\u76f8\u5173<code>css<\/code>\u6587\u4ef6\uff0c\u7136\u540e\u5728html\u4e0a\u6dfb\u52a0\u4e0a\u540d\u4e3a<code>dark<\/code>\u7684\u7c7b\u5c31\u5b8c\u6210\u4e86<\/p>\n<p>\u6587\u6863\uff1a<a href=\"https:\/\/element-plus.org\/zh-CN\/guide\/theming.html\">https:\/\/element-plus.org\/zh-CN\/guide\/theming.html<\/a><\/p>\n<p>\u4e3a\u4e86\u65b9\u4fbf\u5207\u6362\u4e3b\u9898\uff0c\u8fd9\u91cc\u4f7f\u7528<code>vueuse<\/code>\u7684<code>useDark<\/code>\u65b9\u6cd5\uff0c\u6b64\u65b9\u6cd5\u4f1a\u7ed9<code>html<\/code>\u589e\u52a0\u76f8\u5173\u7684<code>class<\/code><\/p>\n<h3>\u5f15\u5165\u9ed1\u8272\u4e3b\u9898<\/h3>\n<p><code>main.js<\/code>\u4e2d\u5f15\u5165\u9ed1\u8272\u7248<code>css<\/code>\u53d8\u91cf\u6587\u4ef6\uff1a<\/p>\n<pre><code class=\"language-js\">import &#039;element-plus\/dist\/index.css&#039;\n\/\/ \u9ed1\u8272\u4e3b\u9898\u53d8\u91cf\nimport &#039;element-plus\/theme-chalk\/dark\/css-vars.css&#039;<\/code><\/pre>\n<h3>\u5b89\u88c5VueUse<\/h3>\n<p><code>VueUse<\/code>\u662f<code>Vue3<\/code>\u7ec4\u5408\u5f0f<code>API<\/code>\u7684\u5de5\u5177\u96c6\u5408\uff0c\u63d0\u4f9b\u5f88\u591a\u5de5\u5177\u65b9\u4fbf\u5f00\u53d1\u81ea\u5df1\u7684\u7ec4\u4ef6\u7b49\u3002<\/p>\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/vueuse.org\/\">https:\/\/vueuse.org\/<\/a><\/p>\n<p>\u5b89\u88c5\uff1a<code>npm i @vueuse\/core<\/code><\/p>\n<h3>\u5207\u6362\u4e3b\u9898<\/h3>\n<p>\u5728<code>useGlobalConfigStore<\/code>\u4e2d\u5b9a\u4e49<code>isDarkTheme<\/code>\u7684\u53d8\u91cf:<\/p>\n<pre><code class=\"language-js\">const isDarkTheme = useDark()\nchangeTheme (dark) {\n  isDarkTheme.value = dark\n}<\/code><\/pre>\n<p>\u9875\u9762\u4e0a\u5207\u6362\u4e3b\u9898\uff1a<\/p>\n<pre><code class=\"language-js\">globalConfigStore.changeTheme(!globalConfigStore.isDarkTheme)<\/code><\/pre>\n<p>\u6700\u7ec8\u5f00\u6e90\u5730\u5740\uff1a<\/p>\n<p><a href=\"https:\/\/github.com\/fugary\/simple-element-plus-template\">https:\/\/github.com\/fugary\/simple-element-plus-template<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>element-plus\u9ed8\u8ba4\u5c31\u652f\u6301\u9ed1\u767d\u8272\u4e3b\u9898\uff0c\u56e0\u6b64\u8981\u5b9e\u73b0\u4e3b\u9898\u5207\u6362\u53ea\u9700\u8981\u5f15\u5165\u76f8\u5173css\u6587\u4ef6\uff0c\u7136\u540e\u5728html\u4e0a\u6dfb\u52a0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[137,132,138,10,136],"_links":{"self":[{"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts\/553"}],"collection":[{"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=553"}],"version-history":[{"count":1,"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts\/553\/revisions"}],"predecessor-version":[{"id":554,"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts\/553\/revisions\/554"}],"wp:attachment":[{"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}