From 79edabff2fa08f44dd3b251af9a41e311a7426d6 Mon Sep 17 00:00:00 2001 From: BeADre Date: Sat, 16 Apr 2022 00:54:58 +0800 Subject: [PATCH] fix(rate): fix rate style --- packages/varlet-ui/src/rate/Rate.vue | 2 +- .../__snapshots__/index.spec.js.snap | 20 +++++++++---------- packages/varlet-ui/src/rate/docs/en-US.md | 4 ++-- packages/varlet-ui/src/rate/docs/zh-CN.md | 4 ++-- packages/varlet-ui/src/rate/example/index.vue | 2 +- packages/varlet-ui/src/rate/rate.less | 14 +++++++------ 6 files changed, 24 insertions(+), 22 deletions(-) diff --git a/packages/varlet-ui/src/rate/Rate.vue b/packages/varlet-ui/src/rate/Rate.vue index 061bd55d9a7..ee26b283fec 100644 --- a/packages/varlet-ui/src/rate/Rate.vue +++ b/packages/varlet-ui/src/rate/Rate.vue @@ -64,7 +64,7 @@ export default defineComponent({ return { [n('content')]: true, - [n('--disabled')]: form?.disabled.value, + [n('--disabled')]: form?.disabled.value || props.disabled, [n('--error')]: errorMessage.value, [n('--primary')]: type !== 'empty' && !color, } diff --git a/packages/varlet-ui/src/rate/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/rate/__tests__/__snapshots__/index.spec.js.snap index 15fd16e0edb..363d55da3e4 100644 --- a/packages/varlet-ui/src/rate/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-ui/src/rate/__tests__/__snapshots__/index.spec.js.snap @@ -23,11 +23,11 @@ exports[`test rate count 1`] = ` exports[`test rate disabled & readonly 1`] = ` "
-
-
-
-
-
+
+
+
+
+
@@ -274,11 +274,11 @@ exports[`test rate example 1`] = `
禁用评分
-
-
-
-
-
+
+
+
+
+
diff --git a/packages/varlet-ui/src/rate/docs/en-US.md b/packages/varlet-ui/src/rate/docs/en-US.md index 46e27927170..7f52d3e0a65 100644 --- a/packages/varlet-ui/src/rate/docs/en-US.md +++ b/packages/varlet-ui/src/rate/docs/en-US.md @@ -106,7 +106,7 @@ export default { The `disabled` attribute is used to set the rating to the status of no clicking, and the `disabled-color` is used to set the color of the icon when it is disabled. ```html - + ``` ### Read only rating @@ -180,7 +180,7 @@ Other values are converted to text as a user prompt. | `half-icon` | The half-selected icon style only works if `half` is `true` | _string_ | `star-half-full` | | `namespace` | Icon namespace, extensible custom icon library | _string_ | `var-icon` | | `disabled` | Whether or not rating is prohibited | _boolean_ | `false` | -| `disabled-color` | The color of the icon when disabling grading is only effective when `disabled` is `true` and has higher priority than `color` and `empty-color` | _string_ | `#bdbdbd` | +| `disabled-color` | The color of the icon when disabling grading is only effective when `disabled` is `true` and has higher priority than `color` and `empty-color` | _string_ | `#aaa` | | `readonly` | Whether to use rating read-only | _boolean_ | `false` | | `ripple` | Whether to use water ripple | _boolean_ | `true` | | `rules` | The validation rules，Returns `true` to indicate that the validation passed,The remaining values are converted to text as user prompts | _Array<(v: string \| number) => any>_ | `-` | diff --git a/packages/varlet-ui/src/rate/docs/zh-CN.md b/packages/varlet-ui/src/rate/docs/zh-CN.md index 2d4076def47..70891b97ab3 100644 --- a/packages/varlet-ui/src/rate/docs/zh-CN.md +++ b/packages/varlet-ui/src/rate/docs/zh-CN.md @@ -106,7 +106,7 @@ export default { 通过 `disabled` 属性将评分设置为禁止点击状态，`disabled-color` 设置禁用时图标的颜色。 ```html - + ``` ### 只读评分 @@ -180,7 +180,7 @@ export default { | `half-icon` | 半选时图标的样式，只有在 `half` 为 `true` 时才有效| _string_ | `star-half-full` | | `namespace` | 图标的命名空间, 可扩展自定义图标库 | _string_ | `var-icon` | | `disabled` | 是否禁止评分 | _boolean_ | `false`| -| `disabled-color` | 禁止评分时图标的颜色，只有在 `disabled` 为 `true` 时才有效，优先级高于 `color`、`empty-color`| _string_ | `-` | +| `disabled-color` | 禁止评分时图标的颜色，只有在 `disabled` 为 `true` 时才有效，优先级高于 `color`、`empty-color`| _string_ | `#aaa` | | `readonly` | 是否使用评分只读 | _boolean_ | `false` | | `ripple` | 是否使用水波纹 | _boolean_ | `true` | | `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(v: string \| number) => any>_ | `-` | diff --git a/packages/varlet-ui/src/rate/example/index.vue b/packages/varlet-ui/src/rate/example/index.vue index 7315a4f1589..abc459ce33f 100644 --- a/packages/varlet-ui/src/rate/example/index.vue +++ b/packages/varlet-ui/src/rate/example/index.vue @@ -39,7 +39,7 @@ > {{ pack.disableTheRating }} - + {{ pack.readonlyRating }} diff --git a/packages/varlet-ui/src/rate/rate.less b/packages/varlet-ui/src/rate/rate.less index 6f4140b862e..5c715301990 100644 --- a/packages/varlet-ui/src/rate/rate.less +++ b/packages/varlet-ui/src/rate/rate.less @@ -18,18 +18,20 @@ padding: var(--rate-action-padding); box-sizing: unset; cursor: pointer; + display: flex; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - &--disabled { - color: var(--rate-disabled-color) !important; + &--primary { + color: var(--rate-primary-color); } - &--error { - color: var(--rate-error-color) !important; + &--disabled { + color: var(--rate-disabled-color); + cursor: not-allowed; } - &--primary { - color: var(--rate-primary-color); + &--error { + color: var(--rate-error-color); } }