带有所有 mdi 图标的 Vuetify 评级组件半星答案

【问题标题】：Vuetify Rating Component Half Stars with all mdi icons带有所有 mdi 图标的 Vuetify 评级组件半星
【发布时间】：2020-02-28 14:48:28
【问题描述】：

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

案例一：

使用星形 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'
     }),
    })

Cae 3：

如果我使用任何其他 mdi 图标，似乎没有半分版本，所以如果半分的话根本看不到星星。 Codepen

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

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

【问题讨论】：

标签： css vue.js vuetify.js rating-system material-design-icons

【解决方案1】：

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

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

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

如果没有提供这样的半完整图标变体，那么您将无法以所需的方式呈现它（例如您的复选标记示例），除非您更改组件绘制“半”图标的方式。一个非常通用的解决方案是渲染实体变体的左半部分和轮廓变体的右半部分。我能想到不同的方法：

使用两个具有一定定位和限制宽度的元素，
或者使用图标作为背景图片可能会更好
CSS clip-path 也是可能的，但浏览器对 SVG 的支持不同

如果是复选标记，它看起来有点奇怪（check 和 check-bold）。模拟：

【讨论】：