Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
f996b95e
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,发现更多精彩内容 >>
提交
f996b95e
编写于
11月 25, 2021
作者:
richard_1015
1
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(cellgroup): add desc props & slots
上级
15b95e8c
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
50 addition
and
40 deletion
+50
-40
src/packages/__VUE/cell/demo.vue
src/packages/__VUE/cell/demo.vue
+3
-12
src/packages/__VUE/cell/doc.md
src/packages/__VUE/cell/doc.md
+28
-20
src/packages/__VUE/cellgroup/index.scss
src/packages/__VUE/cellgroup/index.scss
+9
-0
src/packages/__VUE/cellgroup/index.vue
src/packages/__VUE/cellgroup/index.vue
+4
-1
src/packages/styles/variables.scss
src/packages/styles/variables.scss
+4
-0
src/sites/mobile-taro/vue/src/base/pages/cell/index.vue
src/sites/mobile-taro/vue/src/base/pages/cell/index.vue
+2
-7
未找到文件。
src/packages/__VUE/cell/demo.vue
浏览文件 @
f996b95e
...
...
@@ -2,11 +2,7 @@
<div
class=
"demo"
>
<h2>
基本用法
</h2>
<nut-cell
title=
"我是标题"
desc=
"描述文字"
></nut-cell>
<nut-cell
title=
"我是标题"
sub-title=
"副标题描述"
desc=
"描述文字"
></nut-cell>
<nut-cell
title=
"我是标题"
sub-title=
"副标题描述"
desc=
"描述文字"
></nut-cell>
<nut-cell
title=
"点击测试"
@
click=
"testClick"
></nut-cell>
<nut-cell
title=
"圆角设置 0"
round-radius=
"0"
></nut-cell>
...
...
@@ -16,14 +12,9 @@
<div>
自定义内容
</div>
</nut-cell>
<nut-cell-group
title=
"链接 | 分组用法"
>
<nut-cell-group
title=
"链接 | 分组用法"
desc=
"使用 nut-cell-group 支持 title desc slots"
>
<nut-cell
title=
"链接"
is-link
></nut-cell>
<nut-cell
title=
"URL 跳转"
desc=
"https://jd.com"
is-link
url=
"https://jd.com"
></nut-cell>
<nut-cell
title=
"URL 跳转"
desc=
"https://jd.com"
is-link
url=
"https://jd.com"
></nut-cell>
<nut-cell
title=
"路由跳转 ’/‘ "
to=
"/"
></nut-cell>
</nut-cell-group>
...
...
src/packages/__VUE/cell/doc.md
浏览文件 @
f996b95e
...
...
@@ -51,7 +51,7 @@ export default {
### 链接 | 分组用法
```
html
<nut-cell-group
title=
"链接 | 分组用法"
>
<nut-cell-group
title=
"链接 | 分组用法"
desc=
"使用 nut-cell-group 支持 title desc slots"
>
<nut-cell
title=
"链接"
is-link
></nut-cell>
<nut-cell
title=
"URL 跳转"
desc=
"https://jd.com"
is-link
url=
"https://jd.com"
></nut-cell>
<nut-cell
title=
"路由跳转 ’/‘ "
to=
"/"
></nut-cell>
...
...
@@ -94,22 +94,29 @@ export default {
## API
### Prop
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|------------------------------------------------------------------------------------------------|---------|--------|
| title | 标题名称 | String | - |
| sub-title | 左侧副标题 | String | - |
| desc | 右侧描述 | String | - |
| desc-text-align | 右侧描述文本对齐方式
[
text-align
](
https://www.w3school.com.cn/cssref/pr_text_text-align.asp
)
| String | right |
| is-link | 是否展示右侧箭头并开启点击反馈 | Boolean | false |
| icon | 左侧
[
图标名称
](
#/icon
)
或图片链接 | String | - |
| round-radius | 圆角半径 | Number | 6px |
| url
`小程序不支持`
| 点击后跳转的链接地址 | String | - |
### CellGroup Prop
| 字段 | 说明 | 类型 | 默认值 |
|-------|----------|--------|--------|
| title | 分组标题 | String | - |
| desc | 分组描述 | String | - |
### Cell Prop
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|------------------------------------------------------------------------------------------------|----------------|--------|
| title | 标题名称 | String | - |
| sub-title | 左侧副标题 | String | - |
| desc | 右侧描述 | String | - |
| desc-text-align | 右侧描述文本对齐方式
[
text-align
](
https://www.w3school.com.cn/cssref/pr_text_text-align.asp
)
| String | right |
| is-link | 是否展示右侧箭头并开启点击反馈 | Boolean | false |
| icon | 左侧
[
图标名称
](
#/icon
)
或图片链接 | String | - |
| round-radius | 圆角半径 | Number | 6px |
| url
`小程序不支持`
| 点击后跳转的链接地址 | String | - |
| to
`小程序不支持`
| 点击后跳转的目标路由对象,同 vue-router 的
[
to 属性
](
https://router.vuejs.org/zh/api/#to
)
属性 | String|Object | - |
| replace
`小程序不支持`
| 是否在跳转时替换当前页面历史 | Boolean | false |
| replace
`小程序不支持`
| 是否在跳转时替换当前页面历史 | Boolean
| false |
### Event
###
Cell
Event
| 名称 | 说明 | 回调参数 |
|-------|----------|-------------|
...
...
@@ -120,11 +127,12 @@ export default {
| 名称 | 说明 |
|---------------|----------------------|
| icon
`v3.1.4`
| 自定义左侧
icon
区域 |
| icon
`v3.1.4`
| 自定义左侧
`icon`
区域 |
| default | 自定义内容 |
| link | 自定义右侧
link
区域 |
| link | 自定义右侧
`link`
区域 |
## CellGroup Slots
| 名称 | 说明 |
|---------------|----------------------|
| title
`v3.1.10`
| 自定义title区域 |
| 名称 | 说明 |
|-----------------|---------------------|
| title
`v3.1.10`
| 自定义
`title`
标题区域 |
| desc
`v3.1.12`
| 自定义
`desc`
描述区域 |
src/packages/__VUE/cellgroup/index.scss
浏览文件 @
f996b95e
...
...
@@ -9,6 +9,15 @@
margin-top
:
30px
;
margin-bottom
:
10px
;
}
&
__desc
{
display
:
inherit
;
padding
:
$cell-group-desc-padding
;
color
:
$cell-group-desc-color
;
font-size
:
$cell-group-desc-font-size
;
line-height
:
$cell-group-desc-line-height
;
margin-top
:
10px
;
margin-bottom
:
10px
;
}
&
__warp
{
display
:
inherit
;
border-radius
:
$cell-border-radius
;
...
...
src/packages/__VUE/cellgroup/index.vue
浏览文件 @
f996b95e
...
...
@@ -2,6 +2,8 @@
<view
:class=
"classes"
>
<slot
v-if=
"$slots.title"
name=
"title"
></slot>
<view
v-else-if=
"title"
class=
"nut-cell-group__title"
>
{{
title
}}
</view>
<slot
v-if=
"$slots.desc"
name=
"desc"
></slot>
<view
v-else-if=
"desc"
class=
"nut-cell-group__desc"
>
{{
desc
}}
</view>
<view
class=
"nut-cell-group__warp"
>
<slot></slot>
</view>
...
...
@@ -14,7 +16,8 @@ import { createComponent } from '../../utils/create';
const
{
componentName
,
create
}
=
createComponent
(
'
cell-group
'
);
export
default
create
({
props
:
{
title
:
{
type
:
String
,
default
:
''
}
title
:
{
type
:
String
,
default
:
''
},
desc
:
{
type
:
String
,
default
:
''
}
},
setup
()
{
const
classes
=
computed
(()
=>
{
...
...
src/packages/styles/variables.scss
浏览文件 @
f996b95e
...
...
@@ -100,6 +100,10 @@ $cell-group-title-padding: 0 10px !default;
$cell-group-title-color
:
#909ca4
!
default
;
$cell-group-title-font-size
:
$font-size-2
!
default
;
$cell-group-title-line-height
:
20px
!
default
;
$cell-group-desc-padding
:
0
10px
!
default
;
$cell-group-desc-color
:
#909ca4
!
default
;
$cell-group-desc-font-size
:
$font-size-1
!
default
;
$cell-group-desc-line-height
:
16px
!
default
;
$cell-group-background-color
:
$white
!
default
;
// icon
...
...
src/sites/mobile-taro/vue/src/base/pages/cell/index.vue
浏览文件 @
f996b95e
...
...
@@ -2,11 +2,7 @@
<div
class=
"demo"
>
<h2>
基本用法
</h2>
<nut-cell
title=
"我是标题"
desc=
"描述文字"
></nut-cell>
<nut-cell
title=
"我是标题"
sub-title=
"副标题描述"
desc=
"描述文字"
></nut-cell>
<nut-cell
title=
"我是标题"
sub-title=
"副标题描述"
desc=
"描述文字"
></nut-cell>
<nut-cell
title=
"点击测试"
@
click=
"testClick"
></nut-cell>
<nut-cell
title=
"圆角设置 0"
round-radius=
"0"
></nut-cell>
...
...
@@ -26,8 +22,7 @@
></nut-cell>
<nut-cell
title=
"路由跳转 ’/‘ "
to=
"/"
></nut-cell>
</nut-cell-group>
-->
<nut-cell-group
title=
"自定义右侧箭头区域"
>
<nut-cell-group
title=
"自定义右侧箭头区域"
desc=
"使用 nut-cell-group 支持 title desc slots"
>
<nut-cell
title=
"Switch"
>
<template
v-slot:link
>
<nut-switch
v-model=
"switchChecked"
/>
...
...
richard_1015
@u011978868
mentioned in commit
ee4ecd4f
·
1月 07, 2022
mentioned in commit
ee4ecd4f
mentioned in commit ee4ecd4f95fca7abfcb61208e09153d63670377e
开关提交列表
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录