灵活的VueJS输入控件可进行评级

最新推荐文章于 2024-09-04 07:06:46 发布

cuk5340

最新推荐文章于 2024-09-04 07:06:46 发布

阅读量242

点赞数

文章标签：字符串 java javascript html css ViewUI

原文链接：https://vuejsexamples.com/flexible-vuejs-input-control-for-ratings/

版权

电视明星 (vue-stars)

Flexible VueJS input control for ratings (stars, etc.)

灵活的VueJS输入控件，用于收视率(星级等)

View demo 查看演示 Download Source 下载源

物产 (Properties)

The following properties are supported:

支持以下属性：

名称 (name)

Name of the underlying form fields. The default is rating. This must be unique on your page, otherwise browsers will apply changes to one rating to others with the same name. This means if you have more than one <vue-stars> control on your page, this property is required.

基础表单字段的名称。默认值为Rating 。这在您的页面上必须是唯一的 ，否则浏览器会将对一个等级的更改应用于其他具有相同名称的等级。这意味着，如果页面上有多个<vue-stars>控件，则此属性是必需的。

只读 (readonly)

Like native input controls, if this is set, the user cannot make changes to the value, but the control will still submit a value if it is part of a form. Hover animations are also disabled.

与本机输入控件一样，如果设置了此选项，则用户无法更改值，但如果控件是表单的一部分，则控件仍将提交值。悬停动画也被禁用。

值 (value)

The integer value of the current rating, from 0 (no set value) to max. Since this is a number, be sure to use the v-bind syntax this attribute (e.g., :value="3" rather than value="3"). If not specified, the default value is 0.

当前额定值的整数值，从0(无设置值)到max 。由于这是一个数字， 因此请确保使用v-bind语法将此属性( 例如 :value="3"而不是value="3" )使用。如果未指定，则默认值为0 。

最高 (max)

The integer maximum rating (e.g., number of stars or other character the user can choose from). Since this is a number, be sure to use the v-bind syntax this attribute (e.g., :max="3" rather than max="3"). If not specified, the default is 5.

整数最大额定值( 例如，星号或用户可以选择的其他字符)。由于这是一个数字， 因此请确保使用v-bind语法将此属性( 例如 :max="3"而不是max="3" )使用。如果未指定，则默认值为5 。

烧焦 (char)

This is the character to use for each rating. The default is the Unicode star (★).

这是用于每个等级的字符。默认值为Unicode星号( ★ )。

If you would like to use a different character for each value from 1-max, you can provide a multi-character string. For example, a letter grade control could use :max="5" char="FDCBA", making the first rating value an F, the second a D, etc.

如果您要为1- max每个值使用不同的字符，则可以提供多字符字符串。例如，一个字母等级控件可以使用:max="5" char="FDCBA" ，使第一个等级的值为F ，第二个等级的值为D ， :max="5" char="FDCBA" 。

If max is longer than the string provided, the last character in char is used for all additional values. For example, :max="5" char="!★" would result in a rating control like this: !★★★★.

如果max大于提供的字符串，则char的最后一个字符将用于所有其他值。例如， :max="5" char="!★"将导致这样的评级控制： !★★★★ 。

If you're using an icon font such as FontAwesome, providing a literal value could be troublesome since it won't display in your code editor. Also, Vue does not interpret HTML/XML entity references in attributes, so using something like char="" won't work. However, you can take advantage of v-bind's JavaScript interpretation and escape the character in Javascript, e.g., :char="'\uF005'".

如果您使用诸如FontAwesome之类的图标字体，则提供文字值可能会很麻烦，因为它不会显示在代码编辑器中。另外，Vue不会在属性中解释HTML / XML实体引用，因此请使用诸如char="" 将无法正常工作。但是，您可以利用v-bindJavaScript解释并转义Javascript中的字符，例如 :char="'\uF005'" 。

While emoji characters are supported, many don't respond to CSS colors, so using a separate character for inactiveChar (below) is highly recommended. Keep in mind that if you use the JavaScript encoding for char, many emoji characters are outside the 16-bit range of \uXXXX, so you'll need to use the surrogate pair form (lead and tail). There's an example of this using smiling faces in the sample app.

虽然支持表情符号字符，但许多字符都不响应CSS颜色，因此强烈建议对inactiveChar使用单独的字符(如下所示)。请记住，如果您对char使用JavaScript编码，则许多表情符号字符不在\uXXXX的16位范围内，因此您需要使用代理对形式(前导和尾部)。在示例应用程序中有一个使用笑脸的示例。

无效字符 (inactiveChar)

Sometimes, you may want to use a different set of characters for the "active" values than the "inactive" ones. This property works exactly like chars, but applies only to values between value+1 and max. If not provided, this falls back to the char property.

有时，您可能想为“活动”值使用与“非活动”值不同的字符集。此属性的工作方式与chars完全相同，但仅适用于value+1和max之间的value+1 。如果未提供，则返回到char属性。

For example, to use the Unicode "white star" (☆) for the inactive values, use inactive-char="☆".

例如，要将Unicode“白星”( ☆ )用于无效值，请使用inactive-char="☆" 。

This is especially useful for icon fonts such as FontAwesome that provide different glyphs for on/off state. It may also be a useful way to allow use of emoji characters, since those characters don't respond to CSS font color (making it difficult to distinguish the current value if the same character is used for active and inactive values).

这对于诸如FontAwesome之类的图标字体特别有用，该字体为on / off状态提供不同的字形。允许使用表情符号字符也是一种有用的方法，因为这些字符不响应CSS字体颜色(如果将相同字符用于有效值和无效值，则很难区分当前值)。

颜色属性 (Color Properties)

Some additional properties are supported on all modern browsers (in other words, not on IE11). These all accept any normal CSS color expression (triplets, rgb(), etc.). Remember to use kebab-case for your attributes.

所有现代浏览器均支持某些其他属性(换句话说，IE11不支持)。这些都接受任何正常CSS颜色表示(三胞胎， rgb()等)。切记对属性使用kebab-case。

activeColor (activeColor)

If specified, this overrides the default gold color used for the active values.

如果指定，它将覆盖用于活动值的默认金色。

inactiveColor (inactiveColor)

If specified, this overrides the default grey color used for the active values.

如果指定，它将覆盖用于活动值的默认灰色。

hoverColor (hoverColor)

If specified, this overrides the default lighter gold color used when hovering over a value.

如果指定，它将覆盖将鼠标悬停在某个值上时使用的默认浅金色。

shadowColor (shadowColor)

If specified, this overrides the default light yellow color used for the active values. (Inactive values don't have a shadow.)

如果指定，它将覆盖用于活动值的默认浅黄色。 (无效值没有阴影。)

大事记 (Events)

Since this is a custom input control, this component emits a single event, input, when a new value is selected by the user (the value is returned as the first argument). This event is required for v-model to work properly (if you choose to use it).

由于这是一个自定义输入控件，因此当用户选择新值时(该值作为第一个参数返回)，此组件将发出单个事件input 。 v-model正常运行(如果您选择使用它)需要此事件。

插槽 (Slots)

While the built-in char and inactiveChar works for most use cases, you can used named slots instead to pass more complex markup for your "stars," such as svg or img tags, or multi-character strings.

尽管内置的char和inactiveChar在大多数情况下都可以使用，但是您可以使用命名槽来为“星号”传递更复杂的标记，例如svg或img标签或多字符字符串。

activeLabel (activeLabel)

Used this named slot to pass your own markup to render for an "active star." Because the content will be repeated for each active value, the slot-scope="props" attribute is required.

使用此命名的插槽传递您自己的标记以渲染“活动星形”。由于将为每个活动值重复内容，因此需要slot-scope="props"属性。

无效标签 (inactiveLabel)

Used this named slot to pass your own markup to render for an "inactive star." Because the content will be repeated for each active value, the slot-scope="props" attribute is required.

使用此命名的插槽传递您自己的标记以渲染“不活动的星星”。由于将为每个活动值重复内容，因此需要slot-scope="props"属性。

浏览器兼容性 (Browser Compatibility)

This component is at least compatible with the current versions of Chrome, Firefox, Edge, iOS Safari, and desktop Safari.

此组件至少与当前版本的Chrome，Firefox，Edge，iOS Safari和桌面Safari兼容。

IE11 is partially supported. The JavaScript should transpile properly, but it will need a polyfill for the ES6 method Array.from, and custom colors are not supported (since IE11 lacks CSS custom property support).

IE11得到部分支持。 JavaScript应该可以正确地进行编译，但是它需要ES6方法Array.from ，并且不支持自定义颜色(因为IE11缺少CSS自定义属性支持)。

实施细节 (Implementation Details)

Under the hood, this control uses radio buttons. The buttons themselves are hidden, the user interacts with the corresponding <label> tags.

在引擎盖下，此控件使用单选按钮。按钮本身是隐藏的，用户与相应的<label>标签进行交互。

As with any Vue input component, the component's value property won't automatically change to match the user's selection (though the unerlying DOM value will). You'll need to either listen for the input event and change the property yourself, or use v-model to set up two-way binding.

与任何Vue输入组件一样，该组件的value属性不会自动更改以匹配用户的选择(尽管不固定的DOM值会更改)。您将需要侦听input事件并自己更改属性，或者使用v-model设置双向绑定。

To work around a known (but obscure) issue with Apple iPhone/iPad, the hover animations are disabled for touch screen devices.

要变通解决Apple iPhone / iPad的已知(但晦涩)问题，请为触摸屏设备禁用悬停动画。

自定义样式 (Customizing the Style)

Custom colors are handled using properties. To override all other styling, you can use plain old CSS. The main div for these components has a vue-stars class.

使用属性处理自定义颜色。要覆盖所有其他样式，可以使用普通的旧CSS。这些组件的主要div具有vue-stars类。

构建设置 (Build Setup)

# install dependencies
npm install

# build for production with minification
npm run build

发行历史 (Release History)

Date	Version	Notes
2017.10.28	0.1.0	First published version
2017.10.30	0.2.0	Fixes mostly for iOS Safari
2017.12.16	0.3.0	Rebuild configs from scratch, remove sample app, hopefully building a proper component now
2017.02.17	1.0.0	Rewrite CSS properties mechanism, add named/scoped slots

日期	版	笔记
2017.10.28	0.1.0	首次发布版本
2017.10.30	0.2.0	主要针对iOS Safari修复
2017.12.16	0.3.0	从头开始重建配置，删除示例应用程序，希望现在可以构建适当的组件
2017.02.17	1.0.0	重写CSS属性机制，添加命名/作用域插槽