Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
f09d2442
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 搜索 >>
提交
f09d2442
编写于
12月 23, 2020
作者:
richard_1015
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
upd: base demo css
上级
e9c0bb55
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
140 addition
and
43 deletion
+140
-43
src/packages/menu/demo.vue
src/packages/menu/demo.vue
+1
-1
src/packages/navbar/demo.vue
src/packages/navbar/demo.vue
+8
-2
src/packages/tab/demo.vue
src/packages/tab/demo.vue
+112
-37
src/packages/tabbar/demo.vue
src/packages/tabbar/demo.vue
+1
-1
src/sites/mobile/App.vue
src/sites/mobile/App.vue
+8
-2
vue.config.js
vue.config.js
+10
-0
未找到文件。
src/packages/menu/demo.vue
浏览文件 @
f09d2442
<
template
>
<div
class=
"demo"
>
<div
class=
"demo
full
"
>
<h2>
基础用法
</h2>
<nut-menu>
<nut-menu-item
:menuList=
"menuList"
title=
"最新商品"
></nut-menu-item>
...
...
src/packages/navbar/demo.vue
浏览文件 @
f09d2442
<
template
>
<div
class=
"demo"
>
<div
class=
"demo
full
"
>
<h2>
基础用法
</h2>
<nut-navbar
leftShow
title=
"订单详情"
icon=
"share"
></nut-navbar>
<nut-navbar
leftShow
title=
"浏览记录"
desc=
"清空"
></nut-navbar>
<!-- 是否支持自定义属性titIcon -->
<nut-navbar
:leftShow=
"false"
title=
"购物车"
titIcon=
"locationg3"
desc=
"编辑"
icon=
"more"
></nut-navbar>
<nut-navbar
:leftShow=
"false"
title=
"购物车"
titIcon=
"locationg3"
desc=
"编辑"
icon=
"more"
></nut-navbar>
<h2>
增加tab及右侧按钮
</h2>
<nut-navbar
title=
"商品"
desc=
"编辑"
icon=
"horizontal"
></nut-navbar>
<h2>
多tab切换导航
</h2>
...
...
src/packages/tab/demo.vue
浏览文件 @
f09d2442
<
template
>
<div
class=
"demo"
>
<div
class=
"demo
full
"
>
<h2>
基础用法
</h2>
<nut-tab>
<nut-tab-panel
tab-title=
"全部"
><p
class=
"content"
>
这里是页签全部内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"全部"
><p
class=
"content"
>
这里是页签全部内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel
>
</nut-tab>
<h2>
defaultIndex设置默认显示tab
</h2>
<h2>
switchTab监听切换tab返回事件
</h2>
<nut-tab
:default-index=
"1"
@
switch-tab=
"switchTab"
>
<nut-tab-panel
tab-title=
"全部"
><p
class=
"content"
>
这里是页签全部内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"全部"
><p
class=
"content"
>
这里是页签全部内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel
>
</nut-tab>
<h2>
animatedTime 开启切换标签内容时的转场动画时间
</h2>
<nut-tab
:animated-time=
"500"
>
<nut-tab-panel
tab-title=
"全部"
><p
class=
"content"
>
这里是页签全部内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"全部"
><p
class=
"content"
>
这里是页签全部内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel
>
</nut-tab>
<h2>
禁止tab内容滑动
</h2>
<nut-tab
:no-swiping=
"true"
>
<nut-tab-panel
tab-title=
"全部"
><p
class=
"content"
>
这里是页签全部内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"全部"
><p
class=
"content"
>
这里是页签全部内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel
>
</nut-tab>
<h2>
标签数量超过 5 个时,标签栏可以在水平方向上滚动,切换时会自动将当前标签居中。
</h2>
<h2
>
标签数量超过 5
个时,标签栏可以在水平方向上滚动,切换时会自动将当前标签居中。
</h2
>
<nut-tab
:animated-time=
"500"
>
<nut-tab-panel
tab-title=
"全部"
><p
class=
"content"
>
这里是页签全部内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"已取消"
><p
class=
"content"
>
这里是页签已取消内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待评价"
><p
class=
"content"
>
这里是页签待评价内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"全部"
><p
class=
"content"
>
这里是页签全部内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"已取消"
><p
class=
"content"
>
这里是页签已取消内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待评价"
><p
class=
"content"
>
这里是页签待评价内容
</p></nut-tab-panel
>
</nut-tab>
<h2>
设置slot:header可以自定义标签
</h2>
...
...
@@ -49,27 +96,55 @@
<template
v-slot:header
><nut-icon
name=
"dongdong"
></nut-icon></
template
>
<p
class=
"content"
>
这里是页签全部内容
</p>
</nut-tab-panel>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"已取消"
><p
class=
"content"
>
这里是页签已取消内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待评价"
><p
class=
"content"
>
这里是页签待评价内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"待付款"
><p
class=
"content"
>
这里是页签待付款内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待收获"
><p
class=
"content"
>
这里是页签待收获内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"已完成"
><p
class=
"content"
>
这里是页签已完成内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"已取消"
><p
class=
"content"
>
这里是页签已取消内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"待评价"
><p
class=
"content"
>
这里是页签待评价内容
</p></nut-tab-panel
>
</nut-tab>
<h2>
左右tab布局
</h2>
<nut-tab
direction=
"vertical"
:animated-time=
"500"
:default-index=
"2"
>
<nut-tab-panel
tab-title=
"页签一"
><p
class=
"content"
>
这里是页签一内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"页签二"
><p
class=
"content"
>
这里是页签二内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"页签三"
><p
class=
"content"
>
这里是页签三内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"页签四"
><p
class=
"content"
>
这里是页签四内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"页签五"
><p
class=
"content"
>
这里是页签五内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"页签六"
><p
class=
"content"
>
这里是页签六内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"页签七"
><p
class=
"content"
>
这里是页签七内容
</p></nut-tab-panel>
<nut-tab-panel
tab-title=
"页签一"
><p
class=
"content"
>
这里是页签一内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"页签二"
><p
class=
"content"
>
这里是页签二内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"页签三"
><p
class=
"content"
>
这里是页签三内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"页签四"
><p
class=
"content"
>
这里是页签四内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"页签五"
><p
class=
"content"
>
这里是页签五内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"页签六"
><p
class=
"content"
>
这里是页签六内容
</p></nut-tab-panel
>
<nut-tab-panel
tab-title=
"页签七"
><p
class=
"content"
>
这里是页签七内容
</p></nut-tab-panel
>
</nut-tab>
<h2>
异步操作
</h2>
<nut-tab
:animated-time=
"500"
v-if=
"editList.length > 0"
>
<nut-tab-panel
:tab-title=
"item.title"
v-for=
"(item, index) in editList"
:key=
"index"
>
<nut-tab-panel
:tab-title=
"item.title"
v-for=
"(item, index) in editList"
:key=
"index"
>
<p
class=
"content"
>
这里是页签{{ index }}内容
</p>
</nut-tab-panel>
</nut-tab>
...
...
src/packages/tabbar/demo.vue
浏览文件 @
f09d2442
<
template
>
<div
class=
"demo"
>
<div
class=
"demo
full
"
>
<h2>
基础用法
</h2>
<nut-tabbar
:tab-List=
"tabList"
@
tab-switch=
"tabSwitch"
></nut-tabbar>
...
...
src/sites/mobile/App.vue
浏览文件 @
f09d2442
...
...
@@ -70,8 +70,14 @@ export default defineComponent({
background
:
#f7f8fa
;
overflow-x
:
hidden
;
overflow-y
:
auto
;
padding
:
0
25px
;
padding-top
:
57px
;
padding
:
57px
25px
0
25px
;
&
.full
{
padding
:
57px
0
0
0
;
h2
{
padding-left
:
25px
;
}
}
&
.bg-w
{
background
:
#fff
;
...
...
vue.config.js
浏览文件 @
f09d2442
...
...
@@ -18,6 +18,7 @@ module.exports = {
}
}
},
css
:
{
loaderOptions
:
{
// 给 sass-loader 传递选项
...
...
@@ -34,6 +35,15 @@ module.exports = {
// 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置
scss
:
{
additionalData
:
`@import "~@/styles/variables.scss";@import "~@/sites/assets/styles/variables.scss";`
},
postcss
:
{
plugins
:
[
require
(
'
autoprefixer
'
)({
// 配置使用 autoprefixer
// browsers: ['last 20 versions'],
overrideBrowserslist
:
[
'
last 20 versions
'
]
// 记得这里要把 browsers 改为 overrideBrowserslist,autoprefixer 新版本的写法有变
})
]
}
}
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录