Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
e97b58f7
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,体验更适合开发者的 AI 搜索 >>
提交
e97b58f7
编写于
1月 18, 2023
作者:
D
Drjnigfubo
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: card修改
上级
e04773c4
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
236 addition
and
67 deletion
+236
-67
src/packages/__VUE/card/doc.en-US.md
src/packages/__VUE/card/doc.en-US.md
+116
-34
src/packages/__VUE/card/doc.md
src/packages/__VUE/card/doc.md
+120
-33
未找到文件。
src/packages/__VUE/card/doc.en-US.md
浏览文件 @
e97b58f7
...
...
@@ -62,37 +62,30 @@ app.use(Price);
```
:::
### Custom Content
### Custom prolist
:::demo
```
html
<template>
<nut-card
:img-url=
"state.imgUrl"
:title=
"state.title"
:price=
"state.price"
:vipPrice=
"state.vipPrice"
:shopDesc=
"state.shopDesc"
:delivery=
"state.delivery"
:shopName=
"state.shopName"
>
<template
#prolist
>
<div
class=
"search_prolist_attr"
>
<span
class=
"word"
>
word
</span>
<span
class=
"word"
>
word
</span>
<span
class=
"word"
>
word
</span>
</div>
</template>
<template
#tag
>
<img
class=
"tag"
src=
"https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
alt=
""
/>
</template>
<template
#footer
>
<div
class=
"customize"
>
cuttom
</div>
</template>
</nut-card>
<nut-card
:img-url=
"state.imgUrl"
:title=
"state.title"
:price=
"state.price"
:vipPrice=
"state.vipPrice"
:shopDesc=
"state.shopDesc"
:delivery=
"state.delivery"
:shopName=
"state.shopName"
>
<template
#prolist
>
<div
class=
"search_prolist_attr"
>
<span
class=
"word"
>
tag
</span>
<span
class=
"word"
>
tag
</span>
<span
class=
"word"
>
tag
</span>
</div>
</template>
</nut-card>
</template>
<script>
import
{
reactive
}
from
'
vue
'
;
...
...
@@ -114,14 +107,12 @@ app.use(Price);
}
}
</script>
<style>
.search_prolist_attr
{
<style
lang=
"scss"
>
.search_prolist_attr
{
margin
:
3px
0
1px
;
height
:
15px
;
overflow
:
hidden
;
}
.search_prolist_attr
>
span
{
>
span
{
float
:
left
;
padding
:
0
5px
;
border-radius
:
1px
;
...
...
@@ -131,7 +122,56 @@ app.use(Price);
color
:
#999
;
background-color
:
#f2f2f7
;
margin-right
:
5px
;
}
}
</style>
```
:::
### Custom Content
:::demo
```
html
<template>
<nut-card
:img-url=
"state.imgUrl"
:title=
"state.title"
:price=
"state.price"
:vipPrice=
"state.vipPrice"
:shopDesc=
"state.shopDesc"
:delivery=
"state.delivery"
:shopName=
"state.shopName"
>
<template
#shop-tag
>
<div>
Custom Content
</div>
</template>
<template
#price
>
<span>
inquiry
</span>
</template>
<template
#origin
>
<img
class=
"tag"
src=
"https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
alt=
""
/>
</template>
</nut-card>
</template>
<script>
import
{
reactive
}
from
'
vue
'
;
export
default
{
setup
()
{
const
state
=
reactive
({
imgUrl
:
'
//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg
'
,
title
:
'
title
'
,
shopName
:
'
shopName>
'
});
return
{
state
};
}
}
</script>
<style
lang=
"scss"
>
.tag
{
display
:
inline-block
;
vertical-align
:
middle
;
...
...
@@ -139,11 +179,53 @@ app.use(Price);
margin-left
:
2px
;
height
:
14px
;
}
</style>
```
:::
### Customize bottom right content
:::demo
```
html
<template>
<nut-card
:img-url=
"state.imgUrl"
:title=
"state.title"
:price=
"state.price"
:vipPrice=
"state.vipPrice"
:shopDesc=
"state.shopDesc"
:delivery=
"state.delivery"
:shopName=
"state.shopName"
>
<template
#footer
>
<div
class=
"customize"
>
custom
</div>
</template>
</nut-card>
</template>
<script>
import
{
reactive
}
from
'
vue
'
;
export
default
{
setup
()
{
const
state
=
reactive
({
imgUrl
:
'
//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg
'
,
title
:
'
title
'
,
price
:
'
388
'
,
vipPrice
:
'
378
'
,
shopDesc
:
'
desc
'
,
delivery
:
'
delivery
'
,
shopName
:
'
shopName>
'
});
return
{
state
};
}
}
</script>
<style
lang=
"scss"
>
.customize
{
font-size
:
12px
;
}
</style>
```
:::
## API
...
...
src/packages/__VUE/card/doc.md
浏览文件 @
e97b58f7
...
...
@@ -61,37 +61,29 @@ app.use(Price);
```
:::
### 自定义内容
### 自定义商品标签
:::demo
```
html
<template>
<nut-card
:img-url=
"state.imgUrl"
:title=
"state.title"
:price=
"state.price"
:vipPrice=
"state.vipPrice"
:shopDesc=
"state.shopDesc"
:delivery=
"state.delivery"
:shopName=
"state.shopName"
>
<template
#prolist
>
<div
class=
"search_prolist_attr"
>
<span
class=
"word"
>
活鲜
</span>
<span
class=
"word"
>
礼盒
</span>
<span
class=
"word"
>
国产
</span>
</div>
</template>
<template
#tag
>
<img
class=
"tag"
src=
"https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
alt=
""
/>
</template>
<template
#footer
>
<div
class=
"customize"
>
自定义
</div>
</template>
</nut-card>
<nut-card
:img-url=
"state.imgUrl"
:title=
"state.title"
:price=
"state.price"
:vipPrice=
"state.vipPrice"
:shopDesc=
"state.shopDesc"
:delivery=
"state.delivery"
:shopName=
"state.shopName"
>
<template
#prolist
>
<div
class=
"search_prolist_attr"
>
<span
class=
"word"
>
活鲜
</span>
<span
class=
"word"
>
礼盒
</span>
<span
class=
"word"
>
国产
</span>
</div>
</template>
</nut-card>
</template>
<script>
import
{
reactive
}
from
'
vue
'
;
...
...
@@ -113,14 +105,12 @@ app.use(Price);
}
}
</script>
<style>
.search_prolist_attr
{
<style
lang=
"scss"
>
.search_prolist_attr
{
margin
:
3px
0
1px
;
height
:
15px
;
overflow
:
hidden
;
}
.search_prolist_attr
>
span
{
>
span
{
float
:
left
;
padding
:
0
5px
;
border-radius
:
1px
;
...
...
@@ -130,7 +120,60 @@ app.use(Price);
color
:
#999
;
background-color
:
#f2f2f7
;
margin-right
:
5px
;
}
}
</style>
```
:::
### 自定义店铺介绍
:::demo
```
html
<template>
<nut-card
:img-url=
"state.imgUrl"
:title=
"state.title"
:price=
"state.price"
:vipPrice=
"state.vipPrice"
:shopDesc=
"state.shopDesc"
:delivery=
"state.delivery"
:shopName=
"state.shopName"
>
<template
#shop-tag
>
<div>
自定义店铺介绍
</div>
</template>
<template
#price
>
<span>
询价
</span>
</template>
<template
#origin
>
<img
class=
"tag"
src=
"https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
alt=
""
/>
</template>
</nut-card>
</template>
<script>
import
{
reactive
}
from
'
vue
'
;
export
default
{
setup
()
{
const
state
=
reactive
({
imgUrl
:
'
//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg
'
,
title
:
'
活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水
'
,
price
:
'
388
'
,
vipPrice
:
'
378
'
,
shopDesc
:
'
自营
'
,
delivery
:
'
厂商配送
'
,
shopName
:
'
阳澄湖大闸蟹自营店>
'
});
return
{
state
};
}
}
</script>
<style
lang=
"scss"
>
.tag
{
display
:
inline-block
;
vertical-align
:
middle
;
...
...
@@ -138,11 +181,55 @@ app.use(Price);
margin-left
:
2px
;
height
:
14px
;
}
</style>
```
:::
### 自定义右下角内容
:::demo
```
html
<template>
<nut-card
:img-url=
"state.imgUrl"
:title=
"state.title"
:price=
"state.price"
:vipPrice=
"state.vipPrice"
:shopDesc=
"state.shopDesc"
:delivery=
"state.delivery"
:shopName=
"state.shopName"
>
<template
#footer
>
<div
class=
"customize"
>
自定义右下角内容
</div>
</template>
</nut-card>
</template>
<script>
import
{
reactive
}
from
'
vue
'
;
export
default
{
setup
()
{
const
state
=
reactive
({
imgUrl
:
'
//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg
'
,
title
:
'
活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水
'
,
price
:
'
388
'
,
vipPrice
:
'
378
'
,
shopDesc
:
'
自营
'
,
delivery
:
'
厂商配送
'
,
shopName
:
'
阳澄湖大闸蟹自营店>
'
});
return
{
state
};
}
}
</script>
<style
lang=
"scss"
>
.customize
{
font-size
:
12px
;
}
</style>
```
:::
## API
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录