diff --git a/docs/.vuepress/dist/404.html b/docs/.vuepress/dist/404.html index 9dac365..930ee17 100644 --- a/docs/.vuepress/dist/404.html +++ b/docs/.vuepress/dist/404.html @@ -10,11 +10,11 @@ - + -
404
这是一个Four-Oh-Four.
返回首页
- +
404
我是谁？我在哪？
返回首页
+ diff --git a/docs/.vuepress/dist/archives/index.html b/docs/.vuepress/dist/archives/index.html index fe6df13..bd1eae5 100644 --- a/docs/.vuepress/dist/archives/index.html +++ b/docs/.vuepress/dist/archives/index.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@ GitHub (opens new window)

+ (opens new window)

归档

总共 0 篇文章 @@ -35,6 +35,6 @@
  • 阅读模式

    • - + diff --git a/docs/.vuepress/dist/assets/js/10.2c6b507c.js b/docs/.vuepress/dist/assets/js/10.9bc4e830.js similarity index 99% rename from docs/.vuepress/dist/assets/js/10.2c6b507c.js rename to docs/.vuepress/dist/assets/js/10.9bc4e830.js index c1f4ab9..43cb1b7 100644 --- a/docs/.vuepress/dist/assets/js/10.2c6b507c.js +++ b/docs/.vuepress/dist/assets/js/10.9bc4e830.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{340:function(t,a,s){"use strict";s.r(a);var n=s(7),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"文字大小"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字大小"}},[t._v("#")]),t._v(" 文字大小")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-xsl 文字大小 60px 用于图标、数字等特大显示\n.text-sl 文字大小 40px 用于图标、数字等较大显示\n.text-xxl 文字大小 22px 用于金额数字等信息\n.text-xl 文字大小 18px 页面大标题，用于结果页等单一信息页\n.text-lg 文字大小 16px 页面小标题，首要层级显示内容\n.text-df 文字大小 14px 页面默认字号，用于摘要或阅读文本\n.text-sm 文字大小 12px 页面辅助信息，次级内容等\n.text-xs 文字大小 10px 说明文本，标签文字等关注度低的文字\n")])])]),a("h2",{attrs:{id:"文字颜色"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字颜色"}},[t._v("#")]),t._v(" 文字颜色")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-red "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 嫣红 #e54d42 */")]),t._v("\n.text-orange "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 桔橙 #f37b1d */")]),t._v("\n.text-yellow "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 明黄 #fbbd08 */")]),t._v("\n.text-olive "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 橄榄 #8dc63f */")]),t._v("\n.text-green "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 森绿 #39b54a */")]),t._v("\n.text-cyan "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 天青 #1cbbb4 */")]),t._v("\n.text-blue "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 海蓝 #0081ff */")]),t._v("\n.text-purple "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 姹紫 #6739b6 */")]),t._v("\n.text-mauve "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 木槿 #9c26b0 */")]),t._v("\n.text-pink "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 桃粉 #e03997 */")]),t._v("\n.text-brown "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 棕褐 #a5673f */")]),t._v("\n.text-grey "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 玄灰 #8799a3 */")]),t._v("\n.text-gray "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 草灰 #aaaaaa */")]),t._v("\n.text-black "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 墨黑 #333333 */")]),t._v("\n.text-white "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 雅白 #ffffff */")]),t._v("\n")])])]),a("h2",{attrs:{id:"文字阴影"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字阴影"}},[t._v("#")]),t._v(" 文字阴影")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".text-shadow")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色; */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 3px 3px 4px "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("204"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 69"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 59"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"文字截断"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字截断"}},[t._v("#")]),t._v(" 文字截断")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-cut 定义文字容器宽度，超出截断\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-cut padding bg-grey radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token special-attr"}},[a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token value css language-css"}},[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("220px")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"文字对齐"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字对齐"}},[t._v("#")]),t._v(" 文字对齐")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-left 左对齐\n.text-center 居中对齐\n.text-right 右对齐\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-left padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-right padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"特殊文字"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#特殊文字"}},[t._v("#")]),t._v(" 特殊文字")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-price 价格文本，利用伪元素添加"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"¥"')]),t._v("符号\n.text-Abc 英文单词首字母大写\n.text-ABC 全部字母大写\n.text-abc 全部字母小写\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding text-center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-price"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("80.00"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('价格文本，利用伪元素添加"¥"符号'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-Abc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("英文单词首字母大写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-ABC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("全部字母大写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-abc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("全部字母小写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{338:function(t,a,s){"use strict";s.r(a);var n=s(7),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"文字大小"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字大小"}},[t._v("#")]),t._v(" 文字大小")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-xsl 文字大小 60px 用于图标、数字等特大显示\n.text-sl 文字大小 40px 用于图标、数字等较大显示\n.text-xxl 文字大小 22px 用于金额数字等信息\n.text-xl 文字大小 18px 页面大标题，用于结果页等单一信息页\n.text-lg 文字大小 16px 页面小标题，首要层级显示内容\n.text-df 文字大小 14px 页面默认字号，用于摘要或阅读文本\n.text-sm 文字大小 12px 页面辅助信息，次级内容等\n.text-xs 文字大小 10px 说明文本，标签文字等关注度低的文字\n")])])]),a("h2",{attrs:{id:"文字颜色"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字颜色"}},[t._v("#")]),t._v(" 文字颜色")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-red "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 嫣红 #e54d42 */")]),t._v("\n.text-orange "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 桔橙 #f37b1d */")]),t._v("\n.text-yellow "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 明黄 #fbbd08 */")]),t._v("\n.text-olive "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 橄榄 #8dc63f */")]),t._v("\n.text-green "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 森绿 #39b54a */")]),t._v("\n.text-cyan "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 天青 #1cbbb4 */")]),t._v("\n.text-blue "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 海蓝 #0081ff */")]),t._v("\n.text-purple "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 姹紫 #6739b6 */")]),t._v("\n.text-mauve "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 木槿 #9c26b0 */")]),t._v("\n.text-pink "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 桃粉 #e03997 */")]),t._v("\n.text-brown "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 棕褐 #a5673f */")]),t._v("\n.text-grey "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 玄灰 #8799a3 */")]),t._v("\n.text-gray "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 草灰 #aaaaaa */")]),t._v("\n.text-black "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 墨黑 #333333 */")]),t._v("\n.text-white "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 雅白 #ffffff */")]),t._v("\n")])])]),a("h2",{attrs:{id:"文字阴影"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字阴影"}},[t._v("#")]),t._v(" 文字阴影")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".text-shadow")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色; */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 3px 3px 4px "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("204"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 69"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 59"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"文字截断"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字截断"}},[t._v("#")]),t._v(" 文字截断")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-cut 定义文字容器宽度，超出截断\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-cut padding bg-grey radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token special-attr"}},[a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token value css language-css"}},[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("220px")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"文字对齐"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文字对齐"}},[t._v("#")]),t._v(" 文字对齐")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-left 左对齐\n.text-center 居中对齐\n.text-right 右对齐\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-left padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-right padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我于杀戮之中绽放 ,亦如黎明中的花朵"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"特殊文字"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#特殊文字"}},[t._v("#")]),t._v(" 特殊文字")]),t._v(" "),a("blockquote",[a("p",[t._v("css 代码")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v(".text-price 价格文本，利用伪元素添加"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"¥"')]),t._v("符号\n.text-Abc 英文单词首字母大写\n.text-ABC 全部字母大写\n.text-abc 全部字母小写\n")])])]),a("blockquote",[a("p",[t._v("演示代码")])]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding text-center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-price"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("80.00"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('价格文本，利用伪元素添加"¥"符号'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-Abc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("英文单词首字母大写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-ABC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("全部字母大写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding-lr bg-white margin-top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("solid-bottom padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-abc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("color Ui"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("全部字母小写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/11.8f891ef9.js b/docs/.vuepress/dist/assets/js/11.94510164.js similarity index 96% rename from docs/.vuepress/dist/assets/js/11.8f891ef9.js rename to docs/.vuepress/dist/assets/js/11.94510164.js index d8ab0d4..514ee5e 100644 --- a/docs/.vuepress/dist/assets/js/11.8f891ef9.js +++ b/docs/.vuepress/dist/assets/js/11.94510164.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{342:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("温馨提示")]),t._v(" "),s("p",[t._v("点击右侧图标页面，对应的图标，即可复制类名："),s("code",[t._v("cuIcon-图标名称")])])]),t._v(" "),s("h2",{attrs:{id:"引入样式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#引入样式"}},[t._v("#")]),t._v(" 引入样式")]),t._v(" "),s("p",[t._v("编辑 "),s("code",[t._v("App.vue")]),t._v("文件在"),s("code",[t._v("\n\n\n\n# 使用自定义导航栏\n\n导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。\n\nApp.vue 获得系统信息\n\nonLaunch: function() {\n uni.getSystemInfo({\n success: function(e) {\n // #ifndef MP\n Vue.prototype.StatusBar = e.statusBarHeight;\n if (e.platform == \'android\') {\n Vue.prototype.CustomBar = e.statusBarHeight + 50;\n } else {\n Vue.prototype.CustomBar = e.statusBarHeight + 45;\n };\n // #endif\n // #ifdef MP-WEIXIN\n Vue.prototype.StatusBar = e.statusBarHeight;\n let custom = wx.getMenuButtonBoundingClientRect();\n Vue.prototype.Custom = custom;\n Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;\n // #endif\t\t\n // #ifdef MP-ALIPAY\n Vue.prototype.StatusBar = e.statusBarHeight;\n Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;\n // #endif\n }\n })\n},\n\n\npages.json 配置取消系统导航栏\n\n"globalStyle": {\n "navigationStyle": "custom"\n},\n\n\n复制代码结构可以直接使用，注意全局变量的获取。\n\n使用封装,在main.js 引入 cu-custom 组件。\n\nimport cuCustom from \'./colorui/components/cu-custom.vue\'\nVue.component(\'cu-custom\',cuCustom)\n\n\npage.vue 页面可以直接调用了\n\n\n 返回\n 导航栏\n\n\n\n参数 作用 类型 默认值\nbgColor 背景颜色类名 String \'\'\nisBack 是否开启返回 Boolean false\nbgImage 背景图片路径 String \'\'\n\nSLOT块 作用\nbackText 返回时的文字\ncontent 中间区域\nright 右侧区域(小程序端可使用范围很窄！)\n\n\n# 使用原生小程序开发\n\n\n# 从现有项目开始\n\n下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录\n\nApp.wxss` 引入关键Css `main.wxss` `icon.wxss\n@import "colorui/main.wxss";\n@import "colorui/icon.wxss";\n@import "app.css"; /* 你的项目css */\n....\n\n\n\n# 从新项目开始\n\n下载源码解压获得/template，复制/template并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了\n\n\n# 使用自定义导航栏\n\n导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。\n\nApp.js 获得系统信息\n\nonLaunch: function() {\n wx.getSystemInfo({\n success: e => {\n this.globalData.StatusBar = e.statusBarHeight;\n let custom = wx.getMenuButtonBoundingClientRect();\n this.globalData.Custom = custom; \n this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;\n }\n })\n},\n\n\nApp.json 配置取消系统导航栏,并全局引入组件\n\n"window": {\n "navigationStyle": "custom"\n},\n"usingComponents": {\n "cu-custom":"/colorui/components/cu-custom"\n}\n\n\npage.wxml 页面可以直接调用了\n\n\n 返回\n 导航栏\n\n\n\n参数 作用 类型 默认值\nbgColor 背景颜色类名 String \'\'\nisBack 是否开启返回 Boolean false\nisCustom 是否开启左侧胶囊 Boolean false\nbgImage 背景图片路径 String \'\'\n\nSLOT块 作用\nbackText 返回时的文字\ncontent 中间区域\nright 右侧区域(小程序端可使用范围很窄！)',normalizedContent:'# 素材\n\ncolorui在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和ui素材供开发使用哦！ 语雀-colorui群资源\n\n\n# 前言\n\ncolorui是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。\n\n\n# 交流\n\n微信群：加入微信群请先添加开发者微信，备注uniapp插件市场。qq群：240787041 或扫描二维码。\n\n\n\n\n# 使用uniapp开发\n\n\n# 开始\n\n下载源码解压获得/colorui-uniapp文件夹，复制目录下的 /colorui 文件夹到你的项目根目录\n\napp.vue` 引入关键css `main.css` `icon.css\n\n\n\n\n# 使用自定义导航栏\n\n导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。\n\napp.vue 获得系统信息\n\nonlaunch: function() {\n uni.getsysteminfo({\n success: function(e) {\n // #ifndef mp\n vue.prototype.statusbar = e.statusbarheight;\n if (e.platform == \'android\') {\n vue.prototype.custombar = e.statusbarheight + 50;\n } else {\n vue.prototype.custombar = e.statusbarheight + 45;\n };\n // #endif\n // #ifdef mp-weixin\n vue.prototype.statusbar = e.statusbarheight;\n let custom = wx.getmenubuttonboundingclientrect();\n vue.prototype.custom = custom;\n vue.prototype.custombar = custom.bottom + custom.top - e.statusbarheight;\n // #endif\t\t\n // #ifdef mp-alipay\n vue.prototype.statusbar = e.statusbarheight;\n vue.prototype.custombar = e.statusbarheight + e.titlebarheight;\n // #endif\n }\n })\n},\n\n\npages.json 配置取消系统导航栏\n\n"globalstyle": {\n "navigationstyle": "custom"\n},\n\n\n复制代码结构可以直接使用，注意全局变量的获取。\n\n使用封装,在main.js 引入 cu-custom 组件。\n\nimport cucustom from \'./colorui/components/cu-custom.vue\'\nvue.component(\'cu-custom\',cucustom)\n\n\npage.vue 页面可以直接调用了\n\n\n 返回\n 导航栏\n\n\n\n参数 作用 类型 默认值\nbgcolor 背景颜色类名 string \'\'\nisback 是否开启返回 boolean false\nbgimage 背景图片路径 string \'\'\n\nslot块 作用\nbacktext 返回时的文字\ncontent 中间区域\nright 右侧区域(小程序端可使用范围很窄！)\n\n\n# 使用原生小程序开发\n\n\n# 从现有项目开始\n\n下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录\n\napp.wxss` 引入关键css `main.wxss` `icon.wxss\n@import "colorui/main.wxss";\n@import "colorui/icon.wxss";\n@import "app.css"; /* 你的项目css */\n....\n\n\n\n# 从新项目开始\n\n下载源码解压获得/template，复制/template并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了\n\n\n# 使用自定义导航栏\n\n导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。\n\napp.js 获得系统信息\n\nonlaunch: function() {\n wx.getsysteminfo({\n success: e => {\n this.globaldata.statusbar = e.statusbarheight;\n let custom = wx.getmenubuttonboundingclientrect();\n this.globaldata.custom = custom; \n this.globaldata.custombar = custom.bottom + custom.top - e.statusbarheight;\n }\n })\n},\n\n\napp.json 配置取消系统导航栏,并全局引入组件\n\n"window": {\n "navigationstyle": "custom"\n},\n"usingcomponents": {\n "cu-custom":"/colorui/components/cu-custom"\n}\n\n\npage.wxml 页面可以直接调用了\n\n\n 返回\n 导航栏\n\n\n\n参数 作用 类型 默认值\nbgcolor 背景颜色类名 string \'\'\nisback 是否开启返回 boolean false\niscustom 是否开启左侧胶囊 boolean false\nbgimage 背景图片路径 string \'\'\n\nslot块 作用\nbacktext 返回时的文字\ncontent 中间区域\nright 右侧区域(小程序端可使用范围很窄！)',charsets:{cjk:!0},lastUpdated:"2023/05/28, 18:15:33",lastUpdatedTimestamp:1685268933e3},{title:"布局",frontmatter:{title:"布局",date:"2023-05-28T10:34:38.000Z",permalink:"/pages/basics/layout",article:!1},regularPath:"/10.%E6%96%87%E6%A1%A3/20.%E5%9F%BA%E7%A1%80%E5%85%83%E7%B4%A0/10.%E5%B8%83%E5%B1%80.html",relativePath:"10.文档/20.基础元素/10.布局.md",key:"v-189fb43f",path:"/pages/basics/layout/",headers:[{level:2,title:"Flex布局",slug:"flex布局",normalizedTitle:"flex布局",charIndex:2},{level:3,title:"固定尺寸",slug:"固定尺寸",normalizedTitle:"固定尺寸",charIndex:36},{level:3,title:"比例布局",slug:"比例布局",normalizedTitle:"比例布局",charIndex:668},{level:3,title:"水平对齐",slug:"水平对齐",normalizedTitle:"水平对齐",charIndex:1453},{level:3,title:"垂直对齐",slug:"垂直对齐",normalizedTitle:"垂直对齐",charIndex:2714},{level:2,title:"Grid布局",slug:"grid布局",normalizedTitle:"grid布局",charIndex:3584},{level:3,title:"等分列",slug:"等分列",normalizedTitle:"等分列",charIndex:3595},{level:3,title:"等高",slug:"等高",normalizedTitle:"等高",charIndex:3901},{level:2,title:"辅助布局",slug:"辅助布局",normalizedTitle:"辅助布局",charIndex:4512},{level:3,title:"浮动",slug:"浮动",normalizedTitle:"浮动",charIndex:4521},{level:3,title:"内外边距",slug:"内外边距",normalizedTitle:"内外边距",charIndex:4740}],headersStr:"Flex布局 固定尺寸 比例布局 水平对齐 垂直对齐 Grid布局 等分列 等高 辅助布局 浮动 内外边距",content:'# Flex布局\n\n父级容器的 class 需要加入 flex\n\n\n# 固定尺寸\n\n> css\n\n.basis-xs 所占比例 20%\n.basis-sm 所占比例 40%\n.basis-sub 所占比例 50%\n.basis-lg 所占比例 60%\n.basis-xl 所占比例 80%\n\n\n> 演示代码\n\n\n xs(20%)\n \n sm(40%)\n \n sub(50%)\n lg(60%)\n xl(80%)\n\n\n\n\n# 比例布局\n\n> css\n\n.flex-sub 所占比例 1\n.flex-twice 所占比例 2\n.flex-treble 所占比例 3\n\n\n> 演示代码\n\n\x3c!-- 1:1 --\x3e\n\n 1\n 1\n\n\x3c!-- 1:2 --\x3e\n\n 1\n 2\n\n\x3c!-- 1:2:3 --\x3e\n\n 1\n 2\n 3\n\n\n\n\n# 水平对齐\n\n父容器的 class 中加入 justify-start|end|center|between|around\n\n> css\n\n.justify-start 对齐方式 从行首开始排列\n.justify-end 对齐方式 从行尾开始排列\n.justify-center 对齐方式 居中排列\n.justify-between 对齐方式 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点\n.justify-around 对齐方式 均匀排列每个元素，每个元素之间的间隔相等\n\n\n> 演示代码\n\n\n start\n start\n\n\n end\n end\n\n\n center\n center\n\n\n between\n between\n\n\n around\n around\n\n\n\n\n# 垂直对齐\n\n父容器的 class 中加入 align-start|end|center\n\n> css\n\n.align-start 对齐方式 元素位于容器的开头，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。\n.align-end 对齐方式 元素位于容器的结尾，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。\n.align-center 对齐方式 元素位于容器的中心，弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。\n\n\n> 演示代码\n\n\n ColorUi\n start\n\n\n ColorUi\n end\n\n\n ColorUi\n center\n\n\n\n\n# Grid布局\n\n\n# 等分列\n\nclass 加入 grid col-1|2|3|...\n\n> 演示代码\n\n\n {{indexs+1}}\n\n\n\n\n# 等高\n\n在 class 中加入 grid col-4|5|... grid-square\n\n\n \n\n\n + diff --git a/docs/.vuepress/dist/pages/base/index.html b/docs/.vuepress/dist/pages/base/index.html index 1113545..292527b 100644 --- a/docs/.vuepress/dist/pages/base/index.html +++ b/docs/.vuepress/dist/pages/base/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 介绍

    温馨提示

    本文档并非是官方文档，而是本人自己经常使用 Color UI，但是又找不到一个满意的文档，不如自己搭建一个文档，自己使用方便的同时也方便大家使用。

    # 基本介绍

    Color UI 我想大家都知晓吧，我就不过多阐述了，是 文晓港 大佬开发的一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的 Css 组件库.，属于出道即巅峰的史诗级大作，众所周知，万物皆可 Color UI，很多人用 Color UI 做了不少精美的项目，我也一样，在此再次感谢作者。

    ColorUI Github地址 (opens new window)

    ColorUI 插件市场 (opens new window)

    ColorUI 在线展示 (opens new window) 因为右侧的h5是用iframe来嵌入的，因此字体和极小一部分的样式会有出入，文档里只做展示，比较完整的样式，点这里查看。

    # 文档说明

    文档左侧目录，基础元素、交互组件、插件扩展分别对应，Color UI 底部对应的三个大模块，而三个模块下二级目录，也分别对应三个页面里的模块，点击目录右侧会跳转到对应的页面。

    在查看文档的同时，可以根据右侧预览图对比当前查看模块的预览效果

    # 视图/目录 切换

    点击h5预览模板左上角的切换视图，可以随心所欲切换目录/视图，方便快速定位需要查找的内容

    上次更新: 2023/05/29, 22:47:21
    快速使用

    快速使用→ +

    介绍

    温馨提示

    本文档并非是官方文档，而是本人自己经常使用 Color UI，但是又找不到一个满意的文档，不如自己搭建一个文档，自己使用方便的同时也方便大家使用。

    # 基本介绍

    Color UI 我想大家都知晓吧，我就不过多阐述了，是 文晓港 大佬开发的一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的 Css 组件库.，属于出道即巅峰的史诗级大作，众所周知，万物皆可 Color UI，很多人用 Color UI 做了不少精美的项目，我也一样，在此再次感谢作者。

    ColorUI Github地址 (opens new window)

    ColorUI 插件市场 (opens new window)

    ColorUI 在线展示 (opens new window) 因为右侧的h5是用iframe来嵌入的，因此字体和极小一部分的样式会有出入，文档里只做展示，比较完整的样式，点这里查看。

    微信扫码预览h5

    # 文档说明

    文档左侧目录，基础元素、交互组件、插件扩展分别对应，Color UI 底部对应的三个大模块，而三个模块下二级目录，也分别对应三个页面里的模块，点击目录右侧会跳转到对应的页面。

    在查看文档的同时，可以根据右侧预览图对比当前查看模块的预览效果

    # 视图/目录 切换

    点击h5预览模板左上角的切换视图，可以随心所欲切换目录/视图，方便快速定位需要查找的内容

    上次更新: 2023/05/29, 22:47:21
    快速使用

    快速使用→

    Theme by Vdoing @@ -36,6 +36,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/baseStart/index.html b/docs/.vuepress/dist/pages/baseStart/index.html index 74ffabd..eba6d2e 100644 --- a/docs/.vuepress/dist/pages/baseStart/index.html +++ b/docs/.vuepress/dist/pages/baseStart/index.html @@ -10,7 +10,7 @@ - + @@ -103,6 +103,6 @@ Vue.componen
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/avatar/index.html b/docs/.vuepress/dist/pages/basics/avatar/index.html index a73122c..cd3e601 100644 --- a/docs/.vuepress/dist/pages/basics/avatar/index.html +++ b/docs/.vuepress/dist/pages/basics/avatar/index.html @@ -10,7 +10,7 @@ - + @@ -75,6 +75,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/background/index.html b/docs/.vuepress/dist/pages/basics/background/index.html index 56c7e40..f0fa460 100644 --- a/docs/.vuepress/dist/pages/basics/background/index.html +++ b/docs/.vuepress/dist/pages/basics/background/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 背景

    # 深色背景

    在 class 中加入 bg-red|orange|...

    .bg-red  /* 嫣红 #e54d42 */
+

    背景

    # 深色背景

    在 class 中加入 bg-red|orange|...

    .bg-red  /* 嫣红 #e54d42 */
 .bg-orange  /* 桔橙 #f37b1d */
 .bg-yellow  /* 明黄 #fbbd08 */
 .bg-olive  /* 橄榄 #8dc63f */
@@ -97,6 +97,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/button/index.html b/docs/.vuepress/dist/pages/basics/button/index.html index 9a00ac3..e81ac1b 100644 --- a/docs/.vuepress/dist/pages/basics/button/index.html +++ b/docs/.vuepress/dist/pages/basics/button/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 按钮

    在 button 上加 class cu-btn 即可

    # 按钮形状

    css 代码

    .cu-btn  默认　　
+

    按钮

    在 button 上加 class cu-btn 即可

    # 按钮形状

    css 代码

    .cu-btn  默认　　
 .cu-btn round  圆角
 .cu-btn cuIcon  图标按钮

    演示代码

    <button class="cu-btn">默认</button>
@@ -73,6 +73,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/icon/index.html b/docs/.vuepress/dist/pages/basics/icon/index.html index aa3f1a1..84586be 100644 --- a/docs/.vuepress/dist/pages/basics/icon/index.html +++ b/docs/.vuepress/dist/pages/basics/icon/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 图标

    温馨提示

    点击右侧图标页面，对应的图标，即可复制类名：cuIcon-图标名称

    # 引入样式

    编辑 App.vue文件在<style> 项引入 icon.css

    <style>
+

    图标

    温馨提示

    点击右侧图标页面，对应的图标，即可复制类名：cuIcon-图标名称

    # 引入样式

    编辑 App.vue文件在<style> 项引入 icon.css

    <style>
     @import "colorui/main.css";
     @import "colorui/icon.css";
 </style>
@@ -43,6 +43,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/layout/index.html b/docs/.vuepress/dist/pages/basics/layout/index.html index a278f26..073d1d5 100644 --- a/docs/.vuepress/dist/pages/basics/layout/index.html +++ b/docs/.vuepress/dist/pages/basics/layout/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 布局

    # Flex布局

    父级容器的 class 需要加入 flex

    # 固定尺寸

    css

    .basis-xs   所占比例 20%
+

    布局

    # Flex布局

    父级容器的 class 需要加入 flex

    # 固定尺寸

    css

    .basis-xs   所占比例 20%
 .basis-sm   所占比例 40%
 .basis-sub  所占比例 50%
 .basis-lg   所占比例 60%
@@ -131,6 +131,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/loading/index.html b/docs/.vuepress/dist/pages/basics/loading/index.html index d91b67b..43cab18 100644 --- a/docs/.vuepress/dist/pages/basics/loading/index.html +++ b/docs/.vuepress/dist/pages/basics/loading/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 加载

    在需要设置加载的元素加上 class 类名 cu-load，可以设置自己喜欢的背景颜色 .bg-red|...

    加载状态 loading 正在加载中，over 加载完成，erro 加载失败

    css

    .cu-load loading  加载中
+

    加载

    在需要设置加载的元素加上 class 类名 cu-load，可以设置自己喜欢的背景颜色 .bg-red|...

    加载状态 loading 正在加载中，over 加载完成，erro 加载失败

    css

    .cu-load loading  加载中
 .cu-load over     加载结束
 .cu-load erro     加载错误
 .cu-load loading load-cuIcon  只有加载图标没有文字
@@ -96,6 +96,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/progress/index.html b/docs/.vuepress/dist/pages/basics/progress/index.html index 2aad0a4..65c5cdb 100644 --- a/docs/.vuepress/dist/pages/basics/progress/index.html +++ b/docs/.vuepress/dist/pages/basics/progress/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 进度条

    父容器加上 class 类名 cu-progress，该容器内放一个元素加上背景 .bg-red|...，设置样式 width: '10%'，10% 就是该进度条的所占比例。

    子容器内的文字会展示在比例中间，进度条展示的时候，作者已经封装好了动画样式，因此 width 属性，配合动态变量即可做到好看的动画效果

    # 进度条形状

    css 代码

    .cu-progress  默认　
+

    进度条

    父容器加上 class 类名 cu-progress，该容器内放一个元素加上背景 .bg-red|...，设置样式 width: '10%'，10% 就是该进度条的所占比例。

    子容器内的文字会展示在比例中间，进度条展示的时候，作者已经封装好了动画样式，因此 width 属性，配合动态变量即可做到好看的动画效果

    # 进度条形状

    css 代码

    .cu-progress  默认　
 .cu-progress round  圆
 .cu-progress radius  椭圆

    演示代码

    <view class="cu-progress">
@@ -110,6 +110,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/shadow/index.html b/docs/.vuepress/dist/pages/basics/shadow/index.html index 077bb6b..f5af4ad 100644 --- a/docs/.vuepress/dist/pages/basics/shadow/index.html +++ b/docs/.vuepress/dist/pages/basics/shadow/index.html @@ -10,7 +10,7 @@ - + @@ -60,6 +60,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/tag/index.html b/docs/.vuepress/dist/pages/basics/tag/index.html index 45317bf..e115332 100644 --- a/docs/.vuepress/dist/pages/basics/tag/index.html +++ b/docs/.vuepress/dist/pages/basics/tag/index.html @@ -10,7 +10,7 @@ - + @@ -106,6 +106,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/basics/text/index.html b/docs/.vuepress/dist/pages/basics/text/index.html index 745d9ae..ad311ff 100644 --- a/docs/.vuepress/dist/pages/basics/text/index.html +++ b/docs/.vuepress/dist/pages/basics/text/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 文本

    # 文字大小

    .text-xsl  文字大小 60px 用于图标、数字等特大显示
+

    文本

    # 文字大小

    .text-xsl  文字大小 60px 用于图标、数字等特大显示
 .text-sl   文字大小 40px 用于图标、数字等较大显示
 .text-xxl  文字大小 22px 用于金额数字等信息
 .text-xl   文字大小 18px 页面大标题，用于结果页等单一信息页
@@ -113,6 +113,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/bar/bottom/index.html b/docs/.vuepress/dist/pages/component/bar/bottom/index.html index 1e5bab7..458718a 100644 --- a/docs/.vuepress/dist/pages/component/bar/bottom/index.html +++ b/docs/.vuepress/dist/pages/component/bar/bottom/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 底部操作条

    温馨提示

    我们可以使用 Bar 操作条自定义项目底部的 tabBar，就拿官方示例代码来举例。 +

    底部操作条

    温馨提示

    我们可以使用 Bar 操作条自定义项目底部的 tabBar，就拿官方示例代码来举例。 想要使用自定义底部操作条的同学，需要用组件来进行封装，因此这里建议大家提前学习一下组件的封装。

    # 自定义底部操作条

    1. pages.json 文件中的 tabBar 不需要配置，操作条代码放在首页即可。

    2. pages.json 文件中的 pages 数组中第一项表示应用首页，如果项目有引导页，则根据项目的逻辑来做调整。

    3. 示例中通过变量 PageCur 来切换不同 tabBar 页面，控制 tabBar 图标文字的样式切换，同时也控制需要显示对应 tabBar 的页面（组件引入）。

    点此查看官方示例 
    <template>
 	<view>
         <!-- 这三个是对应的页面 -->
@@ -221,6 +221,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/bar/search/index.html b/docs/.vuepress/dist/pages/component/bar/search/index.html index 5c218eb..1c800c3 100644 --- a/docs/.vuepress/dist/pages/component/bar/search/index.html +++ b/docs/.vuepress/dist/pages/component/bar/search/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 搜索&按钮组&输入操作条

    # 搜索操作条

    搜索操作条主要就是search-form，配合 round 和 radius 设置 input 框的样式，然后再用 fixed 固定到顶部即可。

    演示代码

    <!-- 第一个：搜索按钮在右边 -->
+

    搜索&按钮组&输入操作条

    # 搜索操作条

    搜索操作条主要就是search-form，配合 round 和 radius 设置 input 框的样式，然后再用 fixed 固定到顶部即可。

    演示代码

    <!-- 第一个：搜索按钮在右边 -->
 <view class="cu-bar search bg-white">
     <view class="search-form round">
         <text class="cuIcon-search"></text>
@@ -149,6 +149,6 @@ InputBlur(e) {
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/bar/title/index.html b/docs/.vuepress/dist/pages/component/bar/title/index.html index 94e80dd..fc6feca 100644 --- a/docs/.vuepress/dist/pages/component/bar/title/index.html +++ b/docs/.vuepress/dist/pages/component/bar/title/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 标题操作条

    标题操作条就是纯粹的样式，右侧预览图滑到标题操作条，直接复制对应代码到项目对应的位置即可

    演示代码里有代码注释，一条对应一条，复制即可

    # 演示代码

    <view class="box">
+

    标题操作条

    标题操作条就是纯粹的样式，右侧预览图滑到标题操作条，直接复制对应代码到项目对应的位置即可

    演示代码里有代码注释，一条对应一条，复制即可

    # 演示代码

    <view class="box">
     // 第一、二种都是标题和类似边框的组合样式，添加 border-title 类名
     // 底部样式是 text 标签的 last-child 选择器设置的，可以自定义颜色和长度
 	<view class="cu-bar bg-white">
@@ -90,6 +90,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/bar/top/index.html b/docs/.vuepress/dist/pages/component/bar/top/index.html index 295687c..ad0621b 100644 --- a/docs/.vuepress/dist/pages/component/bar/top/index.html +++ b/docs/.vuepress/dist/pages/component/bar/top/index.html @@ -10,7 +10,7 @@ - + @@ -96,6 +96,6 @@ Vue.component('cu-custom',cuCustom)
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/card/index.html b/docs/.vuepress/dist/pages/component/card/index.html index abbed4f..c5d8276 100644 --- a/docs/.vuepress/dist/pages/component/card/index.html +++ b/docs/.vuepress/dist/pages/component/card/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 卡片

    cu-card 卡片必选值

    # 案例类卡片

    1. cu-card 和 case 结合，在配合子元素的 cu-item 类名，写出案例类的样式
    2. 内部其他样式可以根据其他类名自行设置，cu-item 自带 margin:30px，可以通过类名 no-card 去除
    3. 卡片上面是图片展示，右上角是标签，文字悬浮于图片上
    4. 卡片下面就是一个消息列表
    <view class="cu-card case no-card">
+

    卡片

    cu-card 卡片必选值

    # 案例类卡片

    1. cu-card 和 case 结合，在配合子元素的 cu-item 类名，写出案例类的样式
    2. 内部其他样式可以根据其他类名自行设置，cu-item 自带 margin:30px，可以通过类名 no-card 去除
    3. 卡片上面是图片展示，右上角是标签，文字悬浮于图片上
    4. 卡片下面就是一个消息列表
    <view class="cu-card case no-card">
 	<view class="cu-item shadow">
 		<view class="image">
 			<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
@@ -134,6 +134,6 @@
         
  • 
           阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/chat/index.html b/docs/.vuepress/dist/pages/component/chat/index.html index 4830e22..0ab491b 100644 --- a/docs/.vuepress/dist/pages/component/chat/index.html +++ b/docs/.vuepress/dist/pages/component/chat/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,117 @@ GitHub (opens new window)

    聊天

    cu-chat 聊天必选值

    # 基本样式

    1. 聊天的外部大框架是 cu-chat
    2. cu-item 包裹某人的聊天信息
    3. self 表示右侧自己的聊天样式
    4. main 包含聊天内容
    5. date 表示消息时间
    6. cu-info 表示提示词
    <view class="cu-chat">
+	<view class="cu-item self">
+		<view class="main">
+			<view class="content bg-green shadow">
+				<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
+			</view>
+		</view>
+		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
+		<view class="date">2018年3月23日 13:23</view>
+	</view>
+	<view class="cu-info round">对方撤回一条消息!</view>
+	<view class="cu-item">
+		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
+		<view class="main">
+			<view class="content shadow">
+				<text>喵喵喵！喵喵喵！</text>
+			</view>
+		</view>
+		<view class="date "> 13:23</view>
+	</view>
+	<view class="cu-info">
+		<text class="cuIcon-roundclosefill text-red "></text> 对方拒绝了你的消息
+	</view>
+	<view class="cu-info">
+		对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
+		<text class="text-blue">发送好友验证</text>
+	</view>
+</view>
+

    # 其他聊天内容

    1. 聊天内容除了语句，还有图片，语音消息，地理位置消息等
    2. main 包含的聊天内容不止是消息框里的，还有消息框旁边的提示图标文字等
    3. 消息框里的内容由 content 包裹
    <view class="cu-chat">
+    <!-- 图片 -->
+	<view class="cu-item self">
+		<view class="main">
+			<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix"></image>
+		</view>
+		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
+		<view class="date"> 13:23</view>
+	</view>
+    <!-- 语音 -->
+	<view class="cu-item self">
+		<view class="main">
+			<view class="action text-bold text-grey">
+				3"
+			</view>
+			<view class="content shadow">
+				<text class="cuIcon-sound text-xxl padding-right-xl"> </text>
+			</view>
+		</view>
+		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
+		<view class="date">13:23</view>
+	</view>
+    <!-- 消息带图标 -->
+	<view class="cu-item self">
+		<view class="main">
+			<view class="action">
+				<text class="cuIcon-locationfill text-orange text-xxl"></text>
+			</view>
+			<view class="content shadow">
+				喵星球，喵喵市
+			</view>
+		</view>
+		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
+		<view class="date">13:23</view>
+	</view>
+    <!-- 翻译错误 -->
+	<view class="cu-item">
+		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
+		<view class="main">
+			<view class="content shadow">
+				@#$^&**
+			</view>
+			<view class="action text-grey">
+				<text class="cuIcon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
+			</view>
+		</view>
+		<view class="date">13:23</view>
+	</view>
+</view>
+

    # 发送框

    参考操作条

    <view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
+	<view class="action">
+		<text class="cuIcon-sound text-grey"></text>
+	</view>
+	<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
+	 @focus="InputFocus" @blur="InputBlur"></input>
+	<view class="action">
+		<text class="cuIcon-emojifill text-grey"></text>
+	</view>
+	<button class="cu-btn bg-green shadow">发送</button>
+</view>
+
+<script>
+	export default {
+		data() {
+			return {
+				InputBottom: 0
+			};
+		},
+		methods: {
+			InputFocus(e) {
+				this.InputBottom = e.detail.height
+			},
+			InputBlur(e) {
+				this.InputBottom = 0
+			}
+		}
+	}
+</script>
+

    # 聊天相关class

    class 说明 可选值
    cu-chat 聊天必选值 ——
    cu-item 子元素 ——
    self 右侧本人的聊天样式 ——
    main 聊天内容 ——
    content 消息框内容 ——
    date 消息日期 ——
    cu-info 提示词 ——
    上次更新: 2023/05/28, 18:15:33
    时间轴
    轮播

    ← 轮播→

    @@ -38,6 +144,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/form/index.html b/docs/.vuepress/dist/pages/component/form/index.html index c5e89a1..a85b855 100644 --- a/docs/.vuepress/dist/pages/component/form/index.html +++ b/docs/.vuepress/dist/pages/component/form/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,454 @@ GitHub (opens new window)

    表单

    # input输入框

    1. form 表单最外层是用 form 标签包裹
    2. 每一个子元素添加类名 cu-form-group，行内可以自定义，input 标签就是输入框
    3. title 类名用于设置每行的文字说明，如果想统一宽度，像示例一样，需要自定义宽度
    4. 行内没有 input 标签的话，title 后面的元素定位在行内右侧，有 input 标签的话，标签后的元素也是在行内右侧
    <form>	
+    <view class="cu-form-group margin-top">
+		<view class="title">邮件</view>
+		<input placeholder="两字短标题" name="input"></input>
+	</view>
+	<view class="cu-form-group">
+		<view class="title">输入框</view>
+		<input placeholder="三字标题" name="input"></input>
+	</view>
+	<view class="cu-form-group">
+		<view class="title">收货地址</view>
+		<input placeholder="统一标题的宽度" name="input"></input>
+	</view>
+	<view class="cu-form-group">
+		<view class="title">收货地址</view>
+		<input placeholder="输入框带个图标" name="input"></input>
+		<text class='cuIcon-locationfill text-orange'></text>
+	</view>
+	<view class="cu-form-group">
+		<view class="title">验证码</view>
+		<input placeholder="输入框带个按钮" name="input"></input>
+		<button class='cu-btn bg-green shadow'>验证码</button>
+	</view>
+	<view class="cu-form-group">
+		<view class="title">手机号码</view>
+		<input placeholder="输入框带标签" name="input"></input>
+		<view class="cu-capsule radius">
+			<view class='cu-tag bg-blue '>+86</view>
+			<view class="cu-tag line-blue">中国大陆</view>
+		</view>
+	</view>
+</form>
+ 
+<style>
+	.cu-form-group .title {
+		min-width: calc(4em + 15px);
+	}
+</style>
+

    # picker选择器

    1. 对于表单中从底部谈起的选择器，写法与上述简单的input相同，而选择器picker的使用，建议查看官方代码
    2. 后期会封装一个组件给大家用（暂无）
    <form>
+	<view class="cu-form-group margin-top">
+		<view class="title">普通选择</view>
+		<picker @change="PickerChange" :value="index" :range="picker">
+			<view class="picker">
+				{{index>-1?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
+			</view>
+		</picker>
+	</view>
+	<!-- #ifndef MP-ALIPAY -->
+	<view class="cu-form-group">
+		<view class="title">多列选择</view>
+		<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
+			<view class="picker">
+				{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
+			</view>
+		</picker>
+	</view>
+	<!-- #endif -->
+	<view class="cu-form-group">
+		<view class="title">时间选择</view>
+		<picker mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange">
+			<view class="picker">
+				{{time}}
+			</view>
+		</picker>
+	</view>
+	<view class="cu-form-group">
+		<view class="title">日期选择</view>
+		<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
+			<view class="picker">
+				{{date}}
+			</view>
+		</picker>
+	</view>
+	<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
+	<view class="cu-form-group">
+		<view class="title">地址选择</view>
+		<picker mode="region" @change="RegionChange" :value="region">
+			<view class="picker">
+				{{region[0]}}，{{region[1]}}，{{region[2]}}
+			</view>
+		</picker>
+	</view>
+	<!-- #endif -->
+</form>
+
+<!-- data -->
+return {
+    index: -1,
+    picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
+    multiArray: [
+        ['无脊柱动物', '脊柱动物'],
+        ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
+        ['猪肉绦虫', '吸血虫']
+    ],
+    <!-- 多列选择的对象形式 -->
+    objectMultiArray: [
+        [{
+                id: 0,
+                name: '无脊柱动物'
+            },
+            {
+                id: 1,
+                name: '脊柱动物'
+            }
+        ],
+        [{
+                id: 0,
+                name: '扁性动物'
+            },
+            {
+                id: 1,
+                name: '线形动物'
+            },
+            {
+                id: 2,
+                name: '环节动物'
+            },
+            {
+                id: 3,
+                name: '软体动物'
+            },
+            {
+                id: 3,
+                name: '节肢动物'
+            }
+        ],
+        [{
+                id: 0,
+                name: '猪肉绦虫'
+            },
+            {
+                id: 1,
+                name: '吸血虫'
+            }
+        ]
+    ],
+    multiIndex: [0, 0, 0],
+    time: '12:01',
+    date: '2018-12-25',
+    region: ['广东省', '广州市', '海珠区'],
+};
+
+<!-- data -->
+PickerChange(e) {
+    this.index = e.detail.value
+},
+MultiChange(e) {
+    this.multiIndex = e.detail.value
+},
+MultiColumnChange(e) {
+    let data = {
+        multiArray: this.multiArray,
+        multiIndex: this.multiIndex
+    };
+    data.multiIndex[e.detail.column] = e.detail.value;
+    switch (e.detail.column) {
+        case 0:
+            switch (data.multiIndex[0]) {
+                case 0:
+                    data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
+                    data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
+                    break;
+                case 1:
+                    data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
+                    data.multiArray[2] = ['鲫鱼', '带鱼'];
+                    break;
+            }
+            data.multiIndex[1] = 0;
+            data.multiIndex[2] = 0;
+            break;
+        case 1:
+            switch (data.multiIndex[0]) {
+                case 0:
+                    switch (data.multiIndex[1]) {
+                        case 0:
+                            data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
+                            break;
+                        case 1:
+                            data.multiArray[2] = ['蛔虫'];
+                            break;
+                        case 2:
+                            data.multiArray[2] = ['蚂蚁', '蚂蟥'];
+                            break;
+                        case 3:
+                            data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
+                            break;
+                        case 4:
+                            data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
+                            break;
+                    }
+                    break;
+                case 1:
+                    switch (data.multiIndex[1]) {
+                        case 0:
+                            data.multiArray[2] = ['鲫鱼', '带鱼'];
+                            break;
+                        case 1:
+                            data.multiArray[2] = ['青蛙', '娃娃鱼'];
+                            break;
+                        case 2:
+                            data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
+                            break;
+                    }
+                    break;
+            }
+            data.multiIndex[2] = 0;
+            break;
+    }
+    this.multiArray = data.multiArray;
+    this.multiIndex = data.multiIndex;
+},
+TimeChange(e) {
+    this.time = e.detail.value
+},
+DateChange(e) {
+    this.date = e.detail.value
+},
+RegionChange(e) {
+    this.region = e.detail.value
+},
+<!-- css -->
+<style>
+	.cu-form-group .title {
+		min-width: calc(4em + 15px);
+	}
+</style>
+

    # switch开关

    1. 对于开关的样式，参考 switch 官方文档
    2. 在微信小程序上，switch的color属性不生效，想要更改开关颜色，可以用颜色类名，直接写颜色就可以
    <form>
+	<view class="cu-form-group margin-top">
+		<view class="title">开关选择</view>
+		<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
+	</view>
+	<view class="cu-form-group">
+		<view class="title">定义颜色</view>
+		<!-- #ifdef MP-ALIPAY -->
+		<switch class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false" color="#e54d42"></switch>
+		<!-- #endif -->
+ 
+		<!-- #ifndef MP-ALIPAY -->
+		<switch class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
+		<!-- #endif -->
+	</view>
+	<view class="cu-form-group">
+		<view class="title">定义图标</view>
+		<switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
+	</view>
+	<!-- #ifndef MP-ALIPAY -->
+	<view class="cu-form-group">
+		<view class="title">方形开关</view>
+		<switch class='orange radius' @change="SwitchD" :class="switchD?'checked':''" :checked="switchD?true:false"></switch>
+	</view>
+	<!-- #endif -->
+</form>
+
+<!-- data -->
+return {
+    switchA: false,
+    switchB: true,
+    switchC: false,
+    switchD: false,
+};
+
+<!-- js -->
+SwitchA(e) {
+    this.switchA = e.detail.value
+},
+SwitchB(e) {
+    this.switchB = e.detail.value
+},
+SwitchC(e) {
+    this.switchC = e.detail.value
+},
+SwitchD(e) {
+    this.switchD = e.detail.value
+},
+

    # radio单选框

    1. 主要还是 radio 官方文档为主
    2. 更改颜色同上，使用提供的颜色类名即可
    3. 其默认样式是圆形全色中间有个√，可以通过类名radio更改形状为镂空中间一个点
    <form>
+	<radio-group class="block" @change="RadioChange">
+		<view class="cu-form-group margin-top">
+			<view class="title">单选操作(radio)</view>
+			<radio :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
+		</view>
+		<!-- #ifndef MP-ALIPAY -->
+		<view class="cu-form-group">
+			<view class="title">定义样式</view>
+			<radio class='radio' :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
+		</view>
+		<view class="cu-form-group">
+			<view class="title">定义颜色</view>
+			<view>
+				<radio class='blue radio' :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false" value="C"></radio>
+				<radio class='red margin-left-sm' :class="radio=='D'?'checked':''" :checked="radio=='D'?true:false" value="D"></radio>
+			</view>
+		</view>
+		<!-- #endif -->
+	</radio-group>
+</form>
+
+<!-- data -->
+return {
+    radio: 'A',
+};
+
+<!-- js -->
+RadioChange(e) {
+    this.radio = e.detail.value
+},
+

    # checkbox复选框

    1. 官方示例
    2. 更改颜色同上，使用提供的颜色类名即可
    3. 其默认样式是方形，可以通过类名 round 更改形状为圆形
    <form>
+	<checkbox-group class="block" @change="CheckboxChange">
+		<view class="cu-form-group margin-top">
+			<view class="title">复选选操作(checkbox)</view>
+			<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
+		</view>
+		<!-- #ifndef MP-ALIPAY -->
+		<view class="cu-form-group">
+			<view class="title">定义形状</view>
+			<checkbox class='round' :class="checkbox[1].checked?'checked':''" :checked="checkbox[1].checked?true:false" value="B"></checkbox>
+		</view>
+		<view class="cu-form-group">
+			<view class="title">定义颜色</view>
+			<checkbox class='round blue' :class="checkbox[2].checked?'checked':''" :checked="checkbox[2].checked?true:false"
+			 value="C"></checkbox>
+		</view>
+		<!-- #endif -->
+	</checkbox-group>
+</form>
+
+<!-- data -->
+return {
+    checkbox: [{
+        value: 'A',
+        checked: true
+    }, {
+        value: 'B',
+        checked: true
+    }, {
+        value: 'C',
+        checked: false
+    }],
+};
+
+<!-- js -->
+CheckboxChange(e) {
+    var items = this.checkbox,
+        values = e.detail.value;
+    for (var i = 0, lenI = items.length; i < lenI; ++i) {
+        items[i].checked = false;
+        for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
+            if (items[i].value == values[j]) {
+                items[i].checked = true;
+                break
+            }
+        }
+    }
+},
+

    # 图片上传

    1. 官方示例
    2. uniapp 图片相关操作的API (opens new window)
    <form>
+	<view class="cu-form-group">
+		<view class="grid col-4 grid-square flex-sub">
+			<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
+			 <image :src="imgList[index]" mode="aspectFill"></image>
+				<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
+					<text class='cuIcon-close'></text>
+				</view>
+			</view>
+			<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
+				<text class='cuIcon-cameraadd'></text>
+			</view>
+		</view>
+	</view>
+</form>
+ 
+<script>
+	export default {
+		data() {
+			return {
+				index: -1,
+				imgList: []
+			};
+		},
+		methods: {
+			ChooseImage() {
+				uni.chooseImage({
+					count: 4, //默认9
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album'], //从相册选择
+					success: (res) => {
+						if (this.imgList.length != 0) {
+							this.imgList = this.imgList.concat(res.tempFilePaths)
+						} else {
+							this.imgList = res.tempFilePaths
+						}
+					}
+				});
+			},
+			ViewImage(e) {
+				uni.previewImage({
+					urls: this.imgList,
+					current: e.currentTarget.dataset.url
+				});
+			},
+			DelImg(e) {
+				uni.showModal({
+					title: '召唤师',
+					content: '确定要删除这段回忆吗？',
+					cancelText: '再看看',
+					confirmText: '再见',
+					success: res => {
+						if (res.confirm) {
+							this.imgList.splice(e.currentTarget.dataset.index, 1)
+						}
+					}
+				})
+			}
+		}
+	}
+</script>
+

    # 头像

    这个样式可以用于用户修改个人资料中，修改头像

    <form>
+	<view class="cu-form-group margin-top">
+		<view class="title">头像</view>
+		<view class="cu-avatar radius bg-gray"></view>
+	</view>
+</form>
+

    # 多行文本

    <form>
+	<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
+	<view class="cu-form-group margin-top">
+		<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
+	</view>
+	<view class="cu-form-group align-start">
+		<view class="title">文本框</view>
+		<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="多行文本输入框"></textarea>
+	</view>
+</form>
+
+<!-- data -->
+return{
+    modalName: null,
+}
+
+<!-- js -->
+textareaAInput(e) {
+    this.textareaAValue = e.detail.value
+},
+textareaBInput(e) {
+    this.textareaBValue = e.detail.value
+}
+
    上次更新: 2023/05/28, 18:15:33
    卡片
    时间轴

    ← 时间轴→

    @@ -38,6 +481,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/list/index.html b/docs/.vuepress/dist/pages/component/list/index.html index d680587..ef47615 100644 --- a/docs/.vuepress/dist/pages/component/list/index.html +++ b/docs/.vuepress/dist/pages/component/list/index.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@ GitHub (opens new window)
    @@ -314,6 +314,6 @@ SwitchSex(e) {
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/modal/index.html b/docs/.vuepress/dist/pages/component/modal/index.html index 5610842..4a48a9c 100644 --- a/docs/.vuepress/dist/pages/component/modal/index.html +++ b/docs/.vuepress/dist/pages/component/modal/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 模态框

    # 操作条

    点此查看页面源代码

    页面位置：/pages/component/modal

    上次更新: 2023/05/28, 18:15:33
    轮播
    步骤条

    +

    模态框

    # 操作条

    点此查看页面源代码

    页面位置：/pages/component/modal

    上次更新: 2023/05/28, 18:15:33
    轮播
    步骤条

    ← 步骤条→

    @@ -38,6 +38,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/nav/index.html b/docs/.vuepress/dist/pages/component/nav/index.html index 79ebeb3..f2cc954 100644 --- a/docs/.vuepress/dist/pages/component/nav/index.html +++ b/docs/.vuepress/dist/pages/component/nav/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,11 @@ GitHub (opens new window)

    导航栏

    nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的，使用的时候一些属性可以参考一下 uni-app 的文档 (opens new window)，类名 nav 和 cu-item 是必选值

    # 默认

    通过一个变量来控制当前已选中的tab

    <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
 	<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in 10" :key="index" @tap="tabSelect" :data-id="index">
 		Tab{{index}}
 	</view>
@@ -72,7 +72,7 @@
 		<text class="cuIcon-clothesfill"></text> 皮肤
 	</view>
 </scroll-view>
-
    上次更新: 2023/06/07, 23:32:56
    搜索&按钮组&输入操作条
    列表

    +

    # 导航栏相关class

    class 说明 可选值
    nav 导航栏必选值 ——
    cu-item 导航栏子元素 ——
    flex flex布局 ——
    flex-sub flex:1，平分 ——
    text-center 居中 ——
    上次更新: 2023/06/07, 23:32:56
    搜索&按钮组&输入操作条
    列表

    ← 列表→

    @@ -88,6 +88,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/steps/index.html b/docs/.vuepress/dist/pages/component/steps/index.html index 012503f..69d2753 100644 --- a/docs/.vuepress/dist/pages/component/steps/index.html +++ b/docs/.vuepress/dist/pages/component/steps/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 步骤条

    # 操作条

    点此查看页面源代码

    页面位置：/pages/component/steps

    上次更新: 2023/05/28, 18:15:33
    模态框
    索引动画

    +

    步骤条

    # 操作条

    点此查看页面源代码

    页面位置：/pages/component/steps

    上次更新: 2023/05/28, 18:15:33
    模态框
    索引动画

    ← 索引动画→

    @@ -38,6 +38,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/swiper/index.html b/docs/.vuepress/dist/pages/component/swiper/index.html index 2af4c7d..5df1294 100644 --- a/docs/.vuepress/dist/pages/component/swiper/index.html +++ b/docs/.vuepress/dist/pages/component/swiper/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,177 @@ GitHub (opens new window)

    轮播

    # 全屏限高轮播

    1. 添加类名 screen-swiper，宽度为全屏，高度自定义
    2. 请直接参考 swiper 官方文档 (opens new window)，可以通过类名 square-dot 和 round-dot 定义小圆点样式
    <template>
+	<view>
+		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
+		 :autoplay="true" interval="5000" duration="500">
+			<swiper-item v-for="(item,index) in swiperList" :key="index">
+				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+ 
+<script>
+	export default {
+		data() {
+			return {
+				swiperList: [{
+					id: 0,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
+				}, {
+					id: 1,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
+				}, {
+					id: 2,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
+				}, {
+					id: 3,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
+				}],
+				dotStyle: true
+			};
+		}
+	}
+</script>
+

    # 卡片式轮播

    1. 在 swiper 标签上添加类名 card-swiper
    2. 在 swiper-item 标签内的子元素上添加类名 swiper-item，
    3. 示例中 cardSwiper 函数的主要作用是切换类名 cur，cur 的作用是实现轮播图片中间大，两边小的效果，就是 transform的scale()
    <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
+ :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
+ indicator-active-color="#0081ff">
+	<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
+		<view class="swiper-item">
+			<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+			<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
+		</view>
+	</swiper-item>
+</swiper>
+ 
+<!-- js -->
+cardSwiper(e) {
+    this.cardCur = e.detail.current
+},
+

    # 堆叠式轮播

    1. 堆叠轮播是原生写的，注意类名 tower-swiper、tower-item 以及 swiper-item 的配合使用，这主要是通过层级的高低来显示图片的，使用时需要配合 js 和 css。

    2. 注：这种轮播图初始化展示第一章会便宜一点，需要触动一下才会展示正常的效果，可以通过在 onload() 函数中给变量 direction 赋值解决

    <template>
+	<view>
+		<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
+			<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft}]" :data-direction="direction">
+				<view class="swiper-item">
+					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+ 
+<script>
+	export default {
+		data() {
+			return {
+				swiperList: [{
+					id: 0,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
+				}, {
+					id: 1,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
+				}, {
+					id: 2,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
+				}, {
+					id: 3,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
+				}, {
+					id: 4,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
+				}, {
+					id: 5,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
+				}, {
+					id: 6,
+					type: 'image',
+					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
+				}],
+				towerStart: 0,
+				direction: ''
+			};
+		},
+		onLoad() {
+			this.TowerSwiper('swiperList');
+                        this.direction = 'left';
+			// 初始化towerSwiper 传已有的数组名即可
+		}, 
+		methods: {
+			// 初始化towerSwiper
+			TowerSwiper(name) {
+				let list = this[name];
+				console.log(list)
+				for (let i = 0; i < list.length; i++) {
+					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
+					list[i].mLeft = i - parseInt(list.length / 2)
+				}
+				this.swiperList = list
+			},
+			// towerSwiper触摸开始
+			TowerStart(e) {
+				console.log(e)
+				this.towerStart = e.touches[0].pageX
+			},
+			// towerSwiper计算方向
+			TowerMove(e) {
+				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
+			},
+			// towerSwiper计算滚动
+			TowerEnd(e) {
+				let direction = this.direction;
+				let list = this.swiperList;
+				if (direction == 'right') {
+					let mLeft = list[0].mLeft;
+					console.log(list[0])
+					let zIndex = list[0].zIndex;
+					for (let i = 1; i < this.swiperList.length; i++) {
+						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
+						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
+					}
+					this.swiperList[list.length - 1].mLeft = mLeft;
+					this.swiperList[list.length - 1].zIndex = zIndex;
+				} else {
+					let mLeft = list[list.length - 1].mLeft;
+					let zIndex = list[list.length - 1].zIndex;
+					for (let i = this.swiperList.length - 1; i > 0; i--) {
+						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
+						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
+					}
+					this.swiperList[0].mLeft = mLeft;
+					this.swiperList[0].zIndex = zIndex;
+				}
+				this.direction = ""
+				this.swiperList = this.swiperList
+			},
+		}
+	}
+</script>
+ 
+<style>
+	.tower-swiper .tower-item {
+		transform: scale(calc(0.5 + var(--index) / 10));
+		margin-left: calc(var(--left) * 100upx - 150upx);
+		z-index: var(--index);
+	}
+</style>
+
    上次更新: 2023/05/28, 18:15:33
    聊天
    模态框

    ← 模态框→

    @@ -38,6 +204,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/component/timeline/index.html b/docs/.vuepress/dist/pages/component/timeline/index.html index 0ea4586..35e2305 100644 --- a/docs/.vuepress/dist/pages/component/timeline/index.html +++ b/docs/.vuepress/dist/pages/component/timeline/index.html @@ -10,7 +10,7 @@ - + @@ -18,11 +18,91 @@ GitHub (opens new window)

    时间轴

    # 默认时间轴

    1. 时间轴默认结构如下代码，对应右侧预览图第一个6-17时间轴的样式
    2. 由 cu-timeline 包裹 cu-time 和 cu-item，在 item 内编写内容，由 content 包裹
    <view class="cu-timeline">
+	<view class="cu-time">06-17</view>
+	<view class="cu-item">
+		<view class="content">
+			<text>01:30</text> 【喵星】 MX-12138 已揽收，准备发往银河系
+		</view>
+	</view>
+</view>
+

    # 彩色时间轴

    1. 与默认的基本格式相同，只是自定义了内容框颜色和图标
    2. 对应右侧彩色时间轴
    <view class="cu-timeline">
+	<view class="cu-time">昨天</view>
+	<view class="cu-item cur cuIcon-noticefill">
+		<view class="content bg-green shadow-blur">
+			<text>22:22</text> 【广州市】快件已到达地球
+		</view>
+	</view>
+	<view class="cu-item text-red cuIcon-attentionforbidfill">
+		<view class="content bg-red shadow-blur">
+			这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
+		</view>
+	</view>
+	<view class="cu-item text-grey cuIcon-evaluate_fill">
+		<view class="content bg-grey shadow-blur">
+			这是第一次，我家的铲屎官走了这么久。
+		</view>
+	</view>
+	<view class="cu-item text-blue">
+		<view class="bg-blue content">
+			<text>20:00</text> 【月球】快件已到达月球，准备发往地球
+		</view>
+		<view class="bg-cyan content">
+			<text>10:00</text> 【银河系】快件已到达银河系，准备发往月球
+		</view>
+	</view>
+</view>
+

    # 自定义时间轴

    1. 上一个是简单的修改了颜色图标，这一个则是稍微复杂一点，结合之前的标签、列表等，丰富了内容
    <view class="cu-timeline">
+	<view class="cu-time">06-17</view>
+	<view class="cu-item">
+		<view class="content">
+			<view class="cu-capsule radius">
+				<view class="cu-tag bg-cyan">上午</view>
+				<view class="cu-tag line-cyan">10:00</view>
+			</view>
+			<view class="margin-top">这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
+		</view>
+	</view>
+	<view class="cu-item text-blue">
+		<view class="bg-blue shadow-blur content">
+			<view class="cu-list menu-avatar radius">
+				<view class="cu-item">
+					<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
+					<view class="content">
+						<view class="text-grey">文晓港</view>
+						<view class="text-gray text-sm">
+							<text class="cuIcon-infofill text-red"></text> 消息未送达</view>
+					</view>
+					<view class="action">
+						<view class="text-grey text-xs">22:20</view>
+						<view class="cu-tag round bg-grey sm">5</view>
+					</view>
+				</view>
+				<view class="cu-item">
+					<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
+						<view class="cu-tag badge">99+</view>
+					</view>
+					<view class="content">
+						<view class="text-grey">文晓港
+							<view class="cu-tag round orange sm">SVIP</view>
+						</view>
+						<view class="text-gray text-sm">
+							<text class="cuIcon-redpacket_fill text-red"></text> 收到红包</view>
+					</view>
+					<view class="action">
+						<view class="text-grey text-xs">22:20</view>
+						<text class="cuIcon-notice_forbid_fill text-gray"></text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</view>
+

    # 时间轴相关class

    class 说明 可选值
    cu-timeline 时间轴必选值 ——
    cu-time 时间 ——
    cu-item 子元素 ——
    content 内容信息 ——
    上次更新: 2023/05/28, 18:15:33
    表单
    聊天

    ← 聊天→

    @@ -38,6 +118,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/animation/index.html b/docs/.vuepress/dist/pages/plugin/animation/index.html index d8af3a3..4815b25 100644 --- a/docs/.vuepress/dist/pages/plugin/animation/index.html +++ b/docs/.vuepress/dist/pages/plugin/animation/index.html @@ -10,7 +10,7 @@ - + @@ -38,6 +38,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/drawer/index.html b/docs/.vuepress/dist/pages/plugin/drawer/index.html index c38dda3..61fb22f 100644 --- a/docs/.vuepress/dist/pages/plugin/drawer/index.html +++ b/docs/.vuepress/dist/pages/plugin/drawer/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 全屏抽屉

    # 操作条

    点此查看页面源代码

    页面位置：/pages/plugin/drawer

    上次更新: 2023/05/28, 18:15:33
    微动画
    垂直导航

    +

    全屏抽屉

    # 操作条

    点此查看页面源代码

    页面位置：/pages/plugin/drawer

    上次更新: 2023/05/28, 18:15:33
    微动画
    垂直导航

    ← 垂直导航→

    @@ -38,6 +38,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/indexes/index.html b/docs/.vuepress/dist/pages/plugin/indexes/index.html index 24df904..a7511e7 100644 --- a/docs/.vuepress/dist/pages/plugin/indexes/index.html +++ b/docs/.vuepress/dist/pages/plugin/indexes/index.html @@ -10,7 +10,7 @@ - + @@ -38,6 +38,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/dist/pages/plugin/verticalnav/index.html b/docs/.vuepress/dist/pages/plugin/verticalnav/index.html index 01992c8..baea5c5 100644 --- a/docs/.vuepress/dist/pages/plugin/verticalnav/index.html +++ b/docs/.vuepress/dist/pages/plugin/verticalnav/index.html @@ -10,7 +10,7 @@ - + @@ -22,7 +22,7 @@ 视图模式
  • 目录模式 -

    • 垂直导航

    # 操作条

    点此查看页面源代码

    页面位置：/pages/plugin/verticalnav

    上次更新: 2023/05/28, 18:15:33
    全屏抽屉

    +

    垂直导航

    # 操作条

    点此查看页面源代码

    页面位置：/pages/plugin/verticalnav

    上次更新: 2023/05/28, 18:15:33
    全屏抽屉

    ←

    Theme by @@ -37,6 +37,6 @@
  • 阅读模式
    • - + diff --git a/docs/.vuepress/public/img/colorui-h5-code.png b/docs/.vuepress/public/img/colorui-h5-code.png new file mode 100644 index 0000000..d61b46d Binary files /dev/null and b/docs/.vuepress/public/img/colorui-h5-code.png differ diff --git a/docs/10.文档/10.快速开始/10.介绍.md b/docs/10.文档/10.快速开始/10.介绍.md index 44509ad..be0c74f 100644 --- a/docs/10.文档/10.快速开始/10.介绍.md +++ b/docs/10.文档/10.快速开始/10.介绍.md @@ -19,6 +19,10 @@ Color UI 我想大家都知晓吧，我就不过多阐述了，是 **文晓港** [ColorUI 在线展示](https://miren123.gitee.io/colorui-h5/#/) 因为右侧的h5是用iframe来嵌入的，因此字体和极小一部分的样式会有出入，文档里只做展示，比较完整的样式，点这里查看。 +**微信扫码预览h5** + + + ## 文档说明 文档左侧目录，基础元素、交互组件、插件扩展分别对应，Color UI 底部对应的三个大模块，而三个模块下二级目录，也分别对应三个页面里的模块，点击目录右侧会跳转到对应的页面。 diff --git a/docs/10.文档/30.交互组件/20.导航栏.md b/docs/10.文档/30.交互组件/20.导航栏.md index 01fa676..b18083e 100644 --- a/docs/10.文档/30.交互组件/20.导航栏.md +++ b/docs/10.文档/30.交互组件/20.导航栏.md @@ -90,4 +90,14 @@ nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的，使用的 皮肤 -``` \ No newline at end of file +``` + +## 导航栏相关class + +|class| 说明| 可选值| +|--| --| --| +|nav |导航栏必选值| ——| +|cu-item |导航栏子元素 |——| +|flex| flex布局| ——| +|flex-sub |flex:1，平分| ——| +|text-center| 居中| ——| \ No newline at end of file diff --git a/docs/10.文档/30.交互组件/30.列表.md b/docs/10.文档/30.交互组件/30.列表.md index 50e2c6c..4883091 100644 --- a/docs/10.文档/30.交互组件/30.列表.md +++ b/docs/10.文档/30.交互组件/30.列表.md @@ -331,4 +331,22 @@ SwitchSex(e) { } } -``` \ No newline at end of file +``` + +## 列表相关class + +|class类名| 说明| 可选值| +|-- | --| --| +|cu-list |列表必选值 |——| +|cu-item| 列表子元素| ——| +|no-border |无边框 |——| +|menu| 菜单列表| ——| +|sm-border |短边框 |——| +|card-menu| 卡片样式的菜单列表 |——| +|arrow |右箭头 |——| +|menu-avatar| 消息列表（带头像）| ——| +|cu-avatar |头像 |——| +|content| 内容| ——| +|grayscale| 灰度（background-color: #f5f5f5）| ——| +|cur| background-color: #fcf7e9 || +|move-cur| 左移（transform: translateX(-260upx)）|| \ No newline at end of file diff --git a/docs/10.文档/30.交互组件/50.表单.md b/docs/10.文档/30.交互组件/50.表单.md index 2fa6ba3..f7374dd 100644 --- a/docs/10.文档/30.交互组件/50.表单.md +++ b/docs/10.文档/30.交互组件/50.表单.md @@ -5,10 +5,513 @@ permalink: /pages/component/form article: false --- -## 操作条 + -::: details 点此查看页面源代码 -页面位置：`/pages/component/form` -```vue +## input输入框 + +1. `form` 表单最外层是用 `form` 标签包裹 +2. 每一个子元素添加类名 `cu-form-group`，行内可以自定义，`input` 标签就是输入框 +3. `title` 类名用于设置每行的文字说明，如果想统一宽度，像示例一样，需要自定义宽度 +4. **行内没有 `input` 标签的话，`title` 后面的元素定位在行内右侧，有 `input` 标签的话，标签后的元素也是在行内右侧** + +```html +
    + + 邮件 + + + + 输入框 + + + + 收货地址 + + + + 收货地址 + + + + + 验证码 + + + + + 手机号码 + + + +86 + 中国大陆 + + +
    + + ``` -::: \ No newline at end of file + +## picker选择器 + +1. 对于表单中从底部谈起的选择器，写法与上述简单的input相同，而选择器picker的使用，建议查看官方代码 +2. 后期会封装一个组件给大家用（暂无） + +```html +
    + + 普通选择 + + + {{index>-1?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}} + + + + + + 多列选择 + + + {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}} + + + + + + 时间选择 + + + {{time}} + + + + + 日期选择 + + + {{date}} + + + + + + 地址选择 + + + {{region[0]}}，{{region[1]}}，{{region[2]}} + + + + +
    + + +return { + index: -1, + picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'], + multiArray: [ + ['无脊柱动物', '脊柱动物'], + ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], + ['猪肉绦虫', '吸血虫'] + ], + + objectMultiArray: [ + [{ + id: 0, + name: '无脊柱动物' + }, + { + id: 1, + name: '脊柱动物' + } + ], + [{ + id: 0, + name: '扁性动物' + }, + { + id: 1, + name: '线形动物' + }, + { + id: 2, + name: '环节动物' + }, + { + id: 3, + name: '软体动物' + }, + { + id: 3, + name: '节肢动物' + } + ], + [{ + id: 0, + name: '猪肉绦虫' + }, + { + id: 1, + name: '吸血虫' + } + ] + ], + multiIndex: [0, 0, 0], + time: '12:01', + date: '2018-12-25', + region: ['广东省', '广州市', '海珠区'], +}; + + +PickerChange(e) { + this.index = e.detail.value +}, +MultiChange(e) { + this.multiIndex = e.detail.value +}, +MultiColumnChange(e) { + let data = { + multiArray: this.multiArray, + multiIndex: this.multiIndex + }; + data.multiIndex[e.detail.column] = e.detail.value; + switch (e.detail.column) { + case 0: + switch (data.multiIndex[0]) { + case 0: + data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']; + data.multiArray[2] = ['猪肉绦虫', '吸血虫']; + break; + case 1: + data.multiArray[1] = ['鱼', '两栖动物', '爬行动物']; + data.multiArray[2] = ['鲫鱼', '带鱼']; + break; + } + data.multiIndex[1] = 0; + data.multiIndex[2] = 0; + break; + case 1: + switch (data.multiIndex[0]) { + case 0: + switch (data.multiIndex[1]) { + case 0: + data.multiArray[2] = ['猪肉绦虫', '吸血虫']; + break; + case 1: + data.multiArray[2] = ['蛔虫']; + break; + case 2: + data.multiArray[2] = ['蚂蚁', '蚂蟥']; + break; + case 3: + data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓']; + break; + case 4: + data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物']; + break; + } + break; + case 1: + switch (data.multiIndex[1]) { + case 0: + data.multiArray[2] = ['鲫鱼', '带鱼']; + break; + case 1: + data.multiArray[2] = ['青蛙', '娃娃鱼']; + break; + case 2: + data.multiArray[2] = ['蜥蜴', '龟', '壁虎']; + break; + } + break; + } + data.multiIndex[2] = 0; + break; + } + this.multiArray = data.multiArray; + this.multiIndex = data.multiIndex; +}, +TimeChange(e) { + this.time = e.detail.value +}, +DateChange(e) { + this.date = e.detail.value +}, +RegionChange(e) { + this.region = e.detail.value +}, + + +``` + +## switch开关 + +1. 对于开关的样式，参考 `switch` 官方文档 +2. 在微信小程序上，switch的color属性不生效，想要更改开关颜色，可以用颜色类名，直接写颜色就可以 + +```html +
    + + 开关选择 + + + + 定义颜色 + + + + + + + + + + 定义图标 + + + + + 方形开关 + + + +
    + + +return { + switchA: false, + switchB: true, + switchC: false, + switchD: false, +}; + + +SwitchA(e) { + this.switchA = e.detail.value +}, +SwitchB(e) { + this.switchB = e.detail.value +}, +SwitchC(e) { + this.switchC = e.detail.value +}, +SwitchD(e) { + this.switchD = e.detail.value +}, +``` + +## radio单选框 + +1. 主要还是 `radio` 官方文档为主 +2. 更改颜色同上，使用提供的颜色类名即可 +3. 其默认样式是圆形全色中间有个√，可以通过类名radio更改形状为镂空中间一个点 + +```html +
    + + + 单选操作(radio) + + + + + 定义样式 + + + + 定义颜色 + + + + + + + +
    + + +return { + radio: 'A', +}; + + +RadioChange(e) { + this.radio = e.detail.value +}, +``` + + +## checkbox复选框 + +1. 官方示例 +2. 更改颜色同上，使用提供的颜色类名即可 +3. 其默认样式是方形，可以通过类名 `round` 更改形状为圆形 + +```html +
    + + + 复选选操作(checkbox) + + + + + 定义形状 + + + + 定义颜色 + + + + +
    + + +return { + checkbox: [{ + value: 'A', + checked: true + }, { + value: 'B', + checked: true + }, { + value: 'C', + checked: false + }], +}; + + +CheckboxChange(e) { + var items = this.checkbox, + values = e.detail.value; + for (var i = 0, lenI = items.length; i < lenI; ++i) { + items[i].checked = false; + for (var j = 0, lenJ = values.length; j < lenJ; ++j) { + if (items[i].value == values[j]) { + items[i].checked = true; + break + } + } + } +}, +``` + + +## 图片上传 + +1. 官方示例 +2. `uniapp` [图片相关操作的API](https://uniapp.dcloud.net.cn/api/media/image.html#) + +```vue +
    + + + + + + + + + + + + + +
    + + +``` + +## 头像 + +这个样式可以用于用户修改个人资料中，修改头像 + +```html +
    + + 头像 + + +
    +``` + +## 多行文本 + +```html +
    + + + + + + 文本框 + + +
    + + +return{ + modalName: null, +} + + +textareaAInput(e) { + this.textareaAValue = e.detail.value +}, +textareaBInput(e) { + this.textareaBValue = e.detail.value +} +``` \ No newline at end of file diff --git a/docs/10.文档/30.交互组件/60.时间轴.md b/docs/10.文档/30.交互组件/60.时间轴.md index 8ab2534..ff31a09 100644 --- a/docs/10.文档/30.交互组件/60.时间轴.md +++ b/docs/10.文档/30.交互组件/60.时间轴.md @@ -5,10 +5,114 @@ permalink: /pages/component/timeline article: false --- -## 操作条 +## 默认时间轴 -::: details 点此查看页面源代码 -页面位置：`/pages/component/timeline` -```vue +1. 时间轴默认结构如下代码，对应右侧预览图第一个6-17时间轴的样式 +2. 由 `cu-timeline` 包裹 `cu-time` 和 `cu-item`，在 `item` 内编写内容，由 `content` 包裹 + +```html + + 06-17 + + + 01:30 【喵星】 MX-12138 已揽收，准备发往银河系 + + + ``` -::: \ No newline at end of file + +## 彩色时间轴 + +1. 与默认的基本格式相同，只是自定义了内容框颜色和图标 +2. 对应右侧彩色时间轴 + +```html + + 昨天 + + + 22:22 【广州市】快件已到达地球 + + + + + 这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ + + + + + 这是第一次，我家的铲屎官走了这么久。 + + + + + 20:00 【月球】快件已到达月球，准备发往地球 + + + 10:00 【银河系】快件已到达银河系，准备发往月球 + + + +``` + +## 自定义时间轴 + +1. 上一个是简单的修改了颜色图标，这一个则是稍微复杂一点，结合之前的标签、列表等，丰富了内容 + +```html + + 06-17 + + + + 上午 + 10:00 + + 这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。 + + + + + + + + + 文晓港 + + 消息未送达 + + + 22:20 + 5 + + + + + 99+ + + + 文晓港 + SVIP + + + 收到红包 + + + 22:20 + + + + + + + +``` + +## 时间轴相关class + +|class| 说明| 可选值| +|--| --| --| +|cu-timeline |时间轴必选值| ——| +|cu-time| 时间| ——| +|cu-item| 子元素 |——| +|content| 内容信息| ——| \ No newline at end of file diff --git a/docs/10.文档/30.交互组件/70.聊天.md b/docs/10.文档/30.交互组件/70.聊天.md index bc841f2..a1244d6 100644 --- a/docs/10.文档/30.交互组件/70.聊天.md +++ b/docs/10.文档/30.交互组件/70.聊天.md @@ -5,10 +5,150 @@ permalink: /pages/component/chat article: false --- -## 操作条 +`cu-chat` 聊天必选值 -::: details 点此查看页面源代码 -页面位置：`/pages/component/chat` -```vue +## 基本样式 + +1. 聊天的外部大框架是 `cu-chat` +2. `cu-item` 包裹某人的聊天信息 +3. `self` 表示右侧自己的聊天样式 +4. `main` 包含聊天内容 +5. `date` 表示消息时间 +6. `cu-info` 表示提示词 + +```html + + + + + 喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！ + + + + 2018年3月23日 13:23 + + 对方撤回一条消息! + + + + + 喵喵喵！喵喵喵！ + + + 13:23 + + + 对方拒绝了你的消息 + + + 对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。 + 发送好友验证 + + ``` -::: \ No newline at end of file + +## 其他聊天内容 + +1. 聊天内容除了语句，还有图片，语音消息，地理位置消息等 +2. `main` 包含的聊天内容不止是消息框里的，还有消息框旁边的提示图标文字等 +3. 消息框里的内容由 `content` 包裹 + +```html + + + + + + + + 13:23 + + + + + + 3" + + + + + + + 13:23 + + + + + + + + + 喵星球，喵喵市 + + + + 13:23 + + + + + + + @#$^&** + + + 翻译错误 + + + 13:23 + + +``` + +## 发送框 + +参考操作条 + +```html + + + + + + + + + + + + +``` + +## 聊天相关class + +|class |说明| 可选值| +|-- |--| --| +|cu-chat| 聊天必选值| ——| +|cu-item| 子元素| ——| +|self |右侧本人的聊天样式| ——| +|main |聊天内容| ——| +|content| 消息框内容| ——| +|date |消息日期 |——| +|cu-info| 提示词 |——| \ No newline at end of file diff --git a/docs/10.文档/30.交互组件/80.轮播.md b/docs/10.文档/30.交互组件/80.轮播.md index 68a2454..71b8f68 100644 --- a/docs/10.文档/30.交互组件/80.轮播.md +++ b/docs/10.文档/30.交互组件/80.轮播.md @@ -5,10 +5,194 @@ permalink: /pages/component/swiper article: false --- -## 操作条 +## 全屏限高轮播 + +1. 添加类名 `screen-swiper`，宽度为全屏，高度自定义 +2. 请直接参考 `swiper` [官方文档](https://uniapp.dcloud.net.cn/component/swiper.html#)，可以通过类名 `square-dot` 和 `round-dot` 定义小圆点样式 -::: details 点此查看页面源代码 -页面位置：`/pages/component/swiper` ```vue + + + ``` -::: \ No newline at end of file + +## 卡片式轮播 + +1. 在 `swiper` 标签上添加类名 `card-swiper` +2. 在 `swiper-item` 标签内的子元素上添加类名 `swiper-item`， +3. 示例中 `cardSwiper` 函数的主要作用是切换类名 `cur`，`cur` 的作用是实现轮播图片中间大，两边小的效果，就是 `transform的scale()` + +```vue + + + + + + + + + + +cardSwiper(e) { + this.cardCur = e.detail.current +}, +``` + +## 堆叠式轮播 + +1. 堆叠轮播是原生写的，注意类名 `tower-swiper`、`tower-item` 以及 `swiper-item` 的配合使用，这主要是通过层级的高低来显示图片的，使用时需要配合 `js` 和 `css`。 + +2. 注：这种轮播图初始化展示第一章会便宜一点，需要触动一下才会展示正常的效果，可以通过在 `onload()` 函数中给变量 `direction` 赋值解决 + +```vue + + + + + +``` \ No newline at end of file