test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 04:08:34 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(components): [rate] bind the textColor property (#14092)

Browse Source 
* fix(components): [rate] bind the textColor property

* add test case

* add test case

* Update rate.test.tsx

* Update rate.md
This commit is contained in:
zepeng 2023-08-28 21:51:18 +08:00 committed by GitHub
parent 68980b3c50
commit cea00f0dc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/en-US/component/rate.md
View File

@ -104,7 +104,7 @@ Use `css/scss` language to change the global or local color. We set some global
| disabled-void-icon | component of unselected read-only icons | ^[string] / ^[Component] | StarFilled |
| 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 |
| text-color | color of texts | ^[string] | '' |
| texts | text array | ^[array]`string[]` | ['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise'] |
| score-template | score template | ^[string] | {value} |
| clearable ^(2.2.18) | whether value can be reset to `0` | ^[boolean] | false |

12
packages/components/rate/__tests__/rate.test.tsx
View File

@ -56,6 +56,18 @@ describe('Rate.vue', () => {
expect(text.textContent).toMatchInlineSnapshot('"4"')
})
it('text color', () => {
const wrapper = mount(Rate, {
props: {
showText: true,
modelValue: 1,
textColor: 'red',
},
})
const text = wrapper.find('.el-rate__text').element as HTMLSpanElement
expect(text.style.color).toEqual('red')
})
it('value change', async () => {
const wrapper = mount(Rate, {
props: {

6
packages/components/rate/src/rate.vue
View File

@ -43,7 +43,11 @@
</el-icon>
</el-icon>
</span>
<span v-if="showText || showScore" :class="ns.e('text')">
<span
v-if="showText || showScore"
:class="ns.e('text')"
:style="{ color: textColor }"
>
{{ text }}
</span>
</div>