提交 92ff474d 编写于 作者: richard_1015's avatar richard_1015

feat(rate): 支持自定义 icon

上级 02454e88
......@@ -116,18 +116,20 @@ import './assets/font/iconfont.css';
```
自定义 iconfont [Demo示例](https://github.com/jdf2e/nutui-demo/blob/master/vite/src/App.vue#L15)
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|------------------|------------------|
| name | 图标名称或图片链接 | String | - |
| color | 图标颜色 | String | - |
| size | 图标大小,如 `20px` `2em` `2rem` | String or Number | - |
| font-class-name | 字体基础类名 | String | `nutui-iconfont` |
| class-prefix | 类名前缀,用于使用自定义图标 | String | `nut-icon` |
| tag | HTML 标签 | String | `i` |
| 参数 | 说明 | 类型 | 默认值 |
|-----------------|-----------------------------------------|------------------|------------------|
| name | 图标名称或图片链接 | String | - |
| color | 图标颜色 | String | - |
| size | 图标大小,如 `20px` `2em` `2rem` | String or Number | - |
| font-class-name | 自定义 icon 字体基础类名 | String | `nutui-iconfont` |
| class-prefix | 自定义 icon 类名前缀,用于使用自定义图标 | String | `nut-icon` |
| tag | HTML 标签 | String | `i` |
### Events
......
......@@ -88,19 +88,21 @@ setup() {
## Prop
| 字段 | 说明 | 类型 | 默认值 |
|----------------|-------------------------------------------|---------|-------------|
| v-model | 当前 star 数,可使用 v-model 双向绑定数据 | Number | - |
| count | star 总数 | Number | 5 |
| icon-size | star 大小 | Number | 18 |
| active-color | 图标选中颜色 | String | #fa200c |
| void-color | 图标未选中颜色 | String | #ccc |
| unchecked-icon | 使用图标(未选中) | String | star-n |
| checked-icon | 使用图标(选中) | String | star-fill-n |
| allow-half | 是否半星 | Boolean | false |
| readonly | 是否只读 | Boolean | false |
| disabled | 是否禁用 | Boolean | false |
| spacing | 间距 | Number | 20 |
| 字段 | 说明 | 类型 | 默认值 |
|-----------------|-------------------------------------------|---------|------------------|
| v-model | 当前 star 数,可使用 v-model 双向绑定数据 | Number | - |
| count | star 总数 | Number | 5 |
| icon-size | star 大小 | Number | 18 |
| active-color | 图标选中颜色 | String | #fa200c |
| void-color | 图标未选中颜色 | String | #ccc |
| unchecked-icon | 使用图标(未选中)[图标名称](#/icon) | String | star-n |
| checked-icon | 使用图标(选中)[图标名称](#/icon) | String | star-fill-n |
| font-class-name | 自定义icon 字体基础类名 | String | `nutui-iconfont` |
| class-prefix | 自定义icon 类名前缀,用于使用自定义图标 | String | `nut-icon` |
| allow-half | 是否半星 | Boolean | false |
| readonly | 是否只读 | Boolean | false |
| disabled | 是否禁用 | Boolean | false |
| spacing | 间距 | Number | 20 |
## Event
| 字段 | 说明 | 回调参数 |
......
<template>
<view :class="classes">
<view
class="nut-rate-item"
v-for="n in count"
:key="n"
:style="{ marginRight: pxCheck(spacing) }"
>
<view class="nut-rate-item" v-for="n in count" :key="n" :style="{ marginRight: pxCheck(spacing) }">
<nut-icon
:size="iconSize"
class="nut-rate-item__icon"
@click="onClick(1, n)"
:class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
:color="n <= modelValue ? activeColor : voidColor"
:font-class-name="fontClassName"
:class-prefix="classPrefix"
:name="n <= modelValue ? checkedIcon : uncheckedIcon"
/>
<nut-icon
v-if="allowHalf && modelValue + 1 > n"
class="nut-rate-item__icon nut-rate-item__icon--half"
@click="onClick(2, n)"
:font-class-name="fontClassName"
:class-prefix="classPrefix"
:color="n <= modelValue ? activeColor : voidColor"
:size="iconSize"
:name="checkedIcon"
/>
<nut-icon
v-else-if="allowHalf && modelValue + 1 < n"
class="
nut-rate-item__icon
nut-rate-item__icon--disabled
nut-rate-item__icon--half
"
class="nut-rate-item__icon nut-rate-item__icon--disabled nut-rate-item__icon--half"
@click="onClick(2, n)"
:font-class-name="fontClassName"
:class-prefix="classPrefix"
:color="voidColor"
:size="iconSize"
:name="uncheckedIcon"
......@@ -88,6 +85,14 @@ export default create({
spacing: {
type: [String, Number],
default: 14
},
classPrefix: {
type: String,
default: 'nut-icon'
},
fontClassName: {
type: String,
default: 'nutui-iconfont'
}
},
emits: ['update:modelValue', 'change'],
......
......@@ -11,23 +11,25 @@
:size="iconSize"
class="nut-rate-item__icon"
:class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
:font-class-name="fontClassName"
:class-prefix="classPrefix"
:color="n <= modelValue ? activeColor : voidColor"
:name="n <= modelValue ? checkedIcon : uncheckedIcon"
/>
<nut-icon
v-if="allowHalf && modelValue + 1 > n"
class="nut-rate-item__icon nut-rate-item__icon--half"
:font-class-name="fontClassName"
:class-prefix="classPrefix"
:color="n <= modelValue ? activeColor : voidColor"
:size="iconSize"
:name="checkedIcon"
/>
<nut-icon
v-else-if="allowHalf && modelValue + 1 < n"
class="
nut-rate-item__icon
nut-rate-item__icon--disabled
nut-rate-item__icon--half
"
class="nut-rate-item__icon nut-rate-item__icon--disabled nut-rate-item__icon--half"
:font-class-name="fontClassName"
:class-prefix="classPrefix"
:color="voidColor"
:size="iconSize"
:name="uncheckedIcon"
......@@ -85,6 +87,14 @@ export default create({
spacing: {
type: [String, Number],
default: 14
},
classPrefix: {
type: String,
default: 'nut-icon'
},
fontClassName: {
type: String,
default: 'nutui-iconfont'
}
},
emits: ['update:modelValue', 'change'],
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册