mirror of https://github.com/ElemeFE/element
FuryBean
GitHub
commit
454bb52f93
|
|
@ -151,5 +151,8 @@
|
|||
],
|
||||
"card": [
|
||||
"./packages/card/index.js"
|
||||
],
|
||||
"rate": [
|
||||
"./packages/rate/index.js"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -0,0 +1,14 @@
|
|||
<?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=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" 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="" 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="" 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="" 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>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,39 @@
|
|||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
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;
|
||||
}
|
||||
|
||||
[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-off:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-rate-face-1:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-rate-face-2:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-rate-face-3:before {
|
||||
content: "\e903";
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
value4: null,
|
||||
value5: 3.7
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-box.demo-rate {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
## 基础用法
|
||||
|
||||
<div class="demo-box demo-rate">
|
||||
<el-rate v-model="value1"></el-rate>
|
||||
</div>
|
||||
|
||||
``` html
|
||||
<el-rate v-model="value1"></el-rate>
|
||||
```
|
||||
|
||||
## 区分颜色
|
||||
|
||||
利用颜色对分数及情感倾向进行分级。分数可以被分为三个等级，对应的两个阈值可分别通过 `low-threshold` 和 `high-threshold` 设定。
|
||||
|
||||
<div class="demo-box demo-rate">
|
||||
<el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
|
||||
</div>
|
||||
|
||||
``` html
|
||||
<el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
|
||||
```
|
||||
|
||||
## 辅助文字
|
||||
|
||||
为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。
|
||||
|
||||
<div class="demo-box demo-rate">
|
||||
<el-rate v-model="value3" show-text></el-rate>
|
||||
</div>
|
||||
|
||||
``` html
|
||||
<el-rate v-model="value3" show-text></el-rate>
|
||||
```
|
||||
|
||||
## 其他 icon
|
||||
|
||||
<div class="demo-box demo-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"
|
||||
: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-color="#ff9900" text-template="{value} 分"></el-rate>
|
||||
</div>
|
||||
|
||||
``` html
|
||||
<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value} 分"></el-rate>
|
||||
```
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| v-model | 绑定值 | Number | | 0 |
|
||||
| max | 最大分值 | Number | | 5 |
|
||||
| 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}' |
|
||||
|
||||
## Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 分值改变时触发 | 改变后的分值 |
|
||||
|
||||
|
|
@ -1 +1 @@
|
|||
["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"]
|
||||
["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"]
|
||||
|
|
@ -178,6 +178,11 @@
|
|||
"name": "滑块 (slider)",
|
||||
"title": "slider 滑块",
|
||||
"description": "通过拖动滑块在一个固定区间内进行选择"
|
||||
},
|
||||
{
|
||||
"path": "/rate",
|
||||
"name": "评分 (rate)",
|
||||
"title": "评分组件"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const Rate = require('./src/main');
|
||||
|
||||
Rate.install = function(Vue) {
|
||||
Vue.component(Rate.name, Rate);
|
||||
};
|
||||
|
||||
module.exports = Rate;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "el-rate",
|
||||
"version": "0.0.0",
|
||||
"description": "A rate component for Vue.js.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/element-component/element/tree/master/packages/rate",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
<template>
|
||||
<div class="el-rate">
|
||||
<span
|
||||
v-for="item in max"
|
||||
class="el-rate__item"
|
||||
@mousemove="setCurrentValue(item, $event)"
|
||||
@mouseleave="resetCurrentValue"
|
||||
@click="selectValue(item)"
|
||||
:style="{ cursor: disabled ? 'auto' : 'pointer' }">
|
||||
<i
|
||||
:class="[classes[item - 1], { 'hover': hoverIndex === item }]"
|
||||
class="el-rate__icon"
|
||||
:style="getIconStyle(item)">
|
||||
<i
|
||||
v-if="showDecimalIcon(item)"
|
||||
:class="decimalIconClass"
|
||||
:style="decimalStyle"
|
||||
class="el-rate__decimal">
|
||||
</i>
|
||||
</i>
|
||||
</span>
|
||||
<span v-if="showText" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
name: 'el-rate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
classMap: {},
|
||||
colorMap: {},
|
||||
classes: null,
|
||||
pointerAtLeftHalf: false,
|
||||
currentValue: this.value,
|
||||
hoverIndex: -1
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
lowThreshold: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
highThreshold: {
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
colors: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
|
||||
}
|
||||
},
|
||||
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
|
||||
},
|
||||
allowHalf: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showText: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '1f2d3d'
|
||||
},
|
||||
texts: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['极差', '失望', '一般', '满意', '惊喜'];
|
||||
}
|
||||
},
|
||||
textTemplate: {
|
||||
type: String,
|
||||
default: '{value}'
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
text() {
|
||||
let result = '';
|
||||
if (this.disabled) {
|
||||
result = this.textTemplate.replace(/\{\s*value\s*\}/, this.value);
|
||||
} else {
|
||||
result = this.texts[Math.ceil(this.currentValue) - 1];
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
decimalStyle() {
|
||||
let width = '';
|
||||
if (this.disabled) {
|
||||
width = `${ this.valueDecimal < 50 ? 0 : 50 }%`;
|
||||
}
|
||||
if (this.allowHalf) {
|
||||
width = '50%';
|
||||
}
|
||||
return {
|
||||
color: this.activeColor,
|
||||
width
|
||||
};
|
||||
},
|
||||
|
||||
valueDecimal() {
|
||||
return this.value * 100 - Math.floor(this.value) * 100;
|
||||
},
|
||||
|
||||
decimalIconClass() {
|
||||
return this.getValueFromMap(this.value, this.classMap);
|
||||
},
|
||||
|
||||
voidClass() {
|
||||
return this.disabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
|
||||
},
|
||||
|
||||
activeClass() {
|
||||
return this.getValueFromMap(this.currentValue, this.classMap);
|
||||
},
|
||||
|
||||
activeColor() {
|
||||
return this.getValueFromMap(this.currentValue, this.colorMap);
|
||||
},
|
||||
|
||||
classes() {
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.$emit('change', val);
|
||||
this.currentValue = val;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getValueFromMap(value, map) {
|
||||
let result = '';
|
||||
if (value <= this.lowThreshold) {
|
||||
result = map.lowColor || map.lowClass;
|
||||
} else if (value >= this.highThreshold) {
|
||||
result = map.highColor || map.highClass;
|
||||
} else {
|
||||
result = map.mediumColor || map.mediumClass;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
showDecimalIcon(item) {
|
||||
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 ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
|
||||
return {
|
||||
color: item <= this.currentValue ? this.activeColor : voidColor
|
||||
};
|
||||
},
|
||||
|
||||
selectValue(value) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
if (this.allowHalf && this.pointerAtLeftHalf) {
|
||||
this.$emit('input', this.currentValue);
|
||||
} else {
|
||||
this.$emit('input', value);
|
||||
}
|
||||
},
|
||||
|
||||
setCurrentValue(value, event) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
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;
|
||||
},
|
||||
|
||||
resetCurrentValue() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
if (this.allowHalf) {
|
||||
this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
|
||||
}
|
||||
this.currentValue = this.value;
|
||||
this.hoverIndex = -1;
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
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>
|
||||
|
|
@ -190,8 +190,6 @@
|
|||
},
|
||||
|
||||
value(val) {
|
||||
this.$emit('input', val);
|
||||
this.$emit('change', val);
|
||||
if (this.valueChangeBySelected) {
|
||||
this.valueChangeBySelected = false;
|
||||
return;
|
||||
|
|
@ -486,6 +484,7 @@
|
|||
this.selected = {};
|
||||
this.selectedLabel = '';
|
||||
this.$emit('input', '');
|
||||
this.$emit('change', '');
|
||||
this.visible = false;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -39,9 +39,8 @@
|
|||
<glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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>
|
||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -1,9 +1,9 @@
|
|||
@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;
|
||||
|
|
|
|||
|
|
@ -34,3 +34,4 @@
|
|||
@import "./spinner.css";
|
||||
@import "./badge.css";
|
||||
@import "./card.css";
|
||||
@import "./rate.css";
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
border-radius: 4px;
|
||||
transition: var(--border-transition-base);
|
||||
outline: none;
|
||||
font-size: inherit;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
@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;
|
||||
transition: .3s;
|
||||
&.hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/index.js
11
src/index.js
|
|
@ -47,8 +47,9 @@ 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 Badge from '../packages/badge/index.js';
|
||||
import Card from '../packages/card/index.js';
|
||||
import Rate from '../packages/rate/index.js';
|
||||
import Badge from '../packages/badge/index.js';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
|
|
@ -99,8 +100,9 @@ const install = function(Vue) {
|
|||
Vue.component(Progress.name, Progress);
|
||||
Vue.component(Spinner.name, Spinner);
|
||||
Vue.component(Message.name, Message);
|
||||
Vue.component(Badge.name, Badge);
|
||||
Vue.component(Card.name, Card);
|
||||
Vue.component(Rate.name, Rate);
|
||||
Vue.component(Badge.name, Badge);
|
||||
|
||||
Vue.use(Loading);
|
||||
|
||||
|
|
@ -167,7 +169,8 @@ module.exports = {
|
|||
Upload,
|
||||
Progress,
|
||||
Spinner,
|
||||
Card,
|
||||
Rate,
|
||||
Message,
|
||||
Badge,
|
||||
Card
|
||||
Badge
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue