css - 带有所有 mdi 图标的 Vuetify 评级组件半星

Question

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

情况1：

使用星形 mdi 图标可以很好地工作，如 heart screenshot 和codepan 所示 。

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

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

凯斯 2：

带有心形图标，它显示半个心形，但空的一半周围没有轮廓，如屏幕截图 Codepen 所示

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

凯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）。模拟：