From 1c3d119cafe1e7669bc63d1ebd82ee01471aef3a Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Wed, 17 Aug 2016 19:56:39 +0800 Subject: [PATCH] add rate --- components.json | 3 + examples/docs/rate.md | 91 ++++++++++ examples/nav.config.json | 5 + packages/rate/cooking.conf.js | 31 ++++ packages/rate/fonts/icomoon.eot | Bin 0 -> 2716 bytes packages/rate/fonts/icomoon.svg | 19 +++ packages/rate/fonts/icomoon.ttf | Bin 0 -> 2552 bytes packages/rate/fonts/icomoon.woff | Bin 0 -> 2628 bytes packages/rate/index.js | 7 + packages/rate/package.json | 15 ++ packages/rate/src/main.vue | 241 +++++++++++++++++++++++++++ packages/rate/style.css | 60 +++++++ packages/theme-default/src/index.css | 1 + packages/theme-default/src/rate.css | 45 +++++ src/index.js | 8 +- 15 files changed, 525 insertions(+), 1 deletion(-) create mode 100644 examples/docs/rate.md create mode 100644 packages/rate/cooking.conf.js create mode 100755 packages/rate/fonts/icomoon.eot create mode 100755 packages/rate/fonts/icomoon.svg create mode 100755 packages/rate/fonts/icomoon.ttf create mode 100755 packages/rate/fonts/icomoon.woff create mode 100644 packages/rate/index.js create mode 100644 packages/rate/package.json create mode 100644 packages/rate/src/main.vue create mode 100755 packages/rate/style.css create mode 100644 packages/theme-default/src/rate.css diff --git a/components.json b/components.json index c508e2174..624ba63fa 100644 --- a/components.json +++ b/components.json @@ -151,5 +151,8 @@ ], "card": [ "./packages/card/index.js" + ], + "rate": [ + "./packages/rate/index.js" ] } diff --git a/examples/docs/rate.md b/examples/docs/rate.md new file mode 100644 index 000000000..b7c5fa4e1 --- /dev/null +++ b/examples/docs/rate.md @@ -0,0 +1,91 @@ + + +## 基础用法 + +
+ +
+ +``` html + +``` + +## 区分颜色 + +利用颜色对分数及情感倾向进行分级。分数可以被分为三个等级，对应的两个阈值可分别通过 `low-threshold` 和 `high-threshold` 设定。 + +
+ +
+ +``` html + +``` + +## 辅助文字 + +为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。 + +
+ +
+ +``` html + +``` + +## 其他 icon + +
+ +
+ +``` html + +``` + +## 只读 +为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-text`，则会在右侧显示目前的分值。可以提供 `text-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。 + +
+ +
+ +``` html + +``` +## Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------- |---------- |------------- |-------- | +| v-model | 绑定值 | Number | | 0 | +| max | 最大分值 | Number | | 5 | +| multi-color | 是否根据分数等级区分颜色 | Boolean | | false | +| lowThreshold | 低分和中等分数的界限值，值本身被划分在低分中 | Number | | 2 | +| highThreshold | 高分和中等分数的界限值，值本身被划分在高分中 | Number | | 4 | +| smiley | 是否使用 smiley icon | Boolean | | false | +| disabled | 是否为只读 | Boolean | | false | +| show-text | 是否显示辅助文字 | Boolean | | false | +| texts | 辅助文字数组 | Array | | ['极差', '失望', '一般', '满意', '惊喜'] | +| text-template | 只读时的辅助文字模板 | String | | '{value}' | + +## Events +| 事件名称 | 说明 | 回调参数 | +|---------- |-------- |---------- | +| change | 分值改变时触发 | 改变后的分值 | + diff --git a/examples/nav.config.json b/examples/nav.config.json index 6ac5a360d..80f04002d 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -178,6 +178,11 @@ "name": "滑块 (slider)", "title": "slider 滑块", "description": "通过拖动滑块在一个固定区间内进行选择" + }, + { + "path": "/rate", + "name": "评分 (rate)", + "title": "评分组件" } ] }, diff --git a/packages/rate/cooking.conf.js b/packages/rate/cooking.conf.js new file mode 100644 index 000000000..6de801ab0 --- /dev/null +++ b/packages/rate/cooking.conf.js @@ -0,0 +1,31 @@ +var cooking = require('cooking'); +var path = require('path'); + +cooking.set({ + entry: { + index: path.join(__dirname, 'index.js') + }, + dist: path.join(__dirname, 'lib'), + template: false, + format: 'umd', + moduleName: 'ElRate', + extractCSS: 'style.css', + + extends: ['vue', 'saladcss'] +}); + +cooking.add('resolve.alias', { + 'main': path.join(__dirname, '../../src'), + 'packages': path.join(__dirname, '../../packages') +}); + +cooking.add('externals', { + vue: { + root: 'Vue', + commonjs: 'vue', + commonjs2: 'vue', + amd: 'vue' + } +}); + +module.exports = cooking.resolve(); diff --git a/packages/rate/fonts/icomoon.eot b/packages/rate/fonts/icomoon.eot new file mode 100755 index 0000000000000000000000000000000000000000..0ddab8f5ae8fce3e95d54a6c4a6745115eb57126 GIT binary patch literal 2716 zcmb_eU1(fI6h7z9y?1}IKV5TolWdahCb2hdiJRDf+4i(yrg^-c5GX5c=RDbI*6q zoHKKNW;64iljt7@5tBl-#B`0N=IC&(UfPyv#Fo9YagNAClQd2_n#Rb{3=BMUoU$}Q z7ifwyG!IRHMxmLfJZz;+n4%P+o|5fGZz$!4b#$2o^&ESyJLY{tD?%gpK0Q92nQa*T z?kbF0AfK4X3d9OyUA=fQ1XFRwpItSsEd#PxLAASV-|39;Kr_qU=aSz&(&d(Dy-3#bbe1HuR2mGg&Kf zyY4pv@wQkhnJ_zO_{#0`=Wkybu5fW{@Zyb=CvRLFtndfr{JVmEWazTsp?rP?4H^z9upV=hSYM zHD#M$*V!3+IhmS_JDe@`%FtS3>nT2bm;E4SZuHr`y3iVfO+l^RRUgzh=B%NI$?Bdy zn)5&<)e6TNf=&8T`N_(8*VZ}L_I6z0#?PWY|0BM_4l3h&zA)7;#%e-|L!6*SbL*124D`;H#nC%Nj-gsyP& zCPx9iQmC!?r}$aq=y`gLXh(<}61ok^rp#_OQ~lh>Y2A?LFT&ki9-Tb_BpUUwJg9Qm zkajAO4Dogjl@tvT#!-&O;GYU?=N&fP1X^1WI3`Ui=G!@-W4CsjaM|2K6G9-Bs6E(v z(`HwYmk@5ps(HXWChUp|5;igBJz%an+$zJA9k!dTL3+WiPaihChG!MIoMY zM>U`CW|z^s8t8J2H4HY4Il2O?y~a}?`g~f{or)KXl+mhcvUu26bvstfk)|cxfghAA zR4mAT5$jmC*9jQZ*_S(F!p}m{1bl>3UuqgLS7ab6im$122G`FG%!PLDT?xd!OPzhX zp@fa)bb8qcD~8^0E_vgDmAyMdb1oOkkN+{1`tL;b&2}$8PN|e`1pQdaz2I^^PB4|b z;7-;y@}jr*FRD{zboBj?pT4rrt^bC&3~_GCgx_1~{=#J>3E%Y_q-^0X&y)q}Cgt+r zpv6r~cMrTxj*_*L3<}XT`k0;E#pn4QRQRsYOFOvfb$RQ8Dv^`~>*Jx1tT>o#(3N9S zfKOXk0H-Xh0$;GOhL?!n!aDRvEbOEpy)Exi)d7tMGi9s*Pgqz0@3XK9{HldDJcz;; z)}cRcVJ9W%gURvSbS^hj`>Gnv&gUm{GvR2YXY;4jre2#Wk7p+?Ol9V4-)Ng!9?Z=w zgeS5y+4;;u_H6jfrSPHg+z?`m(81C(ZUI?L;9)mYdfa7b0sJg + + +Generated by IcoMoon + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/rate/fonts/icomoon.ttf b/packages/rate/fonts/icomoon.ttf new file mode 100755 index 0000000000000000000000000000000000000000..1ee63597a52b7a4d8f0905b6536cc2bb866279a0 GIT binary patch literal 2552 zcmb_eTWpj?6h3F>|Np&oFRcA{+iu%s+sa=cb-VXPENz2@gi8ZOY#NA>rL3jcc6)=A zXcQCUgP1`2MtmS9Ci3KiJSoJiB%0WWiJCO(gEcYH5Pj7b1NEETf7=C`h6krRbG~!t zoHOS#yHjE!s-sIJDSqUI?xg=IeHD`1n5RZ3^V1E(-(Ml(7VyW%@^jOmTfi&o9GkfK zN^kD#55O-F8J@F+{2BLmpUx3E-o}3RECh}_@>}rA-_vI&=NER8JOch#@ac)-Xx=#P zjKY-(zGX7MFirLJ7Wg>$=v02PaP6S$U+_n9#yiu+xp~Bi;rdbSlazP)D(OVxn)n8i zD;3IrQi@$luVyg9et7f~-E+#)YKi(KCN@NGW5uvek7tkpsq?SkA*P7?TI zir#as-d|OgI%p(CWe;3Mka`I&z4oz^){CwnBcJzc5gx_va#^U?dU@MR-uHihJ-+ps_K)vGQ7~wO4*>t>NVlWt~!n zsWr4pO@Tm@ny4XaVdsdu!8LhgR9=D}^)E}+XsZ;R<1pP6zl%%crDl2#em1E=eP@h2 z+6_PZK&(tUo9oQ=GD_AE;h<@Bvh{e%1KQ3L-SLwc!w% zV(TeBc%Oq9%-k4o`VFZ!hMU5Ay{A5GJesqP9%gEL`gqR$)l{n#J|tW8mH64tdB^5C zKiv0?GOTUth8fj1?SJVR-K9C1Li{~+kVX){X#{;7^vRB0oWKWV=}cSrWMZtkROwM7 zf>vd7iJFc%8p14u9`tyEdUWB?p@nD#3&H&P+6}+Cb_J4Z zL-3Bh@#g0E-W`B27ig$UtMhp3_8dOEM^VkCOG9w;23G;S64bW(m;6N*=|y^jXj_CE z(uM=cX02|vvVGjkIm1-5D6T~sw4NIRR(M0hJl%7TU%<0>bTu+N6J z@-~NI0j+riPAb)^`c@7ZIIZ0wJr1wbrIbh|;S9Ila5x3>lG5v1vG(~#q*G`Z(jiCu z`>Yk0S7WHM%W`b5lEF|nb&QjZO^os{ymQq=7LJtIPbeTOXp)S`*!$8A`t1Gn9 zV?OgyAfP9_*;L8Qnys3yiidMGuWQ*FYFad0_(Ew?gF_C=WXF=TPC}v1xzv%AL6$<7 zu#s+Kv1!O!R)J_JzOK!fTtCx46WP9dIh67*cJ>;kh?+~e+>#j;rqO3D`ct9h-PNFJ{{qWOgudP%2 z*AR~(?oDOj`&NFx@EECqb^QgYXm~3-6-JpUzA`y%Q_Gg!1#MHatnDU~B6O8LVK;a2 zIerfnz9WtD30`_ry}B6HNXm@8_~>Ih4kia=m6!zZDH}`Rtc^9`^ETG;pGeTg2IPlq z?4~fitKLz~1&I$k6)b?qY%GEI*jNL8-NrhFC~9K^@?$o3Q<^>;A1zK6i&HdCqg13x z%py$<7iQ(bE^B2S$s7h%H9@%V*Ey^f9=ZDo2#3dC)VEou-Re50n!atR#RK LaWQIJ@;LqvS&5sT literal 0 HcmV?d00001 diff --git a/packages/rate/fonts/icomoon.woff b/packages/rate/fonts/icomoon.woff new file mode 100755 index 0000000000000000000000000000000000000000..1cfafd0871fad63f39c6744ea15909d3d6924a55 GIT binary patch literal 2628 zcmbtWTWDNW6y5utd+$6lkB)O^l1!56B(XPbiIdE`)-(w<4fGM()EYvI*l9W@sY#}J zw5C{m{P}xC$a$l2__?km5j(MVQj-4(tvoiJKMUOik8(Hl1I@xz3A_V-^MJ&6)gk0lN2a_FIy!9&r78 zwm83leC7TXI{_rb9lk;uk#be}2J+W9ic+~m{Q?9HgQ_ED z0qYc?W~@ovj9FSWlS;e5-Kdm;4^!-}vwW{yhK_*A!d(8fUbQ`}1x!o~E5Ef%MW+zu zp0JP``D@3IUpqfg<@e^J;ZQUh3P*WJ z&QiMncc7smz;SCX)%weQYQ3?`@6tOZ9aC$lOpSp+qa>?N)f^2JttO9*%uAt%_ZOvV zv{jD#!4bNl{HDA?UTUIeu+Jtn2zJD|y-oMC56sM@v$>93FQa7jQ4Se;2b+(kJfQA8 z-qn3#r^=eLC8X=@PQIMUPNrP$=AbgPme_iV_uu6Z1~WGVoPJ$s4Uxu(7W4!o`olSE z=wYU|r;p~`Urn{jv4>!jzEXa+bKbFe&JXr|qYP`Cx?x7OO~d`Q@8$pK8Qr0IkwW}E zbbv+?zoCbG9P)|wU7WxdW$8$p_-5iPyHx2>B8paJbBUUcIm9O2776qq)Hie@nLIJn zCmX`7C|bzl32Cv#g9jI56|5-CpRL{S8*5h}DHjypvA4UaseA7ZK)5Sts7tN$cPKCj;ng1FsSg7IE#b|kN=DXbQ8igSoU3|W zE9P+HlJ3F}N);+Ly>wHe!mQ_nAxnRCs0g_UNn!4;rr4TK%`9`evJ-AE#7G7lMAQ z;^B2{rGCKP4r%zv9=k_lP4bQL zm6eJh-K1P0j@aC^b$7s9C0W*PGAK${=wo(sC!gVWP~qD`w@&cV>+;pbs77K5_T;0F z>^PVl&{bkmfKS?30B3Ei0-v+7hJQ058|%;?w6U8a^tOCQRTnfqtW>Z9JZ@tFyvN2W z@I@PI6sDMsb?A@U*p2@sA54xFr;EiInxru*(ln?@Gb4q$`N`r;ED`Uf5h~Ce&BFi- z*e5}8>fX?6L*>!J__?Y491blY&~r3Jd79hMa +
+ + + + + + + + + + + {{ text }} +
+ + + diff --git a/packages/rate/style.css b/packages/rate/style.css new file mode 100755 index 000000000..7e2a7e106 --- /dev/null +++ b/packages/rate/style.css @@ -0,0 +1,60 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?q2cz0t'); + src: url('fonts/icomoon.eot?q2cz0t#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?q2cz0t') format('truetype'), + url('fonts/icomoon.woff?q2cz0t') format('woff'), + url('fonts/icomoon.svg?q2cz0t#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-rate-face-void:before { + content: "\e900"; +} +.icon-rate-face-gray .path1:before { + content: "\e901"; + color: rgb(192, 204, 218); +} +.icon-rate-face-gray .path2:before { + content: "\e902"; + color: rgb(132, 146, 166); +} +.icon-rate-face-yellow .path1:before { + content: "\e903"; + color: rgb(247, 186, 42); +} +.icon-rate-face-yellow .path2:before { + content: "\e904"; + color: rgb(172, 110, 2); +} +.icon-rate-face-orange .path1:before { + content: "\e905"; + color: rgb(255, 153, 0); +} +.icon-rate-face-orange .path2:before { + content: "\e906"; + color: rgb(173, 101, 0); +} +.icon-rate-star-void:before { + content: "\e907"; +} +.icon-rate-star:before { + content: "\e908"; +} + diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css index 9076f7924..57429fc72 100644 --- a/packages/theme-default/src/index.css +++ b/packages/theme-default/src/index.css @@ -33,3 +33,4 @@ @import "./col.css"; @import "./spinner.css"; @import "./card.css"; +@import "./rate.css"; diff --git a/packages/theme-default/src/rate.css b/packages/theme-default/src/rate.css new file mode 100644 index 000000000..758e2d68f --- /dev/null +++ b/packages/theme-default/src/rate.css @@ -0,0 +1,45 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + + @b rate { + height: 20px; + @e item { + display: inline-block; + position: relative; + font-size: 0; + vertical-align: middle; + } + + @e icon { + position: relative; + display: inline-block; + font-size: 18px; + margin-right: 6px; + color: #C6D1DE; + &.hover { + transform: scale(1.1); + } + + .path2 { + position: absolute; + left: 0; + top: 0; + } + } + + @e decimal { + position: absolute; + top: 0; + left: 0; + display: inline-block; + overflow: hidden; + } + + @e text { + font-size: 14px; + vertical-align: middle; + } + } +} diff --git a/src/index.js b/src/index.js index fb956bc4f..5505492c2 100644 --- a/src/index.js +++ b/src/index.js @@ -48,6 +48,8 @@ import Upload from '../packages/upload/index.js'; import Progress from '../packages/progress/index.js'; import Spinner from '../packages/spinner/index.js'; import Message from '../packages/message/index.js'; +import Card from '../packages/card/index.js'; +import Rate from '../packages/rate/index.js'; const install = function(Vue) { if (install.installed) return; @@ -99,6 +101,8 @@ const install = function(Vue) { Vue.component(Progress.name, Progress); Vue.component(Spinner.name, Spinner); Vue.component(Message.name, Message); + Vue.component(Card.name, Card); + Vue.component(Rate.name, Rate); Vue.use(Loading); @@ -166,5 +170,7 @@ module.exports = { Upload, Progress, Spinner, - Message + Message, + Card, + Rate };