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) PropertyTypeDescriptionDefaultratingnumberA number between 0.0-5.0 that will determine the fullness of the 5-stars rating polygons1 属性 类型 描述 默认 评分 数 0.0-5.0之间的数字将确定5星评级多边形的充满度 1个 定制样式 (Customized Styling) PropertyTypeDescriptionDefaultfullStarColorstringSet the full or partially-full star color#ed8a19emptyStarColorstringSet the empty or partially-empty star color#737373starWidthnumberSet the star width20starHeightnumberSet the star height20 属性 类型 描述 默认 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 动态设置组件高度