Css Vuetify分级组件半星型，带有所有mdi图标

我正在设置一个评级组件，希望能够传递一个mdi图标，例如“星”，该图标将填充空/半/满图标道具

案例1：

有了星型mdi图标，这就很好地工作了，如heart屏幕截图和中所示

半颗星正确显示，半空部分在空部分周围有一个轮廓

new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        rating: 3.5,
        emptyIcon: 'mdi-star-outline',
        fullIcon: 'mdi-star',
        halfIcon: 'mdi-star-half'
      }),
    })

Caes 2：

有了心形图标，它显示了半个心形，但在屏幕截图中看到的空半部分周围没有轮廓

Cae 3：

若我使用任何其他mdi图标，似乎并没有半版本，所以并没有星看到，若一半评级

---

我如何编码该组件将接收任何mdi图标，并将呈现评级视图，如案例1所示。右空部分的半星型轮廓，并且支持没有“半”版本的图标？

如果查看图标，问题会立即显现出来：

在第二行，两个图标名称都以

-half

结尾，但是

星型half

和

心型half

非常不同。星星的左半部分是填充的，另一半是轮廓，而心脏实际上只是实心的左半部分

您需要在此处使用的心脏图标是

心脏半满

如果未提供此类半满图标变体，则无法以所需方式渲染它（如复选标记示例），除非更改组件绘制“半”图标的方式。一个非常通用的解决方案是渲染实体变体的左半部分，以及轮廓变体的右半部分。我可以想出不同的方法：

• 使用两个具有一定定位和限制宽度的元素
• 或者最好使用图标作为背景图像
• 也可以，但浏览器对SVG的支持各不相同

但是，如果使用复选标记，它看起来会有点奇怪（对于

check

和

check bold

）。模拟：

---

如果查看图标，问题会立即显现出来：

在第二行，两个图标名称都以

-half

结尾，但是

星型half

和

心型half

非常不同。星星的左半部分是填充的，另一半是轮廓，而心脏实际上只是实心的左半部分

您需要在此处使用的心脏图标是

心脏半满

如果未提供此类半满图标变体，则无法以所需方式渲染它（如复选标记示例），除非更改组件绘制“半”图标的方式。一个非常通用的解决方案是渲染实体变体的左半部分，以及轮廓变体的右半部分。我可以想出不同的方法：

• 使用两个具有一定定位和限制宽度的元素
• 或者最好使用图标作为背景图像
• 也可以，但浏览器对SVG的支持各不相同

但是，如果使用复选标记，它看起来会有点奇怪（对于

check

和

check bold

）。模拟：

new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        rating: 3.5,
        emptyIcon: 'mdi-heart-outline',
        fullIcon: 'mdi-heart',
        halfIcon: 'mdi-heart-half'
     }),
    })

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    rating: 3.5,
    emptyIcon: 'mdi-check-outline',
      fullIcon: 'mdi-check',
      halfIcon: 'mdi-check-half'
  }),
})