vue 动态设置组件高度_高度动态的Vue明星评分组件

vue 动态设置组件高度

虚拟动态星级 (vue-dynamic-star-rating)

A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play)

高度可定制，易于使用的优雅星级评定组件(类似于Google Play)

View Demo 查看演示 Download Source 下载源

用法 (Usage)

Install via NPM npm i vue-dynamic-star-rating

通过NPM npm i vue-dynamic-star-rating

Then require in your project:

然后在您的项目中要求：

var StarRating = require('vue-dynamic-star-rating');

or ES6 syntax:

或ES6语法：

import StarRating from 'vue-dynamic-star-rating'

Then you can register the component globally:

然后，您可以全局注册该组件：

Vue.component('star-rating', StarRating);

Or in your Vue component:

或在您的Vue组件中：

components: {
  StarRating
}

You can then use the following selector anywhere in your project:

然后，您可以在项目中的任何地方使用以下选择器：

• To get up and running quick the package now supports rendering just the selector with default values

  为了快速启动和运行，该软件包现在支持仅渲染具有默认值的选择器

<star-rating></star-rating>

文件 (Docs)

config: {...} is a configuration object that is to be binded to vue-star-rating, api properties are:

config: {...}是要绑定到vue-star-rating的配置对象，api属性为：

基本 (Basics)

Property	Type	Description	Default
rating	number	A number between 0.0-5.0 that will determine the fullness of the 5-stars rating polygons	1

属性	类型	描述	默认
评分	数	0.0-5.0之间的数字将确定5星评级多边形的充满度	1个

定制样式 (Customized Styling)

Property	Type	Description	Default
fullStarColor	string	Set the full or partially-full star color	#ed8a19
emptyStarColor	string	Set the empty or partially-empty star color	#737373
starWidth	number	Set the star width	20
starHeight	number	Set the star height	20

属性	类型	描述	默认
fullStarColor	串	设置全彩或部分全彩	#ed8a19
空的StarColor	串	设置空或部分空的星形颜色	#737373
starWidth	数	设置星宽	20
starHeight	数	设置星星高度	20

实施实例 (Implementation Example)

Define your config options object in the component importing StarRating e.g

在导入StarRating的组件中定义您的配置选项对象，例如

data: function() {
    return {
        config: {
            rating: 4.7,
            style: {
                fullStarColor: '#ed8a19',
                emptyStarColor: '#737373',
                starWidth: 30,
                starHeight: 30
            }
        }
    }
}

And bind it to the selector like so

然后像这样将其绑定到选择器

<star-rating :config="config"></star-rating>

翻译自: https://vuejsexamples.com/a-highly-dynamic-vue-stars-rating-component/

vue 动态设置组件高度