# vue-set-star-rating

> rating

Latest version **1.0.0** (published 2021-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-set-star-rating
pnpm add vue-set-star-rating
yarn add vue-set-star-rating
bun add vue-set-star-rating
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-03-13 |
| First published | 2021-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | xy |
| Maintainers | ww545 |
| Keywords | vue, star, rating, star-rating, stars-rating |

## Links

- npm: https://www.npmjs.com/package/vue-set-star-rating
- Repository: https://github.com/xy-why/vue-set-star-rating
- Homepage: https://github.com/xy-why/vue-set-star-rating#vue-set-star-rating
- Issues: https://github.com/xy-why/vue-set-star-rating/issues
- npm.io page: https://npm.io/package/vue-set-star-rating

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-03-13

## README

# 安装使用 #

```
npm i vue-stars-rating -S  OR yarn vue-stars-rating
 
```

# 说明 #

>改自 原创 JonathanDn 的开源组件 


# 功能 #

>1、点击评分 Click score
>2、静态展示 Static display



| parmas |value | remarks |
|--|--|--|
|clickChange|Boolean| 默认 false, 是否可以点击；false为不可以点击 |
|config|Object|具体查看下面示例讲解|
|stroke|String|描边颜色，边框|
|itemclick|Fn|点击事件回调名称 @itemclick="itemclick"  该函数有三个参数（num=评分，i=star下标，event=原型）|



# 完整用法 #

```
 <template>  
    <div>
      <stars-rating clickChange  stroke="#ECB871" v-bind="config" @itemclick="itemclick"></stars-rating>  
    </div>
  </template>
```

```
 data() {
      return {
        config: {
          rating: 4.9,//设置评分
          isIndicatorActive: false,//是否显示测试数据到页面上
          starStyle: {
            fullStarColor: "#ECB871",//填充颜色
            emptyStarColor: "rgba(0,0,0,0)",//背景填充颜色
            starWidth: 100,//宽度
            starHeight: 100//高度
          }
        }
      };
 },

```

```
    methods: {
      itemclick(num) {       
        this.$set(this.config,"rating", num); 
      }
    },


```

---
_Source: https://npm.io/package/vue-set-star-rating · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._