[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-rate v-model="value1" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customIcon')">
|
||||
<van-rate
|
||||
v-model="value2"
|
||||
icon="like"
|
||||
void-icon="like-o"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customStyle')">
|
||||
<van-rate
|
||||
v-model="value3"
|
||||
:size="25"
|
||||
color="#f44"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('halfStar')">
|
||||
<van-rate
|
||||
v-model="value4"
|
||||
:size="25"
|
||||
allow-half
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customCount')">
|
||||
<van-rate
|
||||
v-model="value5"
|
||||
:count="6"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-rate
|
||||
v-model="value6"
|
||||
disabled
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('readonly')">
|
||||
<van-rate
|
||||
v-model="value6"
|
||||
readonly
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
halfStar: '半星',
|
||||
disabled: '禁用状态',
|
||||
customIcon: '自定义图标',
|
||||
customStyle: '自定义样式',
|
||||
customCount: '自定义数量',
|
||||
readonly: '只读状态'
|
||||
},
|
||||
'en-US': {
|
||||
halfStar: 'Half Star',
|
||||
disabled: 'Disabled',
|
||||
customIcon: 'Custom Icon',
|
||||
customStyle: 'Custom Style',
|
||||
customCount: 'Custom Count',
|
||||
readonly: 'Readonly'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: 3,
|
||||
value2: 3,
|
||||
value3: 3,
|
||||
value4: 2.5,
|
||||
value5: 4,
|
||||
value6: 3
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-rate {
|
||||
padding-bottom: 20px;
|
||||
background-color: #fff;
|
||||
|
||||
.van-rate {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
# Rate
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Rate } from 'vant';
|
||||
|
||||
Vue.use(Rate);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Icon
|
||||
|
||||
```html
|
||||
<van-rate
|
||||
v-model="value"
|
||||
icon="like"
|
||||
void-icon="like-o"
|
||||
/>
|
||||
```
|
||||
|
||||
### Custom Style
|
||||
|
||||
```html
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
color="#f44"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
```
|
||||
|
||||
### Half Star
|
||||
|
||||
```html
|
||||
<van-rate
|
||||
v-model="value"
|
||||
allow-half
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 2.5
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Count
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" :count="6" />
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" disabled />
|
||||
```
|
||||
|
||||
### Readonly
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" readonly />
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model | Current rate | `Number` | - |
|
||||
| count | Count | `Number` | `5` |
|
||||
| size | Icon size| `String | Number` | `20px` |
|
||||
| gutter | Icon gutter | `String | Number` | `4px` |
|
||||
| color | Selected color | `String` | `#ffd21e` |
|
||||
| void-color | Void color | `String` | `#c7c7c7` |
|
||||
| icon | Selected icon | `String` | `star` |
|
||||
| void-icon | Void icon | `String` | `star-o` |
|
||||
| allow-half | Whether to allow half star | `Boolean` | `false` |
|
||||
| readonly | Whether to be readonly | `Boolean` | `false` |
|
||||
| disabled | Whether to disable rate | `Boolean` | `false` |
|
||||
| disabled-color | Disabled color | `String` | `#bdbdbd` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| change | Triggered when rate changed | current rate |
|
||||
@@ -0,0 +1,28 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-rate {
|
||||
user-select: none;
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: @rate-icon-gutter;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: block;
|
||||
width: 1em;
|
||||
font-size: @rate-icon-size;
|
||||
|
||||
&--half {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: .5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
/* eslint-disable prefer-spread */
|
||||
import { createNamespace, suffixPx } from '../utils';
|
||||
import { emit, inherit } from '../utils/functional';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import Icon from '../icon';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../utils/types';
|
||||
|
||||
const [createComponent, bem] = createNamespace('rate');
|
||||
|
||||
export type RateProps = {
|
||||
size: number;
|
||||
icon: string;
|
||||
count: number;
|
||||
color: string;
|
||||
value: number;
|
||||
gutter?: string | number;
|
||||
voidIcon: string;
|
||||
voidColor: string;
|
||||
readonly?: boolean;
|
||||
disabled?: boolean;
|
||||
allowHalf?: boolean;
|
||||
disabledColor: string;
|
||||
};
|
||||
|
||||
export type RateEvents = {
|
||||
input(index: number): void;
|
||||
change(index: number): void;
|
||||
};
|
||||
|
||||
type RateStatus = 'full' | 'half' | 'void';
|
||||
|
||||
function getRateStatus(value: number, index: number, allowHalf?: boolean): RateStatus {
|
||||
if (value >= index) {
|
||||
return 'full';
|
||||
}
|
||||
if (value + 0.5 >= index && allowHalf) {
|
||||
return 'half';
|
||||
}
|
||||
return 'void';
|
||||
}
|
||||
|
||||
function Rate(
|
||||
h: CreateElement,
|
||||
props: RateProps,
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext<RateProps>
|
||||
) {
|
||||
const {
|
||||
icon,
|
||||
color,
|
||||
count,
|
||||
voidIcon,
|
||||
readonly,
|
||||
disabled,
|
||||
voidColor,
|
||||
disabledColor
|
||||
} = props;
|
||||
|
||||
const list: RateStatus[] = [];
|
||||
for (let i = 1; i <= count; i++) {
|
||||
list.push(getRateStatus(props.value, i, props.allowHalf));
|
||||
}
|
||||
|
||||
function onSelect(index: number) {
|
||||
if (!disabled && !readonly) {
|
||||
emit(ctx, 'input', index);
|
||||
emit(ctx, 'change', index);
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchMove(event: TouchEvent) {
|
||||
if (readonly || disabled || !document.elementFromPoint) {
|
||||
return;
|
||||
}
|
||||
|
||||
preventDefault(event);
|
||||
const { clientX, clientY } = event.touches[0];
|
||||
const target = document.elementFromPoint(clientX, clientY) as HTMLElement;
|
||||
|
||||
if (target && target.dataset) {
|
||||
const { score } = target.dataset;
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (score) {
|
||||
onSelect(+score);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const gutter = suffixPx(props.gutter);
|
||||
|
||||
function renderStar(status: RateStatus, index: number) {
|
||||
const isFull = status === 'full';
|
||||
const isVoid = status === 'void';
|
||||
const score = index + 1;
|
||||
const size = suffixPx(props.size);
|
||||
|
||||
let style;
|
||||
if (gutter && score !== count) {
|
||||
style = { paddingRight: gutter };
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
role="radio"
|
||||
style={style}
|
||||
tabindex="0"
|
||||
aria-setsize={count}
|
||||
aria-posinset={score}
|
||||
aria-checked={String(!isVoid)}
|
||||
class={bem('item')}
|
||||
>
|
||||
<Icon
|
||||
size={size}
|
||||
name={isFull ? icon : voidIcon}
|
||||
class={bem('icon')}
|
||||
data-score={score}
|
||||
color={disabled ? disabledColor : isFull ? color : voidColor}
|
||||
onClick={() => {
|
||||
onSelect(score);
|
||||
}}
|
||||
/>
|
||||
{props.allowHalf && (
|
||||
<Icon
|
||||
size={size}
|
||||
name={isVoid ? voidIcon : icon}
|
||||
class={bem('icon', 'half')}
|
||||
data-score={score - 0.5}
|
||||
color={disabled ? disabledColor : isVoid ? voidColor : color}
|
||||
onClick={() => {
|
||||
onSelect(score - 0.5);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
class={bem()}
|
||||
tabindex="0"
|
||||
role="radiogroup"
|
||||
{...inherit(ctx)}
|
||||
onTouchmove={onTouchMove}
|
||||
>
|
||||
{list.map((status, index) => renderStar(status, index))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Rate.props = {
|
||||
value: Number,
|
||||
size: [String, Number],
|
||||
gutter: [String, Number],
|
||||
readonly: Boolean,
|
||||
disabled: Boolean,
|
||||
allowHalf: Boolean,
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'star'
|
||||
},
|
||||
voidIcon: {
|
||||
type: String,
|
||||
default: 'star-o'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#ffd21e'
|
||||
},
|
||||
voidColor: {
|
||||
type: String,
|
||||
default: '#c7c7c7'
|
||||
},
|
||||
disabledColor: {
|
||||
type: String,
|
||||
default: '#bdbdbd'
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
};
|
||||
|
||||
export default createComponent<RateProps, RateEvents>(Rate);
|
||||
@@ -0,0 +1,111 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
|
||||
<!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
|
||||
<!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
|
||||
<!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="6" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="6" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="6" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="6" aria-posinset="4" aria-checked="true" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="6" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="6" aria-posinset="6" aria-checked="false" class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,31 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`gutter prop 1`] = `
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`size prop 1`] = `
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,110 @@
|
||||
import Rate from '..';
|
||||
import { mount, triggerDrag } from '../../../test/utils';
|
||||
|
||||
test('change event', () => {
|
||||
const onInput = jest.fn();
|
||||
const onChange = jest.fn();
|
||||
|
||||
const wrapper = mount(Rate, {
|
||||
context: {
|
||||
on: {
|
||||
input: onInput,
|
||||
change: onChange
|
||||
}
|
||||
}
|
||||
});
|
||||
const item4 = wrapper.findAll('.van-rate__icon').at(3);
|
||||
|
||||
item4.trigger('click');
|
||||
expect(onInput).toHaveBeenCalledWith(4);
|
||||
expect(onChange).toHaveBeenCalledWith(4);
|
||||
});
|
||||
|
||||
test('allow half', () => {
|
||||
const onInput = jest.fn();
|
||||
const onChange = jest.fn();
|
||||
|
||||
const wrapper = mount(Rate, {
|
||||
propsData: {
|
||||
allowHalf: true
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
input: onInput,
|
||||
change: onChange
|
||||
}
|
||||
}
|
||||
});
|
||||
const item4 = wrapper.findAll('.van-rate__icon--half').at(3);
|
||||
|
||||
item4.trigger('click');
|
||||
expect(onInput).toHaveBeenCalledWith(3.5);
|
||||
expect(onChange).toHaveBeenCalledWith(3.5);
|
||||
});
|
||||
|
||||
test('disabled', () => {
|
||||
const onInput = jest.fn();
|
||||
const onChange = jest.fn();
|
||||
|
||||
const wrapper = mount(Rate, {
|
||||
propsData: {
|
||||
disabled: true
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
input: onInput,
|
||||
change: onChange
|
||||
}
|
||||
}
|
||||
});
|
||||
const item4 = wrapper.findAll('.van-rate__item').at(3);
|
||||
|
||||
item4.trigger('click');
|
||||
expect(onInput).toHaveBeenCalledTimes(0);
|
||||
expect(onChange).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('touchmove', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(Rate, {
|
||||
context: {
|
||||
on: {
|
||||
change: onChange
|
||||
}
|
||||
}
|
||||
});
|
||||
triggerDrag(wrapper, 100, 0);
|
||||
|
||||
const icons = wrapper.findAll('.van-icon');
|
||||
document.elementFromPoint = function (x) {
|
||||
const index = Math.round(x / 20);
|
||||
if (index < icons.length) {
|
||||
return icons.at(index).element;
|
||||
}
|
||||
};
|
||||
|
||||
triggerDrag(wrapper, 100, 0);
|
||||
expect(onChange).toHaveBeenNthCalledWith(1, 2);
|
||||
expect(onChange).toHaveBeenNthCalledWith(2, 3);
|
||||
expect(onChange).toHaveBeenNthCalledWith(3, 4);
|
||||
});
|
||||
|
||||
test('gutter prop', () => {
|
||||
const wrapper = mount(Rate, {
|
||||
propsData: {
|
||||
gutter: 10
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('size prop', () => {
|
||||
const wrapper = mount(Rate, {
|
||||
propsData: {
|
||||
size: '2rem'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
# Rate 评分
|
||||
|
||||
### 引入
|
||||
``` javascript
|
||||
import { Rate } from 'vant';
|
||||
|
||||
Vue.use(Rate);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义图标
|
||||
|
||||
```html
|
||||
<van-rate
|
||||
v-model="value"
|
||||
icon="like"
|
||||
void-icon="like-o"
|
||||
/>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
|
||||
```html
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
color="#f44"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
```
|
||||
|
||||
### 半星
|
||||
|
||||
```html
|
||||
<van-rate
|
||||
v-model="value"
|
||||
allow-half
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 2.5
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义数量
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" :count="6" />
|
||||
```
|
||||
|
||||
### 禁用状态
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" disabled />
|
||||
```
|
||||
|
||||
### 只读状态
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" readonly />
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| v-model | 当前分值 | `Number` | - | - |
|
||||
| count | 图标总数 | `Number` | `5` | - |
|
||||
| size | 图标大小，默认单位为`px` | `String | Number` | `20px` | - |
|
||||
| gutter | 图标间距，默认单位为`px` | `String | Number` | `4px` | 2.0.0 |
|
||||
| color | 选中时的颜色 | `String` | `#ffd21e` | - |
|
||||
| void-color | 未选中时的颜色 | `String` | `#c7c7c7` | - |
|
||||
| icon | 选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star` | 1.4.7 |
|
||||
| void-icon | 未选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star-o` | 1.4.7 |
|
||||
| allow-half | 是否允许半选 | `Boolean` | `false` | 1.6.14 |
|
||||
| readonly | 是否为只读状态 | `Boolean` | `false` | 1.3.0 |
|
||||
| disabled | 是否禁用评分 | `Boolean` | `false` | - |
|
||||
| disabled-color | 禁用时的颜色 | `String` | `#bdbdbd` | - |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 当前分值变化时触发的事件 | 当前分值 |
|
||||
Reference in New Issue
Block a user