具有所有mdi图标的半星级组件

Question

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

案例1：

使用星型mdi图标可以很好地工作，如心脏截图和代码页中所示。

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

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

​

Caes 2：

有了心脏图标，它显示了一半的心，但没有轮廓周围空的一半，见屏幕截图科德芬。

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

​

Cae 3：

如果我使用任何其他mdi图标，似乎没有半个版本，所以没有看到任何明星，如果一半评级。科德芬

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

​

​

我如何编码该组件将收到任何mdi图标，并将呈现评级视图类似于案例1。与半星的右侧空部分勾勒，并支持图标，没有“一半”版本？

Answer 1

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

​

​

在第二行中，两个图标名都以-half结尾，但是star-half和heart-half非常不同。星星的左半部分被填满，而另一半则被勾画出来，而心脏实际上只是坚实的左半部分。

这里需要使用的心脏图标是heart-half-full。

如果没有提供图标的半完整变体，那么您就无法以所需的方式呈现它(就像您的复选框示例)，除非您更改了组件绘制“一半”图标的方式。一个相当通用的解决方案是呈现实体变体的左半部分，以及所述变体的右半部分。我能想到不同的方法：

• 使用两个具有一定位置和限制宽度的元素，
• 或者更好地使用图标作为背景图像
• CSS剪辑路径也是可能的，但在浏览器中对SVG的支持是不同的。

但是，如果使用复选标记，它看起来会有点奇怪(对于check和check-bold都是如此)。模拟：

​

​