Skip to content

Commit 35dc776

Browse files
gongjsvanoneang
gongjs
authored and
vanoneang
committed
feat: tab组件 (#158)
1 parent e5ea56b commit 35dc776

File tree

5 files changed

+201
-7
lines changed

5 files changed

+201
-7
lines changed

‎src/assets/styles/realize/element-variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ thead tr {
313313
}
314314

315315
.el-tabs__item {
316-
color: #333;
316+
color: #45526b;
317317
}
318318

319319
// menu

‎src/config/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const Config = {
2-
baseUrl: 'http://dev.koa.7yue.pro/',
2+
baseUrl: 'localhost:5000/',
33
stagnateTime: 1 * 60 * 60 * 1000, // 无操作停滞时间 默认1小时
44
openAutoJumpOut: true, // 是否开启无操作跳出
55
notLoginRoute: ['login'], // 无需登录即可访问的路由 name,

‎src/plugins/LinCmsUi/stage-config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,16 @@ const LinCmsUiRouter = {
4848
icon: 'iconfont icon-jiemiansheji',
4949
right: null,
5050
},
51+
{
52+
title: 'Tabs 标签页',
53+
type: 'view',
54+
name: null,
55+
route: '/lin-cms-ui/tab',
56+
filePath: 'plugins/LinCmsUi/views/tab/Tab.vue',
57+
inNav: true,
58+
icon: 'iconfont icon-jiemiansheji',
59+
right: null,
60+
},
5161
{
5262
title: 'Table 表格',
5363
type: 'folder',

‎src/plugins/LinCmsUi/views/tab/Tab.vue

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<template>
2+
<div class="lin-container">
3+
<div class="lin-title">Tabs 标签页</div>
4+
<div class="lin-wrap-ui">
5+
<el-card style="margin-bottom:50px;">
6+
<div slot="header">
7+
<span>基础用法</span>
8+
</div>
9+
<el-row>
10+
<el-tabs v-model="activeName" @tab-click="handleClick">
11+
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
12+
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
13+
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
14+
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
15+
</el-tabs>
16+
</el-row>
17+
18+
<el-collapse>
19+
<el-collapse-item title="查看代码" name="2">
20+
<div style="white-space: pre-wrap;">{{base}}</div>
21+
</el-collapse-item>
22+
</el-collapse>
23+
</el-card>
24+
25+
<el-card style="margin-bottom:50px;">
26+
<div slot="header">
27+
<span>选项卡样式</span>
28+
</div>
29+
<el-row>
30+
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
31+
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
32+
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
33+
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
34+
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
35+
</el-tabs>
36+
</el-row>
37+
38+
<el-collapse>
39+
<el-collapse-item title="查看代码" name="2">
40+
<div style="white-space: pre-wrap;">{{tabs}}</div>
41+
</el-collapse-item>
42+
</el-collapse>
43+
</el-card>
44+
45+
<el-card style="margin-bottom:50px;">
46+
<div slot="header">
47+
<span>卡片化</span>
48+
</div>
49+
<el-row>
50+
<el-tabs type="border-card">
51+
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
52+
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
53+
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
54+
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
55+
</el-tabs>
56+
</el-row>
57+
58+
<el-collapse>
59+
<el-collapse-item title="查看代码" name="2">
60+
<div style="white-space: pre-wrap;">{{card}}</div>
61+
</el-collapse-item>
62+
</el-collapse>
63+
</el-card>
64+
65+
<el-card style="margin-bottom:50px;">
66+
<div slot="header">
67+
<span>位置</span>
68+
</div>
69+
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
70+
<el-radio-button label="top">top</el-radio-button>
71+
<el-radio-button label="right">right</el-radio-button>
72+
<el-radio-button label="bottom">bottom</el-radio-button>
73+
<el-radio-button label="left">left</el-radio-button>
74+
</el-radio-group>
75+
76+
<el-tabs :tab-position="tabPosition" style="height: 200px;">
77+
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
78+
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
79+
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
80+
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
81+
</el-tabs>
82+
83+
<el-collapse>
84+
<el-collapse-item title="查看代码" name="2">
85+
<div style="white-space: pre-wrap;">{{position}}</div>
86+
</el-collapse-item>
87+
</el-collapse>
88+
</el-card>
89+
90+
<el-card style="margin-bottom:50px;">
91+
<div slot="header">
92+
<span>自定义</span>
93+
</div>
94+
<el-tabs type="border-card">
95+
<el-tab-pane>
96+
<span slot="label">
97+
<i class="el-icon-date"></i> 我的行程
98+
</span>
99+
我的行程
100+
</el-tab-pane>
101+
<el-tab-pane label="消息中心">消息中心</el-tab-pane>
102+
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
103+
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
104+
</el-tabs>
105+
106+
<el-collapse>
107+
<el-collapse-item title="查看代码" name="2">
108+
<div style="white-space: pre-wrap;">{{define}}</div>
109+
</el-collapse-item>
110+
</el-collapse>
111+
</el-card>
112+
</div>
113+
</div>
114+
</template>
115+
116+
<script>
117+
export default {
118+
data() {
119+
return {
120+
activeName: 'second',
121+
tabPosition: 'left',
122+
base: `
123+
<el-tabs v-model="activeName" @tab-click="handleClick">
124+
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
125+
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
126+
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
127+
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
128+
</el-tabs>`,
129+
tabs: `
130+
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
131+
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
132+
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
133+
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
134+
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
135+
</el-tabs>`,
136+
card: `
137+
<el-tabs type="border-card">
138+
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
139+
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
140+
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
141+
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
142+
</el-tabs>`,
143+
position: `
144+
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
145+
<el-radio-button label="top">top</el-radio-button>
146+
<el-radio-button label="right">right</el-radio-button>
147+
<el-radio-button label="bottom">bottom</el-radio-button>
148+
<el-radio-button label="left">left</el-radio-button>
149+
</el-radio-group>
150+
151+
<el-tabs :tab-position="tabPosition" style="height: 200px;">
152+
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
153+
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
154+
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
155+
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
156+
</el-tabs>`,
157+
define: `
158+
<el-tabs type="border-card">
159+
<el-tab-pane>
160+
<span slot="label"><i class="el-icon-date"></i> 我的行程</span>
161+
我的行程
162+
</el-tab-pane>
163+
<el-tab-pane label="消息中心">消息中心</el-tab-pane>
164+
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
165+
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
166+
</el-tabs>
167+
`,
168+
}
169+
},
170+
components: {},
171+
methods: {
172+
handleClick(tab, event) {
173+
console.log(tab, event)
174+
},
175+
},
176+
}
177+
</script>
178+
179+
<style lang="scss" scoped>
180+
@import "../../assets/style/container.scss";
181+
</style>

‎tests/unit/LIcon.test.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { mount } from '@vue/test-utils'
1+
import { mount } from '@vue/test-utils'
22
import LIcon from '@/components/base/icon/lin-icon.vue'
33

44
describe('LIcon', () => {
5-
let wrapper, vm;
5+
const wrapper
6+
let vm
67
beforeEach(() => {
7-
wrapper = mount(LIcon);
8+
wrapper = mount(LIcon)
89
vm = wrapper.vm
9-
});
10+
})
1011
it('Icon.vue', () => {
1112
mount(LIcon)
1213
expect(LIcon).toBe.ok
@@ -32,7 +33,9 @@ describe('LIcon', () => {
3233
expect(wrapper.find('svg').element.style.height).toBe('30px')
3334
})
3435
it('综合测试', () => {
35-
wrapper.setProps({ name: 'loading',color: '#ccc', width: '30px', height: '30px' })
36+
wrapper.setProps({
37+
name: 'loading', color: '#ccc', width: '30px', height: '30px',
38+
})
3639
const elements = vm.$el.querySelectorAll('use')
3740
expect(elements.length).toBe(1)
3841
expect(elements[0].getAttribute('xlink:href')).toBe('#icon-loading')

0 commit comments

Comments
 (0)