Skip to content

E
Element
Commit 33b54f44 authored by Leopoldthecoder's avatar Leopoldthecoder
Browse files
Options

update rate

parent 05e7ea83
Hide whitespace changes
Inline Side-by-side
Showing with 204 additions and 129 deletions
examples/app.vue
View file @ 33b54f44
......@@ -4,6 +4,7 @@
@import '../node_modules/purecss/build/menus.css';
@import '../node_modules/highlight.js/styles/color-brewer.css';
@import 'assets/styles/common.css';
@import 'assets/styles/fonts/style.css';
html, body {
margin: 0;
......
examples/assets/styles/fonts/icomoon.svg 0 → 100755
View file @ 33b54f44
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="rate-face-off" d="M0 448c0 282.766 229.234 512 512 512s512-229.234 512-512c0-282.766-229.234-512-512-512s-512 229.234-512 512zM947.2 448c0 240.351-194.849 435.2-435.2 435.2s-435.2-194.849-435.2-435.2c0-240.351 194.849-435.2 435.2-435.2s435.2 194.849 435.2 435.2zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
<glyph unicode="&#xe901;" glyph-name="rate-face-1" d="M512.001 960c-282.771 0-512.001-229.23-512.001-512.002 0-282.77 229.23-511.998 512.001-511.998 282.769 0 511.999 229.227 511.999 511.998s-229.23 512.002-511.999 512.002zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM694.529 181.197l-3.422 1.216c-56.15 27.872-116.388 42.047-178.882 42.047-64.556 0-125.611-14.316-181.515-42.45l-3.382-1.132c-2.102-0.628-4.945-1.529-8.489-1.529-20.554 0-37.239 18.29-37.239 40.734 0 10.655 4.571 21.361 12.114 29.399l-0.456 2.483 9.516 4.698c66.74 33.104 139.336 50.537 209.907 50.537 71.889 0 142.336-16.984 210.314-50.948 11.943-7.181 19.405-20.953 19.405-35.903 0-26.328-21.71-47.958-47.871-39.153z" />
<glyph unicode="&#xe902;" glyph-name="rate-face-2" d="M512-64c-282.766 0-512 229.234-512 512s229.234 512 512 512c282.766 0 512-229.234 512-512s-229.234-512-512-512zM294.4 588.853v-51.307c0-28.482 22.923-51.147 51.2-51.147 28.474 0 51.2 22.899 51.2 51.147v51.307c0 28.482-22.923 51.147-51.2 51.147-28.474 0-51.2-22.899-51.2-51.147zM627.2 588.853v-51.307c0-28.482 22.923-51.147 51.2-51.147 28.474 0 51.2 22.899 51.2 51.147v51.307c0 28.482-22.923 51.147-51.2 51.147-28.474 0-51.2-22.899-51.2-51.147zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
<glyph unicode="&#xe903;" glyph-name="rate-face-3" d="M512.001 960c-282.77 0-512.001-229.23-512.001-511.999s229.23-512.001 512.001-512.001c282.77 0 511.999 229.23 511.999 511.999s-229.229 512.001-511.999 512.001zM817.495 305.565c-0.445-1.485-0.963-2.939-1.569-4.35-0.676-1.572-1.455-3.089-2.317-4.556-55.631-107.613-169.518-181.459-301.323-181.459-0.096 0-0.19 0.002-0.286 0.002s-0.19-0.002-0.286-0.002c-131.804 0-245.693 73.845-301.323 181.459-0.862 1.467-1.641 2.984-2.317 4.556-0.606 1.41-1.124 2.865-1.569 4.35-1.103 3.68-1.705 7.569-1.705 11.597 0 6.566 1.579 12.771 4.372 18.282 6.897 13.601 21.239 22.955 37.822 22.955s30.927-9.355 37.823-22.955h0.676c41.411-81.453 127.131-137.544 226.507-137.652 99.375 0.108 185.095 56.2 226.507 137.652h0.676c6.897 13.601 21.239 22.955 37.823 22.955s30.927-9.355 37.822-22.955c2.794-5.511 4.372-11.715 4.372-18.282 0-4.029-0.602-7.918-1.705-11.597zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307z" />
</font></defs></svg>
\ No newline at end of file
packages/rate/style.css → examples/assets/styles/fonts/style.css
View file @ 33b54f44
@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');
src: url('assets/styles/fonts/icomoon.eot?h6xgdm');
src: url('assets/styles/fonts/icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),
url('assets/styles/fonts/icomoon.ttf?h6xgdm') format('truetype'),
url('assets/styles/fonts/icomoon.woff?h6xgdm') format('woff'),
url('assets/styles/fonts/icomoon.svg?h6xgdm#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
......@@ -24,37 +24,16 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-rate-face-void:before {
.icon-rate-face-off:before {
content: "\e900";
}
.icon-rate-face-gray .path1:before {
.icon-rate-face-1:before {
content: "\e901";
color: rgb(192, 204, 218);
}
.icon-rate-face-gray .path2:before {
.icon-rate-face-2:before {
content: "\e902";
color: rgb(132, 146, 166);
}
.icon-rate-face-yellow .path1:before {
.icon-rate-face-3: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";
}
examples/docs/rate.md
View file @ 33b54f44
......@@ -6,7 +6,7 @@
value2: null,
value3: null,
value4: null,
value5: 3.6
value5: 3.7
};
}
}
......@@ -31,11 +31,11 @@
利用颜色对分数及情感倾向进行分级。分数可以被分为三个等级，对应的两个阈值可分别通过 `low-threshold` 和 `high-threshold` 设定。
<div class="demo-box demo-rate">
<el-rate v-model="value2" multi-color></el-rate>
<el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
</div>
``` html
<el-rate v-model="value2" multi-color></el-rate>
<el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
```
## 辅助文字
......@@ -53,34 +53,45 @@
## 其他 icon
<div class="demo-box demo-rate">
<el-rate v-model="value4" smiley></el-rate>
<el-rate v-model="value4" :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']" void-icon-class="icon-rate-face-off" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
</div>
``` html
<el-rate v-model="value4" smiley></el-rate>
<el-rate
v-model="value4"
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>
```
## 只读
为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-text`，则会在右侧显示目前的分值。可以提供 `text-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
<div class="demo-box demo-rate">
<el-rate v-model="value5" disabled show-text text-template="{value} 分"></el-rate>
<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value} 分"></el-rate>
</div>
``` html
<el-rate v-model="value5" disabled show-text text-template="{value} 分"></el-rate>
<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value} 分"></el-rate>
```
## 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 |
| allow-half | 是否允许半选 | Boolean | | false |
| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | Number | | 2 |
| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | Number | | 4 |
| colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | Array | | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | 未选中 icon 的颜色 | String | | '#C6D1DE' |
| disabled-void-color | 只读时未选中 icon 的颜色 | String | | '#EFF2F7' |
| icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | Array | | ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'] |
| void-icon-class | 未选中 icon 的类名 | String | | 'el-icon-star-off' |
| disabled-void-icon-class | 只读时未选中 icon 的类名 | String | | 'el-icon-star-on' |
| show-text | 是否显示辅助文字 | Boolean | | false |
| text-color | 辅助文字的颜色 | String | | '1F2D3D' |
| texts | 辅助文字数组 | Array | | ['极差', '失望', '一般', '满意', '惊喜'] |
| text-template | 只读时的辅助文字模板 | String | | '{value}' |
......
examples/icon.json
View file @ 33b54f44
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","angle-left","angle-right","truck"]
\ No newline at end of file
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-on","star-off"]
\ No newline at end of file
packages/rate/fonts/icomoon.svg deleted 100755 → 0
View file @ 05e7ea83
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="rate-face-void" d="M0 448c0 282.766 229.234 512 512 512s512-229.234 512-512c0-282.766-229.234-512-512-512s-512 229.234-512 512zM947.2 448c0 240.351-194.849 435.2-435.2 435.2s-435.2-194.849-435.2-435.2c0-240.351 194.849-435.2 435.2-435.2s435.2 194.849 435.2 435.2zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
<glyph unicode="&#xe901;" d="M512.001 960c-282.771 0-512.001-229.23-512.001-512.002 0-282.77 229.23-511.998 512.001-511.998 282.769 0 511.999 229.227 511.999 511.998s-229.23 512.002-511.999 512.002v0z" />
<glyph unicode="&#xe902;" d="M294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM694.529 181.197l-3.422 1.216c-56.15 27.872-116.388 42.047-178.882 42.047-64.556 0-125.611-14.316-181.515-42.45l-3.382-1.132c-2.102-0.628-4.945-1.529-8.489-1.529-20.554 0-37.239 18.29-37.239 40.734 0 10.655 4.571 21.361 12.114 29.399l-0.456 2.483 9.516 4.698c66.74 33.104 139.336 50.537 209.907 50.537 71.889 0 142.336-16.984 210.314-50.948 11.943-7.181 19.405-20.953 19.405-35.903 0-26.328-21.71-47.958-47.871-39.153z" />
<glyph unicode="&#xe903;" d="M512-64c-282.766 0-512 229.234-512 512s229.234 512 512 512c282.766 0 512-229.234 512-512s-229.234-512-512-512v0z" />
<glyph unicode="&#xe904;" d="M294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
<glyph unicode="&#xe905;" d="M512.001 960c-282.77 0-512.001-229.23-512.001-511.999s229.23-512.001 512.001-512.001c282.77 0 511.999 229.23 511.999 511.999s-229.229 512.001-511.999 512.001v0z" />
<glyph unicode="&#xe906;" d="M817.495 305.565c-0.445-1.485-0.963-2.939-1.569-4.35-0.676-1.572-1.455-3.089-2.317-4.556-55.631-107.613-169.518-181.459-301.323-181.459-0.096 0-0.19 0.002-0.286 0.002s-0.19-0.002-0.286-0.002c-131.804 0-245.693 73.845-301.323 181.459-0.862 1.467-1.641 2.984-2.317 4.556-0.606 1.41-1.124 2.865-1.569 4.35-1.103 3.68-1.705 7.569-1.705 11.597 0 6.566 1.579 12.771 4.372 18.282 6.897 13.601 21.239 22.955 37.822 22.955s30.927-9.355 37.823-22.955h0.676c41.411-81.453 127.131-137.544 226.507-137.652 99.375 0.108 185.095 56.2 226.507 137.652h0.676c6.897 13.601 21.239 22.955 37.823 22.955s30.927-9.355 37.822-22.955c2.794-5.511 4.372-11.715 4.372-18.282 0-4.029-0.602-7.918-1.705-11.597zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307z" />
<glyph unicode="&#xe907;" glyph-name="rate-star-void" d="M779.518 29.414c10.587-6.217 18.901-9.345 23.926-9.961-0.519 0.064-4.025-0.689-8.174-3.745-4.111-3.028-5.83-6.069-5.909-6.499 0.928 5.022 0.452 13.902-2.267 25.831l-48.871 214.449c-11.327 49.703 8.583 109.981 46.99 143.349l167.879 145.854c9.047 7.86 14.515 14.575 16.618 18.988-0.298-0.625-0.709-4.339 0.932-9.381 1.625-4.994 4.071-7.682 4.562-7.95-4.432 2.418-12.992 4.717-25.18 5.835l-223.357 20.487c-50.107 4.596-101.469 41.879-121.596 88.102l-87.917 201.902c-4.865 11.172-9.736 18.558-13.464 22.030 0.263-0.245 3.332-1.609 8.231-1.609s7.966 1.364 8.228 1.608c-3.729-3.473-8.599-10.858-13.464-22.029l-87.917-201.902c-20.245-46.493-71.405-83.498-121.596-88.102l-223.357-20.487c-12.361-1.134-21.058-3.451-25.573-5.895 0.491 0.266 2.985 2.987 4.647 8.087 1.682 5.159 1.254 8.952 0.946 9.593 2.149-4.476 7.719-11.291 16.911-19.277l167.879-145.854c38.555-33.497 58.274-93.837 46.99-143.349l-48.871-214.449c-2.708-11.883-3.172-20.709-2.242-25.684-0.086 0.458-1.816 3.501-5.91 6.501-4.101 3.005-7.542 3.743-8.025 3.684 5.004 0.611 13.26 3.712 23.753 9.874l192.138 112.831c43.815 25.73 107.277 25.631 150.924 0l192.138-112.831zM465.263 93.189l-192.138-112.831c-68.347-40.136-109.472-10.003-91.85 67.322l48.871 214.449c6.589 28.911-6.009 67.933-28.834 87.764l-167.879 145.854c-59.718 51.883-44.364 99.791 35.183 107.088l223.357 20.487c29.367 2.694 62.617 26.566 74.634 54.163l87.917 201.902c31.697 72.793 83.086 72.801 114.787 0l87.917-201.902c11.853-27.22 45.236-51.466 74.634-54.163l223.357-20.487c79.149-7.26 94.51-55.544 35.183-107.088l-167.879-145.854c-22.513-19.56-35.514-58.452-28.834-87.764l48.871-214.449c17.62-77.317-23.159-107.66-91.85-67.322l-192.138 112.831c-25.767 15.131-67.185 15.341-93.309 0z" />
<glyph unicode="&#xe908;" glyph-name="rate-star" d="M558.572 93.189c-25.767 15.131-67.185 15.341-93.309 0l-192.138-112.831c-68.347-40.136-109.472-10.003-91.85 67.322l48.871 214.449c6.589 28.911-6.009 67.933-28.834 87.764l-167.879 145.854c-59.718 51.883-44.364 99.791 35.183 107.088l223.357 20.487c29.367 2.694 62.617 26.566 74.634 54.163l87.917 201.902c31.697 72.793 83.086 72.801 114.787 0l87.917-201.902c11.853-27.22 45.236-51.466 74.634-54.163l223.357-20.487c79.149-7.26 94.51-55.544 35.183-107.088l-167.879-145.854c-22.513-19.56-35.514-58.452-28.834-87.764l48.871-214.449c17.62-77.317-23.159-107.66-91.85-67.322l-192.138 112.831z" />
</font></defs></svg>
\ No newline at end of file
packages/rate/src/main.vue
View file @ 33b54f44
......@@ -3,55 +3,37 @@
<span
v-for="item in max"
class="el-rate__item"
@mouseenter="setCurrentValue(item)"
@mousemove="setCurrentValue(item, $event)"
@mouseleave="resetCurrentValue"
@click="selectValue(item)"
:style="{ cursor: disabled ? 'auto' : 'pointer' }">
<i
:class="[classes[item - 1], {'hover': hoverIndex === item}]"
:class="[classes[item - 1], { 'hover': hoverIndex === item }]"
class="el-rate__icon"
:style="getIconStyle(item)">
<span class="path1" v-if="smiley && item <= currentValue"></span>
<span class="path2" v-if="smiley && item <= currentValue"></span>
<i
v-if="showDecimalIcon(item)"
:class="decimalIconClass"
:style="decimalStyle"
class="el-rate__decimal">
<span class="path1" v-if="smiley"></span>
<span class="path2" v-if="smiley"></span>
</i>
</i>
</span>
<span v-if="showText" class="el-rate__text" :style="textStyle">{{ text }}</span>
<span v-if="showText" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
</div>
</template>
<script type="text/babel">
const CLASS_MAP = {
noSmiley: 'icon-rate-star',
noSmileyVoid: 'icon-rate-star-void',
smileyLow: 'icon-rate-face-gray',
smileyMedium: 'icon-rate-face-yellow',
smileyHigh: 'icon-rate-face-orange',
smileyVoid: 'icon-rate-face-void'
};
const COLOR_MAP = {
lowColor: '#99A9BF',
mediumColor: '#F7BA2A',
highColor: '#FF9900',
voidColor: '#C6D1DE',
disbaledVoidColor: '#EFF2F7'
};
import '../style.css';
export default {
name: 'el-rate',
data() {
return {
classMap: {},
colorMap: {},
classes: null,
currentValue: 0,
colors: null,
pointerAtLeftHalf: false,
currentValue: this.value,
hoverIndex: -1
};
},
......@@ -73,15 +55,39 @@
type: Number,
default: 5
},
multiColor: {
type: Boolean,
default: false
colors: {
type: Array,
default() {
return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
}
},
smiley: {
voidColor: {
type: String,
default: '#C6D1DE'
},
disabledVoidColor: {
type: String,
default: '#EFF2F7'
},
iconClasses: {
type: Array,
default() {
return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
}
},
voidIconClass: {
type: String,
default: 'el-icon-star-off'
},
disabledVoidIconClass: {
type: String,
default: 'el-icon-star-on'
},
disabled: {
type: Boolean,
default: false
},
disabled: {
allowHalf: {
type: Boolean,
default: false
},
......@@ -89,6 +95,10 @@
type: Boolean,
default: false
},
textColor: {
type: String,
default: '1f2d3d'
},
texts: {
type: Array,
default() {
......@@ -105,27 +115,24 @@
text() {
let result = '';
if (this.disabled) {
result = this.textTemplate.replace('{value}', this.value);
result = this.textTemplate.replace(/\{\s*value\s*\}/, this.value);
} else {
result = this.texts[this.currentValue - 1];
result = this.texts[Math.ceil(this.currentValue) - 1];
}
return result;
},
textStyle() {
let color = '';
if (this.multiColor || this.smiley) {
color = this.getValueFromMap(this.currentValue, COLOR_MAP);
} else {
color = COLOR_MAP.mediumColor;
}
return { color };
},
decimalStyle() {
let width = '';
if (this.disabled) {
width = `${ this.valueDecimal < 50 ? 0 : 50 }%`;
}
if (this.allowHalf) {
width = '50%';
}
return {
color: this.smiley ? '' : this.activeColor,
width: this.valueDecimal + '%'
color: this.activeColor,
width
};
},
......@@ -134,45 +141,34 @@
},
decimalIconClass() {
let className = '';
if (!this.smiley) {
className = CLASS_MAP.noSmiley;
} else {
className = this.getValueFromMap(this.value, CLASS_MAP);
}
return className;
return this.getValueFromMap(this.value, this.classMap);
},
voidClass() {
const noSmileyVoidClass = this.disabled ? CLASS_MAP.noSmiley : CLASS_MAP.noSmileyVoid;
return this.smiley ? CLASS_MAP.smileyVoid : noSmileyVoidClass;
return this.disabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
},
activeClass() {
let className = '';
if (this.smiley) {
className = this.getValueFromMap(this.currentValue, CLASS_MAP);
} else {
className = CLASS_MAP.noSmiley;
}
return className;
return this.getValueFromMap(this.currentValue, this.classMap);
},
activeColor() {
let color = '';
if (!this.smiley) {
if (this.multiColor) {
color = this.getValueFromMap(this.currentValue, COLOR_MAP);
} else {
color = COLOR_MAP.mediumColor;
}
}
return color;
return this.getValueFromMap(this.currentValue, this.colorMap);
},
classes() {
let result = new Array(this.max);
result.fill(this.activeClass, 0, this.currentValue).fill(this.voidClass, this.currentValue, this.max);
let result = [];
let i = 0;
let threshold = this.currentValue;
if (this.allowHalf && this.currentValue !== Math.floor(this.currentValue)) {
threshold--;
}
for (; i < threshold; i++) {
result.push(this.activeClass);
}
for (; i < this.max; i++) {
result.push(this.voidClass);
}
return result;
}
},
......@@ -188,24 +184,25 @@
getValueFromMap(value, map) {
let result = '';
if (value <= this.lowThreshold) {
result = map.lowColor || map.smileyLow;
result = map.lowColor || map.lowClass;
} else if (value >= this.highThreshold) {
result = map.highColor || map.smileyHigh;
result = map.highColor || map.highClass;
} else {
result = map.mediumColor || map.smileyMedium;
result = map.mediumColor || map.mediumClass;
}
return result;
},
showDecimalIcon(item) {
return this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
let showWhenDisabled = this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
let showWhenAllowHalf = this.allowHalf && this.pointerAtLeftHalf && ((item - 0.5).toString() === this.currentValue.toString());
return showWhenDisabled || showWhenAllowHalf;
},
getIconStyle(item) {
const voidColor = this.disabled ? COLOR_MAP.disbaledVoidColor : COLOR_MAP.voidColor;
const noSmileyColor = item <= this.currentValue ? this.activeColor : voidColor;
const voidColor = this.disabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
return {
color: this.smiley ? '' : noSmileyColor
color: item <= this.currentValue ? this.activeColor : voidColor
};
},
......@@ -213,15 +210,30 @@
if (this.disabled) {
return;
}
this.currentValue = value;
this.$emit('input', value);
if (this.allowHalf && this.pointerAtLeftHalf) {
this.$emit('input', this.currentValue);
} else {
this.$emit('input', value);
}
},
setCurrentValue(value) {
setCurrentValue(value, event) {
if (this.disabled) {
return;
}
this.currentValue = value;
if (this.allowHalf) {
let target = event.target;
if (target.classList.contains('el-rate__item')) {
target = target.querySelector('.el-rate__icon');
}
if (target.classList.contains('el-rate__decimal')) {
target = target.parentNode;
}
this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
this.currentValue = this.pointerAtLeftHalf ? value - 0.5 : value;
} else {
this.currentValue = value;
}
this.hoverIndex = value;
},
......@@ -229,13 +241,32 @@
if (this.disabled) {
return;
}
if (this.allowHalf) {
this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
}
this.currentValue = this.value;
this.hoverIndex = -1;
}
},
created() {
this.currentValue = this.value;
if (!this.value) {
this.$emit('input', 0);
}
this.classMap = {
lowClass: this.iconClasses[0],
mediumClass: this.iconClasses[1],
highClass: this.iconClasses[2],
voidClass: this.voidIconClass,
disabledVoidClass: this.disabledVoidIconClass
};
this.colorMap = {
lowColor: this.colors[0],
mediumColor: this.colors[1],
highColor: this.colors[2],
voidColor: this.voidColor,
disabledVoidColor: this.disabledVoidColor
};
}
};
</script>
packages/theme-default/src/fonts/element-icons.svg
View file @ 33b54f44
......@@ -39,9 +39,8 @@
<glyph unicode="&#xe91d;" glyph-name="caret-bottom" d="M409.826 240.51c37.19-36.187 97.855-35.83 134.678 0l367.178 357.276c73.495 71.513 49.602 129.486-53.106 129.486h-762.822c-102.825 0-126.512-58.060-53.106-129.486l367.178-357.276z" />
<glyph unicode="&#xe91e;" glyph-name="edit" d="M84.186 243.909l-84.186-307.909 306.998 85.375 484.852 484.209-225.523 219.804-482.141-481.48zM755.070 913.917l-120.787-120.643 226.275-219.096 117.282 117.171c61.546 61.477 61.546 161.098 0 222.569-61.532 61.443-161.309 61.443-222.77 0z" />
<glyph unicode="&#xe91f;" glyph-name="caret-top" d="M409.826 700.266c37.19 36.187 97.855 35.83 134.678 0l367.178-357.276c73.495-71.513 49.602-129.486-53.106-129.486h-762.822c-102.825 0-126.512 58.060-53.106 129.486l367.178 357.276z" />
<glyph unicode="&#xe920;" glyph-name="check" d="M361.151 322.144l482.718 482.718 120.68-120.68-603.398-603.398-301.699 301.699 120.68 120.68 181.019-181.019z" />
<glyph unicode="&#xe920;" glyph-name="check" horiz-adv-x="1365" d="M569.942 138.091c-19.251 0-38.43 7.354-53.122 21.979l-300.554 300.519c-29.301 29.327-29.301 76.928 0 106.265 29.373 29.327 76.95 29.327 106.25 0l247.431-247.392 472.796 472.724c29.301 29.412 76.874 29.412 106.25 0 29.301-29.327 29.301-76.856 0-106.182l-525.913-525.94c-14.686-14.631-33.941-21.979-53.122-21.979v0z" />
<glyph unicode="&#xe921;" glyph-name="minus" d="M78.769 526.769h866.462c43.503 0 78.769-35.266 78.769-78.769s-35.266-78.769-78.769-78.769h-866.462c-43.503 0-78.769 35.266-78.769 78.769s35.266 78.769 78.769 78.769z" />
<glyph unicode="&#xe922;" glyph-name="truck" d="M794.624 593.76c-5.952 8.896-15.936 14.24-26.624 14.24h-32c-17.696 0-32-14.304-32-32v-192c0-17.696 14.304-32 32-32h128c17.696 0 32 14.304 32 32v48c0 6.304-1.888 12.512-5.376 17.76l-96 144zM864 384h-128v192h32l96-144v-48zM1007.872 469.248l-128 192c-17.856 26.784-47.744 42.752-79.872 42.752h-128v64c0 52.928-43.072 96-96 96h-480c-52.928 0-96-43.072-96-96v-352c0-52.928 43.072-96 96-96v0-96c0-52.928 43.072-96 96-96h36.544c14.304-55.072 64-96 123.488-96 59.424 0 109.12 40.928 123.424 96h169.024c14.304-55.072 64-96 123.488-96 59.424 0 109.12 40.928 123.424 96h36.608c52.928 0 96 43.072 96 96v192c0 19.008-5.568 37.44-16.128 53.248zM96 384c-17.664 0-32 14.304-32 32v352c0 17.696 14.336 32 32 32h480c17.696 0 32-14.304 32-32v-352c0-17.696-14.304-32-32-32h-480zM352.032 96c-35.36 0-64 28.672-64 64s28.64 64 64 64c35.328 0 64-28.672 64-64s-28.704-64-64-64zM768 96c-35.36 0-64 28.672-64 64s28.64 64 64 64c35.328 0 64-28.672 64-64s-28.672-64-64-64zM960 224c0-17.696-14.304-32-32-32h-36.576c-14.304 55.072-64 96-123.424 96-59.488 0-109.184-40.928-123.488-96h-169.024c-14.304 55.072-64 96-123.424 96-59.488 0-109.184-40.928-123.488-96h-36.576c-17.664 0-32 14.304-32 32v96h416c52.928 0 96 43.072 96 96v224h128c10.688 0 20.672-5.344 26.624-14.24l128-192c3.488-5.248 5.376-11.456 5.376-17.76v-192z" />
<glyph unicode="&#xf104;" glyph-name="angle-left" horiz-adv-x="384" d="M384.002 164.382q0 8.578-6.598 15.176l-259.3 259.3 259.3 259.3q6.598 6.598 6.598 15.176t-6.598 15.176l-32.989 32.989q-6.598 6.598-15.176 6.598t-15.176-6.598l-307.466-307.466q-6.598-6.598-6.598-15.176t6.598-15.176l307.466-307.466q6.598-6.598 15.176-6.598t15.176 6.598l32.989 32.989q6.598 6.598 6.598 15.176z" />
<glyph unicode="&#xf105;" glyph-name="angle-right" horiz-adv-x="347" d="M340 438.858q0-7.429-5.714-13.143l-266.286-266.286q-5.714-5.714-13.143-5.714t-13.143 5.714l-28.571 28.571q-5.714 5.714-5.714 13.143t5.714 13.143l224.571 224.571-224.571 224.571q-5.714 5.714-5.714 13.143t5.714 13.143l28.571 28.571q5.714 5.714 13.143 5.714t13.143-5.714l266.286-266.286q5.714-5.714 5.714-13.143z" />
<glyph unicode="&#xe922;" glyph-name="star-off" horiz-adv-x="1084" d="M825.372 4.792c11.209-6.583 20.013-9.895 25.334-10.547-0.549 0.067-4.261-0.73-8.655-3.966-4.353-3.206-6.173-6.426-6.257-6.881 0.983 5.318 0.479 14.719-2.4 27.35l-51.746 227.064c-11.993 52.627 9.088 116.45 49.754 151.782l177.754 154.433c9.58 8.323 15.369 15.433 17.595 20.104-0.315-0.662-0.75-4.594 0.986-9.933 1.72-5.288 4.31-8.134 4.83-8.417-4.693 2.561-13.756 4.994-26.661 6.178l-236.495 21.693c-53.054 4.866-107.438 44.343-128.749 93.284l-93.089 213.779c-5.151 11.829-10.308 19.65-14.256 23.326 0.278-0.259 3.528-1.704 8.715-1.704s8.434 1.445 8.711 1.703c-3.948-3.677-9.105-11.497-14.256-23.325l-93.089-213.779c-21.436-49.228-75.606-88.41-128.749-93.284l-236.495-21.693c-13.088-1.2-22.296-3.654-27.077-6.242 0.519 0.281 3.16 3.163 4.921 8.563 1.781 5.463 1.327 9.479 1.001 10.157 2.276-4.739 8.173-11.955 17.906-20.411l177.754-154.433c40.823-35.468 61.701-99.357 49.754-151.782l-51.746-227.064c-2.867-12.582-3.359-21.928-2.374-27.194-0.091 0.485-1.923 3.707-6.257 6.883-4.342 3.182-7.986 3.963-8.497 3.9 5.298 0.647 14.039 3.93 25.15 10.455l203.441 119.468c46.392 27.243 113.588 27.139 159.802 0l203.441-119.468zM492.632 72.318l-203.441-119.468c-72.368-42.497-115.912-10.592-97.253 71.282l51.746 227.064c6.976 30.612-6.362 71.929-30.53 92.926l-177.754 154.433c-63.231 54.935-46.973 105.661 37.252 113.387l236.495 21.693c31.094 2.852 66.301 28.129 79.024 57.349l93.089 213.779c33.562 77.075 87.973 77.083 121.539 0l93.089-213.779c12.55-28.821 47.897-54.494 79.024-57.349l236.495-21.693c83.804-7.687 100.070-58.811 37.252-113.387l-177.754-154.433c-23.838-20.71-37.603-61.891-30.53-92.926l51.746-227.064c18.656-81.865-24.522-113.993-97.253-71.282l-203.441 119.468c-27.282 16.021-71.137 16.243-98.798 0z" />
<glyph unicode="&#xe923;" glyph-name="star-on" horiz-adv-x="1084" d="M591.429 72.318c-27.282 16.021-71.137 16.243-98.798 0l-203.441-119.468c-72.368-42.497-115.912-10.592-97.253 71.282l51.746 227.064c6.976 30.612-6.362 71.929-30.53 92.926l-177.754 154.433c-63.231 54.935-46.973 105.661 37.252 113.387l236.495 21.693c31.094 2.852 66.301 28.129 79.024 57.349l93.089 213.779c33.562 77.075 87.973 77.083 121.539 0l93.089-213.779c12.55-28.821 47.897-54.494 79.024-57.349l236.495-21.693c83.804-7.687 100.070-58.811 37.252-113.387l-177.754-154.433c-23.838-20.71-37.603-61.891-30.53-92.926l51.746-227.064c18.656-81.865-24.522-113.993-97.253-71.282l-203.441 119.468z" />
</font></defs></svg>
\ No newline at end of file
packages/theme-default/src/icon.css
View file @ 33b54f44
@font-face {
font-family: 'element-icons';
src:
url('fonts/element-icons.ttf?deq2r7') format('truetype'),
url('fonts/element-icons.woff?deq2r7') format('woff'),
url('fonts/element-icons.svg?deq2r7#element-icons') format('svg');
url('fonts/element-icons.ttf?ld8k1a') format('truetype'),
url('fonts/element-icons.woff?ld8k1a') format('woff'),
url('fonts/element-icons.svg?ld8k1a#element-icons') format('svg');
font-weight: normal;
font-style: normal;
}
......@@ -127,15 +127,12 @@
.el-icon-minus:before {
content: "\e921";
}
.el-icon-angle-left:before {
content: "\f104";
}
.el-icon-angle-right:before {
content: "\f105";
}
.el-icon-truck:before {
.el-icon-star-off:before {
content: "\e922";
}
.el-icon-star-on:before {
content: "\e923";
}
.el-icon-loading {
animation: rotating 1s linear infinite;
......
packages/theme-default/src/input.css
View file @ 33b54f44
......@@ -19,6 +19,7 @@
border-radius: 4px;
transition: var(--border-transition-base);
outline: none;
font-size: inherit;
&::placeholder {
color: var(--input-placeholder-color);
......
packages/theme-default/src/rate.css
View file @ 33b54f44
......@@ -18,8 +18,9 @@
font-size: 18px;
margin-right: 6px;
color: #C6D1DE;
transition: .3s;
&.hover {
transform: scale(1.1);
transform: scale(1.15);
}
.path2 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment