欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小组件1.星星评论组件

程序员文章站 2022-03-04 10:44:44
...

一.使用vue.js+element-ui写星星评论组件

当vue.js与element-ui相附使用时,element-ui的icon图标中有星星图案的图标,使用起来比较方便,不需要再使用css写星星的形状。
效果图:
小组件1.星星评论组件

代码如下:

<template>
  <div class="score">
    <i v-for="i in 5" :key="i" class="el-icon-star-on" :style="{color:i < val ? '#f2c304' : '#cbc9ca'}"></i>
  </div>
</template>

<script>

  export default {
    name:'',
    data () {
      return {
          val:3
      };
    },
    components: {},
    mounted() {},
    methods: {},
    watch: {}
  }
</script>
<style lang='scss' scoped>
    .score{
        border:1px solid red;
        width:110px;
        height:30px;
        font-size: 20px;
    }
</style>