Skip to content

R
rym-element-ui
Commit e04368d2 by 姜雷
Options

抽离列表布局,导航栏,分页器

parent 457280ca
Showing with 588 additions and 138 deletions
components.json
{
"Layout": "./src/components/Layout",
"AppLayout": "./src/components/Layout",
"ListLayout": "./src/components/ListLayout",
"SidebarNav": "./src/components/Sidebar",
"MdPagination": "./src/components/Pagination",
"SearchItem": "./src/components/SearchItem",
"DatePicker": "./src/components/DatePicker",
"DateRangePicker": "./src/components/DateRangePicker"
......
examples/App.vue
<template>
<div id="app">
<app-layout>
<template slot="nav">
<sidebar-nav :routers="route" />
</template>
<router-view></router-view>
</app-layout>
</div>
......@@ -9,6 +12,15 @@
<script>
export default {
name: "app",
created() {
console.log(this.route);
},
props: {
route: {
type: Array,
default: () => []
}
},
data() {
let dataList = [];
for (let index = 0; index < 20; index++) {
......@@ -27,14 +39,6 @@ export default {
total: 123
}
};
},
methods: {
changePage(index) {
console.log(index);
},
changeSizeHandle(size) {
console.log(size);
}
}
};
</script>
......
examples/Layout.vue deleted 100644 → 0
<template>
<div class="app-wrapper">
<div class="topTitle">
<div class="com-logo">
<img src="../src/assets/images/logo.png" alt="logo" />
</div>
<h1 class="com-title">后台管理系统</h1>
</div>
<div class="body-container">
<div class="main-container"><slot></slot></div>
</div>
</div>
</template>
<style lang="scss">
@import '../src/assets/styles/variables.scss';
.app-wrapper {
.com-logo {
width: 80px;
height: 30px;
}
@media screen and (min-width: $bigScreenWidth) {
.com-logo {
width: 138px;
height: 44px;
}
}
.com-title {
flex: 1;
height: 24px;
line-height: 24px;
font-size: 14px;
font-weight: normal;
color: #fff;
text-indent: 6px;
}
}
</style>
<script>
export default {
name: 'layout',
computed: {
sidebar() {
return this.$store.state.app.sidebar;
},
},
};
</script>
examples/containers/DatePicker.vue
<template>
<div>
<list-layout>
<div class="components-demo-wrap">
<date-picker v-model="filters.dateTime" />
</div>
<div class="components-demo-wrap">
<date-range-picker v-model="filters.dateRange" />
</div>
</div>
</list-layout>
</template>
<script>
......
examples/containers/Home.vue
<template>
<div>
<list-layout>
<ul>
<li>
<router-link to="DatePicker">DatePicker Demo</router-link>
......@@ -7,6 +7,9 @@
<li>
<router-link to="SearchItem">SearchItem Demo</router-link>
</li>
<li>
<router-link to="Pagination">Pagination Demo</router-link>
</li>
</ul>
</div>
</list-layout>
</template>
\ No newline at end of file
examples/containers/NormalLayout.vue 0 → 100644
<template>
<router-view>
</router-view>
</template>
\ No newline at end of file
examples/containers/Pagination.vue 0 → 100644
<template>
<list-layout>
<template slot="footer">
<md-pagination
:pagination="pagination"
:changePage="changePage"
:changeSizeHandle="changeSizeHandle"
/>
</template>
</list-layout>
</template>
<script>
export default {
name: "paginationPage",
data() {
return {
pagination: {
pageNum: 1,
pageSize: 10,
total: 88815
}
};
},
methods: {
changePage(index) {
console.log(index);
},
changeSizeHandle(size) {
console.log(size);
}
}
};
</script>
examples/containers/SearchItem.vue
<template>
<div>
<div class="components-demo-wrap">
<list-layout>
<template slot="filterItem">
<search-item label="默认">
<date-picker v-model="filters.dateTime" />
</search-item>
......@@ -10,8 +10,8 @@
>
<date-picker v-model="filters.dateTime" />
</search-item>
</div>
</div>
</template>
</list-layout>
</template>
<script>
......
examples/main.js
import Vue from 'vue';
import App from './App.vue';
import route from './route';
import route, { routerMap } from './route';
import rymUi from '../src/index';
import 'normalize.css/normalize.css';
......@@ -9,6 +9,6 @@ Vue.use(rymUi);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
render: h => <App route={routerMap} />,
router: route,
}).$mount('#app');
examples/route.js
......@@ -3,13 +3,46 @@ import Router from 'vue-router';
import Home from './containers/Home.vue';
import DatePicker from './containers/DatePicker.vue';
import SearchItem from './containers/SearchItem.vue';
import Pagination from './containers/Pagination.vue';
Vue.use(Router);
const routerMap = [
{ path: '', component: Home },
{ path: '/DatePicker', component: DatePicker },
{ path: '/SearchItem', component: SearchItem },
export const routerMap = [
{ path: '/', name: 'Home', component: Home, meta: { title: '首页' } },
{
path: '/DatePicker',
name: 'DatePicker',
component: DatePicker,
meta: { title: '时间选择' },
},
{
path: '/layout',
name: 'layout',
meta: { title: '列表布局' },
component: { render: h => <router-view /> },
children: [
{
path: 'SearchItem',
name: 'SearchItem',
component: SearchItem,
meta: { title: '搜索栏' },
},
],
},
{
path: '/baseCom',
name: 'baseCom',
component: { render: h => <router-view /> },
meta: { title: '基础组件' },
children: [
{
path: 'Pagination',
name: 'Pagination',
component: Pagination,
meta: { title: '分页器' },
},
],
},
];
export default new Router({
......
src/assets/styles/element-ui.scss
......@@ -53,11 +53,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
.el-select {
width: 100%;
}
.el-submenu .el-menu-item,
.el-submenu__title {
height: 40px;
line-height: 40px;
}
.el-input__inner,
.el-button {
height: 22px;
......@@ -72,11 +68,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
}
}
@media screen and (min-width: $bigScreenWidth) {
.el-submenu .el-menu-item,
.el-submenu__title {
height: 56px;
line-height: 56px;
}
.el-input__inner,
.el-button {
height: 40px;
......
src/assets/styles/variables.scss
// media min-width
$bigScreenWidth: 1600px;
//sidebar
$sideBar-width: 112px;
$sideBar-width: 132px;
$menuBg: #477cfa;
$subMenuBg: #306bf6;
$menuHover: #1459fc;
......
src/components/Layout/Layout.vue
......@@ -12,7 +12,7 @@
<div class="body-container">
<div class="sidebar-container">
<slot name="sidebar"></slot>
<slot name="nav"></slot>
</div>
<div class="main-container">
<slot></slot>
......@@ -58,26 +58,26 @@ body,
align-items: center;
transition: height 0.28s;
height: $topBar-height; // background-image: linear-gradient(90deg, #6895fe, #2362f6);
}
.com-logo {
width: 80px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 100%;
height: 100%;
.com-logo {
width: 80px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 100%;
height: 100%;
}
}
.com-title {
flex: 1;
height: 24px;
line-height: 24px;
font-size: 14px;
font-weight: normal;
color: #fff;
text-indent: 6px;
}
}
.com-title {
flex: 1;
height: 24px;
line-height: 24px;
font-size: 14px;
font-weight: normal;
color: #fff;
text-indent: 6px;
}
.body-container {
display: flex;
......@@ -127,21 +127,76 @@ body,
}
}
}
// 底部分页
.footer-wrap {
width: 100%;
height: $footer-height;
line-height: $footer-height;
background-color: #fff;
display: flex;
justify-content: flex-end;
.md-pagination {
font-size: 12px;
padding: 0;
padding-right: 12px;
.md-pager li {
line-height: $footer-height;
}
}
.footer-info {
text-indent: 20px;
flex: 1;
color: #666;
font-size: 12px;
}
}
.el-pagination span:not([class*="suffix"]),
.el-pagination button {
font-size: 12px;
}
}
@media screen and (min-width: $bigScreenWidth) {
$sideBar-width: 132px;
$topBar-height: 72px;
$footer-height: 48px;
.app-wrapper {
.topTitle {
height: $topBar-height; // background-image: linear-gradient(90deg, #6895fe, #2362f6);
.com-logo {
width: 138px;
height: 44px;
}
}
.com-logo {
width: 138px;
height: 44px;
.body-container {
height: calc(100vh - #{$topBar-height});
}
.sidebar-container {
width: $sideBar-width;
}
.main-container {
height: calc(100vh - #{$topBar-height});
.main-wrap {
.main-wrap-inner {
height: calc(100% - #{$footer-height});
}
}
}
.footer-wrap {
height: $footer-height;
line-height: $footer-height;
.md-pagination {
.md-pager li {
line-height: $footer-height;
}
}
.footer-info {
font-size: 14px;
}
}
.el-pagination span:not([class*="suffix"]),
.el-pagination button {
font-size: 14px;
}
}
}
</style>
src/components/ListLayout/index.js 0 → 100644
import ListLayout from './ListLayout.vue';
ListLayout.install = Vue => {
Vue.component(ListLayout.name, ListLayout);
};
export default ListLayout;
src/components/Pagination/index.js
import Pagination from './Pagination.vue';
import MdPagination from './paginationWrap';
export default {
name: 'md-pagination',
props: {
pagination: {
type: Object,
default: {
pageNum: 1,
pageSize: 10,
total: 0,
},
},
changePage: Function,
changeSizeHandle: Function,
},
render(h) {
return (
<Pagination
class="md-pagination"
currentPage={this.pagination.pageNum}
pageSize={this.pagination.pageSize}
total={this.pagination.total}
onCurrent-change={this.changePage}
onSize-change={this.changeSizeHandle}
/>
);
},
MdPagination.install = Vue => {
Vue.component(MdPagination.name, MdPagination);
};
export default MdPagination;
src/components/Pagination/paginationWrap.js 0 → 100644
import Pagination from './Pagination.vue';
export default {
name: 'md-pagination',
props: {
pagination: {
type: Object,
default: {
pageNum: 1,
pageSize: 10,
total: 0,
},
},
changePage: Function,
changeSizeHandle: Function,
},
render(h) {
return (
<Pagination
class='md-pagination'
currentPage={this.pagination.pageNum}
pageSize={this.pagination.pageSize}
total={this.pagination.total}
onCurrent-change={this.changePage}
onSize-change={this.changeSizeHandle}
/>
);
},
};
src/components/Sidebar/Sidebar.vue 0 → 100644
<template>
<scroll-bar class="navbar">
<el-menu
mode="vertical"
:default-active="$route.path"
unique-opened
background-color="transparent"
text-color="#a9c2fb"
active-text-color="#fff"
ref="menu"
>
<sidebar-item :routes="routers"></sidebar-item>
</el-menu>
</scroll-bar>
</template>
<script>
import Vue from "vue";
import SidebarItem from "./SidebarItem";
import ScrollBar from "@/components/ScrollBar";
import { Menu, MenuItem, Submenu } from "element-ui";
// import { constantRouterMap } from "../../../../router/index.js";
Vue.component(Menu.name, Menu);
Vue.component(Submenu.name, Submenu);
Vue.component(MenuItem.name, MenuItem);
export default {
name: "sidebar-nav",
components: {
SidebarItem,
ScrollBar
},
props: {
routers: {
type: Array,
default: () => []
}
},
watch: {
$route(newRoute, oldRoute) {
if (newRoute.matched.length === 1 && oldRoute.matched.length > 1) {
this.$refs.menu.close(
oldRoute.matched[0].name || oldRoute.matched[0].path
);
}
}
},
computed: {
isCollapse() {
return this.$route.matched.length === 2;
}
}
};
</script>
<style lang="scss">
@import "../../assets/styles/variables.scss";
.navbar {
transition: width 0.28s;
width: $sideBar-width;
height: 100%;
z-index: 1001;
overflow: hidden;
// background-image: linear-gradient(0deg, #2362f6, #6895fe);
a {
display: inline-block;
text-decoration: none;
width: 100%;
}
.svg-icon {
margin-right: 6px;
}
.img-icon {
width: 8px;
height: 8px;
margin-right: 6px;
}
.el-menu {
border: none;
width: 100%;
}
.hideSidebar {
.sidebar-container,
.sidebar-container .el-menu {
width: 40px;
// overflow: inherit;
}
.main-container {
margin-left: 40px;
}
}
.hideSidebar {
.submenu-title-noDropdown {
padding-left: 10px;
position: relative;
span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
transition: opacity 3s cubic-bezier(0.55, 0, 0.1, 1);
opacity: 0;
display: inline-block;
}
&:hover {
span {
display: block;
border-radius: 3px;
z-index: 1002;
width: 140px;
height: 56px;
visibility: visible;
position: absolute;
right: -145px;
text-align: left;
text-indent: 20px;
top: 0px;
background-color: $subMenuBg !important;
opacity: 1;
}
}
}
.el-submenu {
& > .el-submenu__title {
padding-left: 10px !important;
& > span {
display: none;
}
.el-submenu__icon-arrow {
display: none;
}
}
.nest-menu {
.el-submenu__icon-arrow {
display: block !important;
}
span {
display: inline-block !important;
}
}
}
}
.el-menu-item,
.el-submenu .el-menu-item,
.el-submenu__title {
height: 40px;
line-height: 40px;
padding: 0 0 0 8px !important;
font-size: 12px;
}
.el-menu-item {
&:hover {
background-color: $menuHover !important;
}
&.is-active {
background-color: $menuHover !important;
}
.menu-arrow {
position: absolute;
top: 10px;
right: 0;
border-right: 8px solid #004cff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
&.is-active .menu-arrow {
border-right-color: #eee;
}
}
.nest-menu .el-submenu > .el-submenu__title,
.el-submenu .el-menu-item {
background-color: $subMenuBg !important;
width: $sideBar-width;
min-width: $sideBar-width;
text-align: center;
&:hover {
background-color: $menuHover !important;
}
&.is-active {
background-color: $menuActions !important;
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: 132px !important;
}
.el-submenu {
.el-submenu__icon-arrow {
right: 8px;
margin-top: -5px;
}
.el-submenu__title {
background-color: transparent !important;
position: relative;
display: flex;
align-items: center;
&::after {
content: "";
position: absolute;
z-index: 2;
bottom: -5px;
left: 0;
right: 0;
width: 100%;
height: 5px;
background-image: linear-gradient(180deg, #1252e9, transparent);
transition: all 0.28s 0.28s;
opacity: 0;
}
}
.el-menu-item {
text-align: left;
text-indent: 20px;
}
&.is-opened {
.el-submenu__title {
color: #fff !important;
background-color: $subMenuBg !important;
&::after {
opacity: 1;
}
}
}
}
}
@media screen and (min-width: $bigScreenWidth) {
$sideBar-width: 132px;
.navbar {
width: $sideBar-width;
.img-icon {
width: 16px;
height: 16px;
margin-right: 6px;
}
.el-menu-item,
.el-submenu .el-menu-item,
.el-submenu__title {
height: 56px;
line-height: 56px;
padding: 0 0 0 12px !important;
font-size: 14px;
}
.el-menu-item {
.menu-arrow {
top: 18px;
}
}
.nest-menu .el-submenu > .el-submenu__title,
.el-submenu .el-menu-item {
width: $sideBar-width;
min-width: $sideBar-width;
}
.el-submenu {
.el-menu-item {
text-indent: 25px;
}
}
}
}
</style>
src/components/Sidebar/SidebarItem.vue 0 → 100644
<template>
<div class="menu-wrapper">
<template v-for="item in routes">
<el-submenu
v-if="!item.hidden&&item.children"
:index="item.name||item.path"
:key="item.name"
>
<template slot="title">
<img-icon
v-if="item.meta&&item.meta.icon"
:iconName="item.meta.icon"
></img-icon>
<span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
</template>
<template v-for="child in item.children">
<template v-if="!child.hidden">
<sidebar-item
:is-nest="true"
class="nest-menu"
v-if="child.children&&child.children.length>0"
:routes="[child]"
:key="child.path"
></sidebar-item>
<router-link
v-else
:to="item.path+'/'+child.path"
:key="child.name"
>
<el-menu-item :index="item.path+'/'+child.path">
<!-- <svg-icon
v-if="child.meta&&child.meta.icon"
:icon-class="child.meta.icon"
></svg-icon> -->
<span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
<span class="menu-arrow"></span>
</el-menu-item>
</router-link>
</template>
</template>
</el-submenu>
<router-link
v-else
:key="item.name"
:to="item.path"
>
<el-menu-item :index="item.path">
<span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
<span class="menu-arrow"></span>
</el-menu-item>
</router-link>
</template>
</div>
</template>
<script>
export default {
name: "SidebarItem",
props: {
routes: {
type: Array
},
isNest: {
type: Boolean,
default: false
}
}
};
</script>
<style lang="scss">
.menu-wrapper {
.el-submenu__title i {
color: #fff;
transform: rotate(-90deg);
}
.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
transform: rotate(0deg);
}
}
</style>
src/components/Sidebar/index.js 0 → 100644
import Sidebar from './Sidebar.vue';
Sidebar.install = Vue => {
Vue.component(Sidebar.name, Sidebar);
};
export default Sidebar;
src/index.js
import Layout from './components/Layout/index';
import AppLayout from './components/Layout/index';
import ListLayout from './components/ListLayout/index';
import SidebarNav from './components/Sidebar/index';
import MdPagination from './components/Pagination/index';
import SearchItem from './components/SearchItem/index';
import DatePicker from './components/DatePicker/index';
import DateRangePicker from './components/DateRangePicker/index';
......@@ -6,9 +9,12 @@ import { Option } from 'element-ui';
const install = Vue => {
// Layout
Vue.component(Layout.name, Layout);
Vue.component(AppLayout.name, AppLayout);
Vue.component(ListLayout.name, ListLayout);
Vue.component(SearchItem.name, SearchItem);
// 基础组件
Vue.component(SidebarNav.name, SidebarNav);
Vue.component(MdPagination.name, MdPagination);
// Element-ui
Vue.component(Option.name, Option);
// input
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment