更新记录

1.0.0（2025-03-17） 下载此版本

发布初版

平台兼容性

Rate 评分

组件名: xt-rate

适配情况需自行尝试,开发时只测试了 H5、APP、微信小程序

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

vue2：在组件上直接使用@click.native.stop，如：<xt-icon @click.native.stop='click'></xt-icon>;

vue3：由于 vue3 没有native修饰符,所以不能直接在组件上使用.stop修饰符,只能嵌套一层view标签,在外层view上添加@click.stop阻止冒泡

基本用法

<template>
  <view class="xt">
    <view>
      <view>基础使用</view>
      <xt-rate v-model="rate"></xt-rate>
    </view>
    <view>
      <view>自定义图标(xt-icon内的)</view>
      <xt-rate
        v-model="rate"
        active-icon="xt-icon-shoucang1"
        inactive-icon="xt-icon-shoucang"
      ></xt-rate>
    </view>
    <view>
      <view>自定义颜色</view>
      <xt-rate
        v-model="rate"
        active-color="#1e90ff"
        inactive-color="#7bed9f"
      ></xt-rate>
    </view>
    <view>
      <view>选择半分</view>
      <xt-rate
        allowHalf
        active-icon="xt-icon-shoucang1"
        inactive-icon="xt-icon-shoucang"
      ></xt-rate>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rate: 2,
    };
  },
  methods: {},
};
</script>

<style lang="scss">
.xt {
  padding: 0 20rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}
</style>

API

Events