如何封装星星组件？

最新推荐文章于 2022-05-30 17:27:29 发布

lcj529

最新推荐文章于 2022-05-30 17:27:29 发布

阅读量121

点赞数 1

本文链接：https://blog.csdn.net/lcj529/article/details/108873905

版权

本文介绍了如何使用Vue.js封装一个星星评分组件，组件包含可点击和只读两种模式，支持父子组件双向数据绑定。组件内部通过v-for指令和条件渲染实现了满星、半星和空星的展示，并通过@input事件监听用户选择的星星数量，更新父组件的评分值。

摘要由CSDN通过智能技术生成

如何封装星星组件？

子组件

<template>
  <div class="lcjbox">
    <!-- 用于父子组件双向数据绑定 -->
    <input type="hidden" v-model="value" />
    <!-- 不可点击的星星 -->
    <div v-if="readonly">
      <!-- 满星 -->
      <img :src="full" v-for="i in parseInt(value)" :key="i" />
      <!-- 半星 -->
      <img :src="half" v-if="value.toString().indexOf('.') > 0" />
      <!-- 灰色星 -->
      <img
        :src="empty"
        v-for="i in parseInt(number - value)"
        :key="i * number + 1"
      />
    </div>
    <!-- 可以点击的星星 -->
    <div v-if="!readonly">
      <!-- 满星 -->
      <img :src="full" v-for="i in num" :key="i" @click="num = i" />
      <!-- 灰色星 -->
      <img
        :src="empty"
        v-for="i in parseInt(number - num)"
        :key="i * number"
        @click="num += i"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 分值
    value: {
      type: Number,
      default: 0
    },
    // 接收过来的数量
    number: {
      type: Number,
      default: 0
    },
    // 只读，表示可以点击还是不可以点击
    readonly: {
      type: Boolean,
      default: false
    }
  }, // 组件参数 接收来自父组件的数据
  data() {
    return {
      //模拟数据
      num: 0,
      // 满星
      full:
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1714150507,3894444964&fm=26&gp=0.jpg",
      // 没星
      empty:
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3012680728,849664980&fm=26&gp=0.jpg",
      // 半星
      half:
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3837197790,4152490133&fm=15&gp=0.jpg"
    };
  },
  created() {
    //创建后
  },
  components: {}, // 局部注册的组件
  mounted() {
    //加载后
  },
  watch: {
    num() {
      // 在可以点击的状态下，双向绑定的分值改变
      this.$emit("input", this.num);
    }
  }, // 负责监听
  computed: {}, // 计算属性
  methods: {
    //方法集合
  }
};
</script>

style样式

<style scoped lang="scss">
.lcjbox img{
  width: 24px;
  height: 24px;
  margin: 0 2px;
}
</style>

在使用的组件中直接调用

html

<template>
  <div>
    <span>评分</span>
    <!-- 可点击 -->
    <Star v-model="value" :number="10" @input="ipt"> </Star>
    <!-- 不可点击 -->
    <!-- <Star v-model="value" :number="10" readonly> </Star> -->
  </div>
</template>

<script>
import Star from "../components/Star";
export default {
  props: {}, // 组件参数 接收来自父组件的数据
  data() {
    return {
      //模拟数据
      value:4.5
    };
  },
  created() {
    //创建后
  },
  components: {
    Star
    }, // 局部注册的组件
  mounted() {
    //加载后
  },
  watch: {}, // 负责监听
  computed: {}, // 计算属性
  methods: {
    //方法集合
    // 点击过多少星，返回过来，这里可以请求后台接口
    ipt(num){
      console.log(num)
      console.log("点击了"+num+'颗星星')
    }
  }
};
</script>