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

* 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

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 | | disabled-void-icon | component of unselected read-only icons | ^[string] / ^[Component] | StarFilled |
| show-text | whether to display texts | ^[boolean] | false | | 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 | | 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'] | | texts | text array | ^[array]`string[]` | ['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise'] |
| score-template | score template | ^[string] | {value} | | score-template | score template | ^[string] | {value} |
| clearable ^(2.2.18) | whether value can be reset to `0` | ^[boolean] | false | | clearable ^(2.2.18) | whether value can be reset to `0` | ^[boolean] | false |

View File

@ -56,6 +56,18 @@ describe('Rate.vue', () => {
expect(text.textContent).toMatchInlineSnapshot('"4"') 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 () => { it('value change', async () => {
const wrapper = mount(Rate, { const wrapper = mount(Rate, {
props: { props: {

View File

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