mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Rate: add allow-half prop (#3134)
This commit is contained in:
neverland
GitHub
parent
e6d4f331a8
commit
9ecbcae725
@ -16,18 +16,42 @@
|
||||
<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"
|
||||
color="#07c160"
|
||||
void-color="#ceefe8"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-rate
|
||||
v-model="value4"
|
||||
v-model="value6"
|
||||
disabled
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('readonly')">
|
||||
<van-rate
|
||||
v-model="value6"
|
||||
readonly
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -35,14 +59,20 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
halfStar: '半星',
|
||||
disabled: '禁用状态',
|
||||
customIcon: '自定义图标',
|
||||
customStyle: '自定义样式'
|
||||
customStyle: '自定义样式',
|
||||
customCount: '自定义数量',
|
||||
readonly: '只读状态'
|
||||
},
|
||||
'en-US': {
|
||||
halfStar: 'Half Star',
|
||||
disabled: 'Disabled',
|
||||
customIcon: 'Custom Icon',
|
||||
customStyle: 'Custom Style'
|
||||
customStyle: 'Custom Style',
|
||||
customCount: 'Custom Count',
|
||||
readonly: 'Readonly'
|
||||
}
|
||||
},
|
||||
|
||||
@ -50,8 +80,10 @@ export default {
|
||||
return {
|
||||
value1: 3,
|
||||
value2: 3,
|
||||
value3: 4,
|
||||
value4: 2
|
||||
value3: 3,
|
||||
value4: 2.5,
|
||||
value5: 4,
|
||||
value6: 3
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -59,6 +91,9 @@ export default {
|
||||
|
||||
<style lang="less">
|
||||
.demo-rate {
|
||||
padding-bottom: 20px;
|
||||
background-color: #fff;
|
||||
|
||||
.van-rate {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@ -41,18 +41,51 @@ export default {
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
:count="6"
|
||||
color="#07c160"
|
||||
void-color="#ceefe8"
|
||||
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
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
@ -64,6 +97,7 @@ export default {
|
||||
| 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` |
|
||||
|
||||
@ -4,8 +4,20 @@
|
||||
user-select: none;
|
||||
|
||||
&__item {
|
||||
width: 1em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 2px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 1em;
|
||||
|
||||
&--half {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 2px;
|
||||
width: .5em;;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,12 +19,25 @@ export type RateProps = {
|
||||
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(
|
||||
@ -33,19 +46,21 @@ function Rate(
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext<RateProps>
|
||||
) {
|
||||
const list = [];
|
||||
for (let i = 0; i < props.count; i++) {
|
||||
list.push(i < props.value);
|
||||
const { size, icon, voidIcon, color, voidColor, disabled, disabledColor } = props;
|
||||
|
||||
const list: RateStatus[] = [];
|
||||
for (let i = 1; i <= props.count; i++) {
|
||||
list.push(getRateStatus(props.value, i, props.allowHalf));
|
||||
}
|
||||
|
||||
const onSelect = (index: number) => {
|
||||
if (!props.disabled && !props.readonly) {
|
||||
emit(ctx, 'input', index + 1);
|
||||
emit(ctx, 'change', index + 1);
|
||||
function onSelect(index: number) {
|
||||
if (!disabled && !props.readonly) {
|
||||
emit(ctx, 'input', index);
|
||||
emit(ctx, 'change', index);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onTouchMove = (event: TouchEvent) => {
|
||||
function onTouchMove(event: TouchEvent) {
|
||||
if (!document.elementFromPoint) {
|
||||
return;
|
||||
}
|
||||
@ -53,37 +68,52 @@ function Rate(
|
||||
event.preventDefault();
|
||||
const { clientX, clientY } = event.touches[0];
|
||||
const target = document.elementFromPoint(clientX, clientY) as HTMLElement;
|
||||
|
||||
if (target && target.dataset) {
|
||||
const { index } = target.dataset;
|
||||
const { score } = target.dataset;
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (index) {
|
||||
onSelect(+index);
|
||||
if (score) {
|
||||
onSelect(+score);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function renderStar(status: RateStatus, index: number) {
|
||||
const isFull = status === 'full';
|
||||
const isVoid = status === 'void';
|
||||
|
||||
return (
|
||||
<div key={index} class={bem('item')}>
|
||||
<Icon
|
||||
name={isFull ? icon : voidIcon}
|
||||
size={`${size}px`}
|
||||
class={bem('icon')}
|
||||
data-score={index + 1}
|
||||
color={disabled ? disabledColor : isFull ? color : voidColor}
|
||||
onClick={() => {
|
||||
onSelect(index + 1);
|
||||
}}
|
||||
/>
|
||||
{props.allowHalf && (
|
||||
<Icon
|
||||
name={isVoid ? voidIcon : icon}
|
||||
size={`${size}px`}
|
||||
class={bem('icon', 'half')}
|
||||
data-score={index + 0.5}
|
||||
color={disabled ? disabledColor : isVoid ? voidColor : color}
|
||||
onClick={() => {
|
||||
onSelect(index + 0.5);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={bem()} {...inherit(ctx)} onTouchmove={onTouchMove}>
|
||||
{list.map((full, index) => (
|
||||
<Icon
|
||||
key={index}
|
||||
class={bem('item')}
|
||||
size={`${props.size}px`}
|
||||
data-index={index}
|
||||
name={full ? props.icon : props.voidIcon}
|
||||
color={
|
||||
props.disabled
|
||||
? props.disabledColor
|
||||
: full
|
||||
? props.color
|
||||
: props.voidColor
|
||||
}
|
||||
onClick={() => {
|
||||
onSelect(index);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
{list.map((status, index) => renderStar(status, index))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -92,6 +122,7 @@ Rate.props = {
|
||||
value: Number,
|
||||
readonly: Boolean,
|
||||
disabled: Boolean,
|
||||
allowHalf: Boolean,
|
||||
size: {
|
||||
type: Number,
|
||||
default: 20
|
||||
|
||||
@ -3,37 +3,109 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-rate"><i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i><i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i><i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i><i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i><i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate">
|
||||
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-rate"><i data-index="0" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i><i data-index="1" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i><i data-index="2" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i><i data-index="3" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i><i data-index="4" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate">
|
||||
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-rate"><i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
|
||||
<!----></i><i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
|
||||
<!----></i><i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
|
||||
<!----></i><i data-index="3" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
|
||||
<!----></i><i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
|
||||
<!----></i><i data-index="5" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate">
|
||||
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-rate"><i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
|
||||
<!----></i><i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
|
||||
<!----></i><i data-index="2" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
|
||||
<!----></i><i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
|
||||
<!----></i><i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate">
|
||||
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:25px;">
|
||||
<!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:25px;">
|
||||
<!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
|
||||
<!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
|
||||
<!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#eee;font-size:25px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
|
||||
<!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#eee;font-size:25px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-rate">
|
||||
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-rate">
|
||||
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#bdbdbd;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#bdbdbd;font-size:20px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-rate">
|
||||
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i></div>
|
||||
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -13,13 +13,35 @@ test('change event', () => {
|
||||
}
|
||||
}
|
||||
});
|
||||
const item4 = wrapper.findAll('.van-rate__item').at(3);
|
||||
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();
|
||||
|
||||
@ -41,16 +41,49 @@ export default {
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
:count="6"
|
||||
color="#07c160"
|
||||
void-color="#ceefe8"
|
||||
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 />
|
||||
<van-rate v-model="value" disabled />
|
||||
```
|
||||
|
||||
#### 只读状态
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" readonly />
|
||||
```
|
||||
|
||||
### API
|
||||
@ -64,6 +97,7 @@ export default {
|
||||
| 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` | - |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user