vue+bootstrap星级评分

最新推荐文章于 2024-11-24 14:32:49 发布

#free-fly

最新推荐文章于 2024-11-24 14:32:49 发布

阅读量955

点赞数

分类专栏：前端 vue 文章标签： vue 前端组合模式

本文链接：https://blog.youkuaiyun.com/weixin_42823014/article/details/124595132

版权

本文档将介绍如何利用Vue.js和Bootstrap来封装一个功能完善的星级评分组件。通过引入CSS样式，可以在Vue项目中轻松导入并应用此组件，简化前端开发过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装一个星级打分的组件

<template>
  <div>
    <div
      v-for="index in maxValue"
      :key="index"
      class="iconfont icon-star star-item star-placeholder"
    >
      <div
        class="iconfont icon-star star-item star-active"
        :style="{ width: getWidth(index), color: activeColor }"
      />
    </div>
    <span class="star-value">
      {
  { starValue }}
    </span>
  </div>
</template>

<script>
import '@/assets/css//icon-star.css'

export default {
  name: 'starLevel',
  props: {
    maxValue: {
      type: Number,
      default: 5
    },
    value: {
      type: Number,
      default: 4.5
    },
    activeColor: {
      type: String,
      default: '#ff7e28'
    }
  },
  computed: {
    starValue () {
      return this.value.toFixed(1)
    }
  },
  methods: {
    getW