https://github.com/sinanmtl/vue-rate

Rate component for Vue
https://github.com/sinanmtl/vue-rate

component javascript vue vue-components vuejs

Last synced: 1 day ago
JSON representation

Rate component for Vue

• Host: GitHub
• URL: https://github.com/sinanmtl/vue-rate
• Owner: SinanMtl
• License: mit
• Created: 2017-05-05T12:31:42.000Z (over 7 years ago)
• Default Branch: next
• Last Pushed: 2022-05-16T11:13:24.000Z (over 2 years ago)
• Last Synced: 2024-11-03T00:32:53.688Z (12 days ago)
• Topics: component, javascript, vue, vue-components, vuejs
• Language: Vue
• Homepage: https://sinanmtl.github.io/vue-rate/
• Size: 1.19 MB
• Stars: 222
• Watchers: 6
• Forks: 26
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Rate

[![npm version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&r=r&type=6e&v=3.0.0&x2=0)](https://www.npmjs.com/package/vue-rate/v/3.0.0)

[![npm](https://img.shields.io/npm/dt/vue-rate.svg)](https://www.npmjs.com/package/vue-rate/v/3.0.0)

> Rate component for Vue - [Demo](https://sinanmtl.github.io/vue-rate/).

> Note: This version for Vue 3. If you want to use for Vue 2.x,  please [see](https://github.com/SinanMtl/vue-rate/tree/master).

## Installation and usage

Once, install rate component for your project

```bash

npm install vue-rate@next --save

// or yarn add vue-rate@next

```

Import Vue Rate into your app

```javascript

import { createApp } from 'vue'

import rate from 'vue-rate'

import 'vue-rate/dist/vue-rate.css'

createApp(App)

  .use(rate)

  .mount('#app')

```

Use HTML template

```html

```

## Options from props

- `length {number}`: Star size

```html

```

- `value {number}`: Default value

```html

```

- `showcount {boolean}`: Shows rate number when mouseover the star.

```html

```

- `ratedesc {object}`: Rate star description array. 

```html

```

- `disabled {boolean}`: Disable rate.

```html

```

- `readonly {boolean}`: Read-only rate.

```html

```

- `iconref {string}`: ID of symbol icon

Insert symbol icon into your codebase

```html

  

````

Then add Rate component. `iconref` must be symbol's id

```html

```

- `slot`: Custom icon via slot

You can directly use custom icon via default slot

```html

  

    

  

```

Add some flavour

```css

.RateCustom.viaSlot .icon {

  width: 25px;

  height: 25px;

}

.Rate.viaSlot .Rate__star.filled{color: #813d1a;}

.Rate.viaSlot .Rate__star.hover{color: #E67136;}

```

- `v-model`

```javascript

export default {

  data: {

    return () { myRate: 0 }

  }

}

```

or `setup()` in Option API

```javascript

import { ref } from 'vue';

export default {

  setup () {

    const myRate = ref(0);

    return { myRate }

  }

}

```

or Composition API with ``

```javascript

<script setup>

  import { ref } from 'vue';

  const myRate = ref(0);

<script>

```

And bind to component

```html

<rate :length="5" v-model="myRate" />

```

## Events

```javascript

<script setup>

function onBeforeRate (rate) {

  alert(rate)

}

function onAfterRate (rate) {

  alert(rate)

}

```

```html

```

## Development

1. Fork the project

2. Install all dependencies

3. Make your changes on `src/Rate.vue`

4. Build the package

```bash

npm run build

# or yarn build

```

5. Commit and create PR

## License

MIT.