https://varlet-vue2.vercel.app/assets/zh-CN.6c51ccc5.js

1import{n as e}from"./index.4fcfdb0e.js";import"./vendor.c9dd9d4d.js";var l=function(){var s=this,r=s.$createElement,t=s._self._c||r;return t("div",{staticClass:"varlet-site-doc"},[t("h1",[s._v("\u6837\u5F0F\u5B9A\u5236")]),s._m(0),t("div",{staticClass:"card"},[t("h3",[s._v("\u57FA\u672C\u6837\u5F0F\u53D8\u91CF")]),t("p",[s._v("\u4EE5\u4E0B\u662F\u7EC4\u4EF6\u5E93\u4E00\u4E9B\u57FA\u672C\u7684\u6837\u5F0F\u53D8\u91CF")]),t("var-site-code-example",[t("pre",{staticClass:"hljs"},[t("code",{pre:!0},[t("span",{pre:!0,attrs:{class:"hljs-selector-pseudo"}},[s._v(":root")]),s._v(` {
2  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v("-xs: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(`;
3  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v("-sm: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(`;
4  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v("-md: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(`;
5  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v("-lg: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("16px")]),s._v(`;
6  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("icon")]),s._v("-size-xs: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("16px")]),s._v(`;
7  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("icon")]),s._v("-size-sm: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(`;
8  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("icon")]),s._v("-size-md: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(`;
9  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("icon")]),s._v("-size-lg: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("22px")]),s._v(`;
10  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v("-"),t("span",{pre:!0,attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(`;
11  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v("-text: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(`;
12  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v("-primary: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#3a7afe")]),s._v(`;
13  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v("-info: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#00afef")]),s._v(`;
14  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v("-success: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#00c48f")]),s._v(`;
15  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v("-warning: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#ff9f00")]),s._v(`;
16  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v("-danger: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#f44336")]),s._v(`;
17  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v("-disabled: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#e0e0e0")]),s._v(`;
18  --`),t("span",{pre:!0,attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v("-text-disabled: "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("#aaa")]),s._v(`;
19  --cubic-bezier: `),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("cubic-bezier")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.25")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.8")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v(", "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("1")]),s._v(`);
20}
21`)])])])],1),s._m(1),t("div",{staticClass:"card"},[t("h3",[s._v("\u5F15\u5165")]),t("var-site-code-example",[t("pre",{staticClass:"hljs"},[t("code",{pre:!0},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v(`
22`),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { StyleProvider } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}}

22,[s._v("'@varlet-vue2/ui'")]),s._v(`
23
24Vue.use(StyleProvider)
25`)])])])],1),t("div",{staticClass:"card"},[t("h3",[s._v("\u5C40\u90E8\u5F15\u5165")]),t("var-site-code-example",[t("pre",{staticClass:"hljs"},[t("code",{pre:!0},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { StyleProvider } "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'@varlet-vue2/ui'")]),s._v(`
26
27`),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(` {
28  `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("components")]),s._v(`: {
29    [StyleProvider.Component.name]: StyleProvider
30  }
31}
32`)])])])],1),t("div",{staticClass:"card"},[t("h3",[s._v("\u7EC4\u4EF6\u5F0F\u8C03\u7528")]),s._m(2),t("var-site-code-example",[t("pre",{staticClass:"hljs"},[t("code",{pre:!0},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("var-style-provider")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v(":style-vars")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"styleVars"')]),s._v(">")]),s._v(`
33  `),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("var-rate")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state.score"')]),s._v(" />")]),s._v(`
34  `),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("var-switch")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"state.license"')]),s._v(" />")]),s._v(`
35  `),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}}

35,[s._v("var-button")]),s._v(`
36    `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"margin-top: 10px"')]),s._v(`
37    `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(`
38    `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("block")]),s._v(`
39    @`),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"toggleTheme"')]),s._v(`
40  >`)]),s._v(`
41    \u5207\u6362\u6837\u5F0F\u53D8\u91CF
42  `),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("var-button")]),s._v(">")]),s._v(`
43`),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("var-style-provider")]),s._v(">")]),s._v(`
44`)])])]),t("var-site-code-example",[t("pre",{staticClass:"hljs"},[t("code",{pre:!0},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(` {
45  `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("() =>")]),s._v(` ({
46    `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(`: {
47      `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("score")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-number"}},[s._v("5")]),s._v(`,
48      `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("license")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(`,
49    },
50    `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("successTheme")]),s._v(`: {
51      `),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'--rate-primary-color'")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'var(--color-success)'")]),s._v(`,
52      `),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'--button-primary-color'")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'var(--color-success)'")]),s._v(`,
53      `),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'--switch-handle-active-background'")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'var(--color-success)'")]),s._v(`,
54      `),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'--switch-track-active-background'")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'var(--color-success)'")]),s._v(`,
55    },
56    `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("styleVars")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(`
57  }),
58  `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(`: {
59    `),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-title"}},[s._v("toggleTheme")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}}),s._v(")")]),s._v(` {
60      `),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("this")]),s._v(".styleVars = "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("this")]),s._v(".styleVars ? "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(" : "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("this")]),s._v(`.successTheme
61    }
62  }
63}
64`)])])])],1),t("div",{staticClass:"card"},[t("h3",[s._v("\u51FD\u6570\u5F0F\u8C03\u7528")]),s._m(3),t("var-site-code-example",[t("pre",{staticClass:"hljs"},[t("code",{pre:!0},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}}

64,[s._v("var-button")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("block")]),s._v(" @"),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("click")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"toggleRootTheme"')]),s._v(">")]),s._v("\u5207\u6362\u6839\u8282\u70B9\u6837\u5F0F\u53D8\u91CF"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("var-button")]),s._v(">")]),s._v(`
65`)])])]),t("var-site-code-example",[t("pre",{staticClass:"hljs"},[t("code",{pre:!0},[t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(` {
66  `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("() =>")]),s._v(` ({
67    `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("rootStyleVars")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(`,
68    `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("darkTheme")]),s._v(`: {
69      `),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'--color-primary'")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'#3f51b5'")]),s._v(`
70    }
71  }),
72  `),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(`: {
73    `),t("span",{pre:!0,attrs:{class:"hljs-function"}},[t("span",{pre:!0,attrs:{class:"hljs-title"}},[s._v("toggleRootTheme")]),s._v("("),t("span",{pre:!0,attrs:{class:"hljs-params"}}),s._v(")")]),s._v(` {
74      `),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("this")]),s._v(".rootStyleVars = "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("this")]),s._v(".rootStyleVars ? "),t("span",{pre:!0,attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(" : "),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("this")]),s._v(`.darkTheme
75      StyleProvider(`),t("span",{pre:!0,attrs:{class:"hljs-built_in"}},[s._v("this")]),s._v(`.rootStyleVars)
76    }
77  }
78}
79`)])])])],1),t("h2",[s._v("API")]),s._m(4),s._m(5)])},v=[function(){var s=this,r=s.$createElement,t=s._self._c||r;return t("div",{staticClass:"card"},[t("h3",[s._v("\u4ECB\u7ECD")]),t("p",[s._v("\u7EC4\u4EF6\u5E93\u901A\u8FC7 "),t("a",{attrs:{href:"https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties"}},[s._v("css \u53D8\u91CF")]),s._v("\u6765\u7EC4\u7EC7\u6837\u5F0F\uFF0C\u6BCF\u4E2A\u7EC4\u4EF6\u90FD\u6709\u5BF9\u5E94\u7684\u6837\u5F0F\u53D8\u91CF\uFF0C \u60A8\u53EF\u4EE5\u901A\u8FC7 css \u6587\u4EF6\u8986\u76D6\u7684\u65B9\u5F0F\u76F4\u63A5\u66FF\u6362\u6839\u8282\u70B9\u4E0A\u7684\u6837\u5F0F\u53D8\u91CF, \u6216\u8005\u4F7F\u7528 StyleProvider \u7EC4\u4EF6\u3002")])])},function(){var s=this,r=s.$createElement,t=s._self._c||r;return t("div",{staticClass:"card"},[t("h3",[s._v("\u8FD0\u884C\u65F6\u4FEE\u6539\u6837\u5F0F")]),t("p",[s._v("\u53EF\u80FD\u60A8\u6709\u5728\u7A0B\u5E8F\u8FD0\u884C\u65F6\u66FF\u6362\u6837\u5F0F\u7684\u9700\u6C42\uFF0C\u6BD4\u5982\u4E00\u952E\u6362\u80A4\u4E4B\u7C7B\u7684\uFF0C\u7EC4\u4EF6\u5E93\u63D0\u4F9B\u4E86 StyleProvider \u7EC4\u4EF6\u6765\u8F85\u52A9\u7BA1\u7406\u6837\u5F0F\uFF0C \u7EC4\u4EF6\u63D0\u4F9B\u4E86 "),t("code",{pre:!0},[s._v("\u7EC4\u4EF6\u5F0F\u8C03\u7528")]),s._v(" \u548C "),t("code",{pre:!0},[s._v("\u51FD\u6570\u5F0F\u8C03\u7528")]),s._v(" \u548C\u4E24\u79CD\u8C03\u7528\u65B9\u5F0F\u3002")])])},function(){var s=this,r=s.$createElement,t=s._self._c||r;return t("p",[s._v("\u7EC4\u4EF6\u5F0F\u8C03\u7528\u53EF\u4EE5\u6709\u8303\u56F4\u6027\u7684\u5B9A\u5236\u7EC4\u4EF6\u6837\u5F0F\uFF0C\u907F\u514D\u4E86\u5168\u5C40\u6C61\u67D3\uFF0C\u9700\u8981\u6CE8\u610F\u662F\u6709\u4E9B\u4F7F\u7528 "),t("code",{pre:!0},[s._v("teleport")]),s._v(" \u4F20\u9001\u5230 "),t("code",{pre:!0},[s._v("StyleProvider")]),s._v(" \u5916\u7684\u5143\u7D20\u5C06\u4E0D\u4F1A\u751F\u6548\u3002")])},function(){var s=this,r=s.$createElement,t=s._self._c||r;return t("p",[s._v("\u51FD\u6570\u5F0F\u7684\u8C03\u7528\u662F\u76F4\u63A5\u66F4\u65B0 "),t("code",{pre:!0},[s._v(":root")]),s._v(" \u4E0A\u7684\u53D8\u91CF\uFF0C\u9002\u5408\u9700\u8981\u5168\u5C40\u66F4\u65B0\u6837\u5F0F\u7684\u60C5\u51B5\u3002")])},function(){var s=this,r=s.$createElement,t=s._self._c||r;return t("div",{staticClass:"card"},[t("h3",[s._v("\u5C5E\u6027")]),t("table",[t("thead",[t("tr",[t("th",[s._v("\u53C2\u6570")]),t("th",[s._v("\u8BF4\u660E")]),t("th",[s._v("\u7C7B\u578B")]

79),t("th",[s._v("\u9ED8\u8BA4\u503C")])])]),t("tbody",[t("tr",[t("td",[t("code",{pre:!0},[s._v("style-vars")])]),t("td",[s._v("css \u53D8\u91CF")]),t("td",[t("em",[s._v("Record<string, string>")])]),t("td",[t("code",{pre:!0},[s._v("{}")])])])])])])},function(){var s=this,r=s.$createElement,t=s._self._c||r;return t("div",{staticClass:"card"},[t("h3",[s._v("\u63D2\u69FD")]),t("table",[t("thead",[t("tr",[t("th",[s._v("\u63D2\u69FD\u540D")]),t("th",[s._v("\u8BF4\u660E")]),t("th",[s._v("\u53C2\u6570")])])]),t("tbody",[t("tr",[t("td",[t("code",{pre:!0},[s._v("default")])]),t("td",[s._v("\u7EC4\u4EF6\u5185\u5BB9")]),t("td",[t("code",{pre:!0},[s._v("-")])])])])])])}];const _={components:{}},a={};var n=e(_,l,v,!1,p,null,null,null);function p(s){for(let r in a)this[r]=a[r]}var h=function(){return n.exports}();export{h as default};