为VUE开发人员提供的超简单星级展示和选择组件指南

前端

2024-01-19 10:54:29

VUE 实现超简单星级「展示、选择」组件

对于一个前端开发人员来说，组件化开发早已司空见惯，这也让我们养成了很多优秀的编码习惯。比如组件的封装、组件的解耦、组件的复用等等。组件化开发帮助我们提高了开发效率，也使得代码更易维护。

今天，我们来实现一个简单的星级组件，主要分为展示和选择两种模式。

一、需求分析

首先，我们来看一下这个组件的界面设计稿：

[图片]

分析一下组件需要的参数：

属性	含义	默认值	类型
value	当前分数	0	number
max	最大分数	5	number
readonly	是否可选择	false	boolean
size	星星大小	20px	string
color	星星颜色	#ff0000	string

二、组件实现

首先，我们先来创建组件的模板文件，代码如下：

<template>
  <div class="star-container">
    <span v-for="n in max" :key="n" class="star-item" :class="{ 'active': n <= value }" @click="handleClick(n)">
      <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 18l-6-5.714L7.05 8.286 2 12l5.05-3.714L10 18zm-7-5.714L4.95 12 0 15.714l6 4.286L10 18l5.05-3.714L17 12l-2.95-2.286z" fill="currentColor" />
      </svg>
    </span>
  </div>
</template>

在这个模板文件中，我们使用了 v-for 循环来生成星星，并使用 v-bind:class 来控制星星的样式。当 n 小于或等于 value 时，星星会被激活（active 类）。我们还为每个星星添加了点击事件监听器，以便在用户点击时触发 handleClick 方法。

接下来，我们来编写组件的脚本文件，代码如下：

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 5
    },
    readonly: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: '20px'
    },
    color: {
      type: String,
      default: '#ff0000'
    }
  },
  methods: {
    handleClick(n) {
      if (this.readonly) return;
      this.$emit('input', n);
    }
  }
};
</script>

在这个脚本文件中，我们定义了组件的属性和方法。其中，value 属性表示当前分数，max 属性表示最大分数，readonly 属性表示是否可选择，size 属性表示星星的大小，color 属性表示星星的颜色。handleClick 方法在用户点击星星时触发，它将星星的索引作为参数传递给父组件。

最后，我们来编写组件的样式文件，代码如下：

<style scoped>
.star-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.star-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  cursor: pointer;
}

.star-item svg {
  width: 100%;
  height: 100%;
  fill: #ccc;
}

.star-item.active svg {
  fill: #ff0000;
}
</style>

在这个样式文件中，我们定义了组件的样式。其中，.star-container 类定义了容器的样式，.star-item 类定义了星星的样式，.star-item.active 类定义了激活星星的样式。

三、组件使用

现在，我们就可以在 Vue 项目中使用这个组件了，代码如下：

<template>
  <div>
    <star-rating v-model="value" max="5" size="30px" color="#ff6600"></star-rating>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 3
    };
  }
};
</script>