Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
92ff474d
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
92ff474d
编写于
11月 27, 2021
作者:
richard_1015
1
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(rate): 支持自定义 icon
上级
02454e88
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
56 addition
and
37 deletion
+56
-37
src/packages/__VUE/icon/doc.md
src/packages/__VUE/icon/doc.md
+10
-8
src/packages/__VUE/rate/doc.md
src/packages/__VUE/rate/doc.md
+15
-13
src/packages/__VUE/rate/index.taro.vue
src/packages/__VUE/rate/index.taro.vue
+16
-11
src/packages/__VUE/rate/index.vue
src/packages/__VUE/rate/index.vue
+15
-5
未找到文件。
src/packages/__VUE/icon/doc.md
浏览文件 @
92ff474d
...
...
@@ -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
...
...
src/packages/__VUE/rate/doc.md
浏览文件 @
92ff474d
...
...
@@ -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
| 字段 | 说明 | 回调参数 |
...
...
src/packages/__VUE/rate/index.taro.vue
浏览文件 @
92ff474d
<
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
'
],
...
...
src/packages/__VUE/rate/index.vue
浏览文件 @
92ff474d
...
...
@@ -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
'
],
...
...
richard_1015
@u011978868
mentioned in commit
23590f6b
·
1月 07, 2022
mentioned in commit
23590f6b
mentioned in commit 23590f6b4792d9eb75c87b6fd4b0b4327e141171
开关提交列表
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录