mirror of https://github.com/ElemeFE/element
Rate: add show-score, fix change event timing
Leopoldthecoder
杨奕
parent
22ab137963
commit
77ddecea25
|
|
@ -128,15 +128,15 @@ You can use different icons to distinguish different rate components.
|
|||
|
||||
Read-only Rate is for displaying rating score. Half star is supported.
|
||||
|
||||
:::demo Use attribute `disabled` to make the component read-only. Add `show-text` to display the rating score at the right side. Additionally, you can use attribute `text-template` to provide a text template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
|
||||
:::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
|
||||
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value5"
|
||||
disabled
|
||||
show-text
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
text-template="{value} points">
|
||||
score-template="{value} points">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
|
|
@ -166,9 +166,10 @@ Read-only Rate is for displaying rating score. Half star is supported.
|
|||
| void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
|
||||
| disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
|
||||
| show-text | whether to display texts | boolean | — | false |
|
||||
| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false |
|
||||
| text-color | color of texts | string | — | #1F2D3D |
|
||||
| texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
|
||||
| text-template | text template when the component is read-only | string | — | {value} |
|
||||
| score-template | score template | string | — | {value} |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|
|
|
|||
|
|
@ -123,14 +123,14 @@
|
|||
|
||||
只读的评分用来展示分数，允许出现半星
|
||||
|
||||
:::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-text`，则会在右侧显示目前的分值。可以提供 `text-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
|
||||
:::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-score`，则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value5"
|
||||
disabled
|
||||
show-text
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
text-template="{value}">
|
||||
score-template="{value}">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
|
|
@ -159,10 +159,11 @@
|
|||
| 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 |
|
||||
| show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false |
|
||||
| show-score | 是否显示当前分数，show-score 和 show-text 不能同时为真 | boolean | — | false |
|
||||
| text-color | 辅助文字的颜色 | string | — | #1F2D3D |
|
||||
| texts | 辅助文字数组 | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
|
||||
| text-template | 只读时的辅助文字模板 | string | — | {value} |
|
||||
| score-template | 分数显示模板 | string | — | {value} |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</i>
|
||||
</i>
|
||||
</span>
|
||||
<span v-if="showText" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
|
||||
<span v-if="showText || showScore" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -96,6 +96,10 @@
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showScore: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#1f2d3d'
|
||||
|
|
@ -106,7 +110,7 @@
|
|||
return ['极差', '失望', '一般', '满意', '惊喜'];
|
||||
}
|
||||
},
|
||||
textTemplate: {
|
||||
scoreTemplate: {
|
||||
type: String,
|
||||
default: '{value}'
|
||||
}
|
||||
|
|
@ -115,9 +119,11 @@
|
|||
computed: {
|
||||
text() {
|
||||
let result = '';
|
||||
if (this.disabled) {
|
||||
result = this.textTemplate.replace(/\{\s*value\s*\}/, this.value);
|
||||
} else {
|
||||
if (this.showScore) {
|
||||
result = this.scoreTemplate.replace(/\{\s*value\s*\}/, this.disabled
|
||||
? this.value
|
||||
: this.currentValue);
|
||||
} else if (this.showText) {
|
||||
result = this.texts[Math.ceil(this.currentValue) - 1];
|
||||
}
|
||||
return result;
|
||||
|
|
@ -176,7 +182,6 @@
|
|||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.$emit('change', val);
|
||||
this.currentValue = val;
|
||||
this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
|
||||
}
|
||||
|
|
@ -218,8 +223,10 @@
|
|||
}
|
||||
if (this.allowHalf && this.pointerAtLeftHalf) {
|
||||
this.$emit('input', this.currentValue);
|
||||
this.$emit('change', this.currentValue);
|
||||
} else {
|
||||
this.$emit('input', value);
|
||||
this.$emit('change', value);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue