Component

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

@@ -313,7 +313,7 @@ thead tr {
 }
 
 .el-tabs__item {
-  color: #333;
+  color: #45526b;
 }
 
 // menu

src/config/index.js

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

src/plugins/LinCmsUi/stage-config.js

@@ -48,6 +48,16 @@ const LinCmsUiRouter = {
       icon: 'iconfont icon-jiemiansheji',
       right: null,
     },
+    {
+      title: 'Tabs 标签页',
+      type: 'view',
+      name: null,
+      route: '/lin-cms-ui/tab',
+      filePath: 'plugins/LinCmsUi/views/tab/Tab.vue',
+      inNav: true,
+      icon: 'iconfont icon-jiemiansheji',
+      right: null,
+    },
     {
       title: 'Table 表格',
       type: 'folder',

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="lin-container">
+    <div class="lin-title">Tabs 标签页</div>
+    <div class="lin-wrap-ui">
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>基础用法</span>
+        </div>
+        <el-row>
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+          </el-tabs>
+        </el-row>
+
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{base}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>选项卡样式</span>
+        </div>
+        <el-row>
+          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+          </el-tabs>
+        </el-row>
+
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{tabs}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>卡片化</span>
+        </div>
+        <el-row>
+          <el-tabs type="border-card">
+            <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+            <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+            <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+            <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+          </el-tabs>
+        </el-row>
+
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{card}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>位置</span>
+        </div>
+        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
+          <el-radio-button label="top">top</el-radio-button>
+          <el-radio-button label="right">right</el-radio-button>
+          <el-radio-button label="bottom">bottom</el-radio-button>
+          <el-radio-button label="left">left</el-radio-button>
+        </el-radio-group>
+
+        <el-tabs :tab-position="tabPosition" style="height: 200px;">
+          <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+          <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+          <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+        </el-tabs>
+
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{position}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>自定义</span>
+        </div>
+        <el-tabs type="border-card">
+          <el-tab-pane>
+            <span slot="label">
+              <i class="el-icon-date"></i> 我的行程
+            </span>
+            我的行程
+          </el-tab-pane>
+          <el-tab-pane label="消息中心">消息中心</el-tab-pane>
+          <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+        </el-tabs>
+
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{define}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: 'second',
+      tabPosition: 'left',
+      base: `     
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+          </el-tabs>`,
+      tabs: `
+           <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+          </el-tabs>`,
+      card: `
+          <el-tabs type="border-card">
+            <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+            <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+            <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+            <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+          </el-tabs>`,
+      position: `
+          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
+            <el-radio-button label="top">top</el-radio-button>
+            <el-radio-button label="right">right</el-radio-button>
+            <el-radio-button label="bottom">bottom</el-radio-button>
+            <el-radio-button label="left">left</el-radio-button>
+          </el-radio-group>
+
+          <el-tabs :tab-position="tabPosition" style="height: 200px;">
+            <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+            <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+            <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+            <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+          </el-tabs>`,
+      define: `
+          <el-tabs type="border-card">
+            <el-tab-pane>
+              <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
+              我的行程
+            </el-tab-pane>
+            <el-tab-pane label="消息中心">消息中心</el-tab-pane>
+            <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+            <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+          </el-tabs>
+      `,
+    }
+  },
+  components: {},
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/container.scss";
+</style>

tests/unit/LIcon.test.js

@@ -1,12 +1,13 @@
-import {  mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import LIcon from '@/components/base/icon/lin-icon.vue'
 
 describe('LIcon', () => {
-  let wrapper, vm;
+  const wrapper
+  let vm
   beforeEach(() => {
-    wrapper = mount(LIcon);
+    wrapper = mount(LIcon)
     vm = wrapper.vm
-  });
+  })
   it('Icon.vue', () => {
     mount(LIcon)
     expect(LIcon).toBe.ok
@@ -32,7 +33,9 @@ describe('LIcon', () => {
     expect(wrapper.find('svg').element.style.height).toBe('30px')
   })
   it('综合测试', () => {
-    wrapper.setProps({ name: 'loading',color: '#ccc', width: '30px', height: '30px' })
+    wrapper.setProps({
+      name: 'loading', color: '#ccc', width: '30px', height: '30px',
+    })
     const elements = vm.$el.querySelectorAll('use')
     expect(elements.length).toBe(1)
     expect(elements[0].getAttribute('xlink:href')).toBe('#icon-loading')