VUE实现超简单的星星“显示、选择”组件

@font-face{字体系列：“iconfont”；src:url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALcAAsAAAAABogAAAKNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGVgCCcAqBCIERATYCJAMICwYABCAFhGcHMhvFBci+QDaGA61+ohmjWdUpRTi3djdG3vv+AydFVwwi+NoP3Xd3AQDFIBMXDWjjomJJRrYKAHVlJ7a6QkUXbf2//7U2h1mHNAnaykXU02lemf9XdHawZqFapfEojUazRCPehY40QHws1yy4q+8HVWZx/WBKLK7PSs3l5Ym0eW581PWGkt85n+dyfAvogNYHsbtrbRprc9Q7oPJAOtDmtrEIe5En3jB2wQu8RKDRklUDm7vHLZg5dSSDOUPs3iBrjNNQOzDGo4oCC/VCbcPKIv5Dup0C7kSfj3/qMUZSk9ktOyc7Pry84IzJl9Wl5RuXy4WBrZExBxTioDG7ZVAwdlBjdsgIOFZj8FNVBR5xVKdgf51d3wyGYS74yZMftZDgsQaaAtYmtRBTte963PSzq+7WbZR++rG3cy+5z8/7ug/25y+g4Qk+6Mun4R/12ePXZ5/6/npxvuf7/kj6LfYsJntdN/3Irfrfx5TpT9GwDlCVHzMCwVs+PGb9sckCbrpfR+GqAsP81O/cG/wks4EdxVBsdyqa1NidTJ3c0OgkqNjBTt9TbV13VAz1uib46wxlyOqNEIWZQY0mK6hVbwONZu2sb9KlMChKAybcAIR2z0hafUPW7pUozBdq9OqjVrt/NDqKlt2aTIS3xeQI+eheYOjlmXKtEmltkD5JHK5LdYirECbQNqxyYY8y4jnmVKe6LqJQcZ7iLj2PkiTHgvOIPDECkWLRNFXTWwwvT2ELIw5BfMh1AYU8uYwK1KX4fQ1EO5Fw8ECik2WVEGpHNoM1gNgzZYPaHmSfyimtTggFKQzyKbTLh5FEIoeK5mER4hGGYEK6sMh01NRQk7G9Jf21fdDItqdwKrP6yzDTnhMAAAAA")格式（“woff2”）；}.iconfont{字体系列：“iconfont”！重要；字体大小：16px；字体样式：正常；-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing:灰度;}.icon-star:before{content:"\e627";}.star-item{display:inline-block;font-size:40px;}.star-placeholder{position:relative;}.star-active{position:absolute;顶部：0；左：0；红色;overflow:hidden;}星星显示应该是一个很常见的需求，在项目中正好遇到。所以把实现过程分享一下，方便以后复用1.需求分析先看一个常用的星级显示UI分析组件需要的参数属性含义默认值类型value当前星级4.5NumbermaxValue总星级5NumberactiveColor星级颜色#ff7e28String初看在“当前星级”参数下，考虑小数点。因此，不能使用半星、全星等简单的方法。图中的4.3表示前4颗星全部显示，最后一颗是宽度的0.3。所以我们建立父子关系，这样高亮部分的宽度就可以显示为父元素宽度的百分比。为了控制“星星颜色”，推荐使用svg或者font-icon（也可以用图片，多加两个参数传activeImage，placeholderImage就行）2.准备图标，先找一个星星图标。我在iconfont上找到了它。过程我就不重复了，直接贴代码/*icon-star.css*/@font-face{font-family:"iconfont";src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALcAAsAAAAABogAAAKNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGVgCCcAqBCIERATYCJAMICwYABCAFhGcHMhvFBci+QDaGA61+ohmjWdUpRTi3djdG3vv+AydFVwwi+NoP3Xd3AQDFIBMXDWjjomJJRrYKAHVlJ7a6QkUXbf2//7U2h1mHNAnaykXU02lemf9XdHawZqFapfEojUazRCPehY40QHws1yy4q+8HVWZx/WBKLK7PSs3l5Ym0eW581PWGkt85n+dyfAvogNYHsbtrbRprc9Q7oPJAOtDmtrEIe5En3jB2wQu8RKDRklUDm7vHLZg5dSSDOUPs3iBrjNNQOzDGo4oCC/VCbcPKIv5Dup0C7kSfj3/qMUZSk9ktOyc7Pry84IzJl9Wl5RuXy4WBrZExBxTioDG7ZVAwdlBjdsgIOFZj8FNVBR5xVKdgf51d3wyGYS74yZMftZDgsQaaAtYmtRBTte963PSzq+7WbZR++rG3cy+5z8/7ug/25y+g4Qk+6Mun4R/12ePXZ5/6/npxvuf7/kj6LfYsJntdN/3Irfrfx5TpT9GwDlCVHzMCwVs+PGb9sckCbrpfR+GqAsP81O/cG/wks4EdxVBsdyqa1NidTJ3c0OgkqNjBTt9TbV13VAz1uib46wxlyOqNEIWZQY0mK6hVbwONZu2sb9KlMChKAybcAIR2z0hafUPW7pUozBdq9OqjVrt/NDqKlt2aTIS3xeQI+eheYOjlmXKtEmltkD5JHK5LdYirECbQNqxyYY8y4jnmVKe6LqJQcZ7iLj2PkiTHgvOIPDECkWLRNFXTWwwvT2ELIw5BfMh1AYU8uYwK1KX4fQ1EO5Fw8ECik2WVEGpHNoM1gNgzZYPaHmSfyimtTggFKQzyKbTLh5FEIoeK5mER4hGGYEK6sMh01NRQk7G9Jf21fdDItqdwKrP6yzDTnhMAAAAA')format('woff2')}.iconfont{font-family:"iconfont"!important;字体大小：16px；字体样式：正常；-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing:grayscale;}.icon-star:before{content:"\e627";}创建一个新的icon-star.css文件并将代码粘贴进去vue文件引入后，在任意标签中添加两个属性，显示我们需要的“星星”。3.写代码先实现一个可以显示指定宽度的星形@font-face{字体系列：“iconfont”；src:url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALcAAsAAAAABogAAAKNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGVgCCcAqBCIERATYCJAMICwYABCAFhGcHMhvFBci+QDaGA61+ohmjWdUpRTi3djdG3vv+AydFVwwi+NoP3Xd3AQDFIBMXDWjjomJJRrYKAHVlJ7a6QkUXbf2//7U2h1mHNAnaykXU02lemf9XdHawZqFapfEojUazRCPehY40QHws1yy4q+8HVWZx/WBKLK7PSs3l5Ym0eW581PWGkt85n+dyfAvogNYHsbtrbRprc9Q7oPJAOtDmtrEIe5En3jB2wQu8RKDRklUDm7vHLZg5dSSDOUPs3iBrjNNQOzDGo4oCC/VCbcPKIv5Dup0C7kSfj3/qMUZSk9ktOyc7Pry84IzJl9Wl5RuXy4WBrZExBxTioDG7ZVAwdlBjdsgIOFZj8FNVBR5xVKdgf51d3wyGYS74yZMftZDgsQaaAtYmtRBTte963PSzq+7WbZR++rG3cy+5z8/7ug/25y+g4Qk+6Mun4R/12ePXZ5/6/npxvuf7/kj6LfYsJntdN/3Irfrfx5TpT9GwDlCVHzMCwVs+PGb9sckCbrpfR+GqAsP81O/cG/wks4EdxVBsdyqa1NidTJ3c0OgkqNjBTt9TbV13VAz1uib46wxlyOqNEIWZQY0mK6hVbwONZu2sb9KlMChKAybcAIR2z0hafUPW7pUozBdq9OqjVrt/NDqKlt2aTIS3xeQI+eheYOjlmXKtEmltkD5JHK5LdYirECbQNqxyYY8y4jnmVKe6LqJQcZ7iLj2PkiTHgvOIPDECkWLRNFXTWwwvT2ELIw5BfMh1AYU8uYwK1KX4fQ1EO5Fw8ECik2WVEGpHNoM1gNgzZYPaHmSfyimtTggFKQzyKbTLh5FEIoeK5mER4hGGYEK6sMh01NRQk7G9Jf21fdDItqdwKrP6yzDTnhMAAAAA")格式（“woff2”）；}.iconfont{字体系列：“iconfont”！重要；字体大小：16px；字体样式：正常；-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing:灰度;}.icon-star:before{content:"\e627";}.star-item{display:inline-block;font-size:40px;}.star-placeholder{position:relative;}.star-active{position:absolute;顶部：0；左：0；红色;overflow:hidden;}再添加一个循环，计算每个star-item的显示宽度最终代码如下：.star-item{display:inline-block;font-size:40px;}.star-placeholder{position:relative;颜色：#e9e9e9;}.star-active{位置：绝对;顶部：0；左：0；overflow:hidden;}.star-value{字体大小:40px;margin-left:10px;}4.效果展示5.选择星级既然已经做了展示，那何不稍微改动一下，做一个选择星级的组件思路就是判断鼠标在当前星级的位置，结合星级的数量计算值.star-item{display:inline-block;font-size:40px;}.star-placeholder{cursor:pointer;位置：相对；颜色：#e9e9e9;}.star-active{位置：绝对;顶部：0；左：0；overflow:hidden;}.star-value{字体大小:40px;margin-left:10px;}附件：CodeSandBox代码示例：https://codesandbox.io/s/star...