add scroll-bar

gesions · Apr 16, 2018 · d09b980 · d09b980
1 parent 5b3de41
commit d09b980
Show file tree

Hide file tree

Showing 13 changed files with 589 additions and 43 deletions.
diff --git a/build/webpack.prod.config.js b/build/webpack.prod.config.js
@@ -82,4 +82,4 @@ module.exports = merge(webpackBaseConfig, {
             inject: false
         })
     ]
-});
+});
diff --git a/src/router/router.js b/src/router/router.js
@@ -146,6 +146,13 @@ export const appRouter = [
                 title: '文件上传',
                 component: () => import('@/views/my-components/file-upload/file-upload.vue')
             },
+            {
+                path: 'scroll-bar',
+                icon: 'android-upload',
+                name: 'scroll-bar',
+                title: '滚动条',
+                component: () => import('@/views/my-components/scroll-bar/scroll-bar-page.vue')
+            },
             {
                 path: 'count-to',
                 icon: 'arrow-graph-up-right',

diff --git a/src/views/Main.vue b/src/views/Main.vue
@@ -4,18 +4,20 @@
 <template>
     <div class="main" :class="{'main-hide-text': shrink}">
         <div class="sidebar-menu-con" :style="{width: shrink?'60px':'200px', overflow: shrink ? 'visible' : 'auto'}">
-            <shrinkable-menu 
-                :shrink="shrink"
-                @on-change="handleSubmenuChange"
-                :theme="menuTheme" 
-                :before-push="beforePush"
-                :open-names="openedSubmenuArr"
-                :menu-list="menuList">
-                <div slot="top" class="logo-con">
-                    <img v-show="!shrink"  src="../images/logo.jpg" key="max-logo" />
-                    <img v-show="shrink" src="../images/logo-min.jpg" key="min-logo" />
-                </div>
-            </shrinkable-menu>
+            <scroll-bar ref="scrollBar">
+                <shrinkable-menu 
+                    :shrink="shrink"
+                    @on-change="handleSubmenuChange"
+                    :theme="menuTheme" 
+                    :before-push="beforePush"
+                    :open-names="openedSubmenuArr"
+                    :menu-list="menuList">
+                    <div slot="top" class="logo-con">
+                        <img v-show="!shrink"  src="../images/logo.jpg" key="max-logo" />
+                        <img v-show="shrink" src="../images/logo-min.jpg" key="min-logo" />
+                    </div>
+                </shrinkable-menu>
+            </scroll-bar>
         </div>
         <div class="main-header-con" :style="{paddingLeft: shrink?'60px':'200px'}">
             <div class="main-header">
@@ -75,6 +77,7 @@
     import themeSwitch from './main-components/theme-switch/theme-switch.vue';
     import Cookies from 'js-cookie';
     import util from '@/libs/util.js';
+    import scrollBar from '@/views/my-components/scroll-bar/vue-scroller-bars';
     
     export default {
         components: {
@@ -84,7 +87,8 @@
             fullScreen,
             lockScreen,
             messageTip,
-            themeSwitch
+            themeSwitch,
+            scrollBar
         },
         data () {
             return {
@@ -174,6 +178,9 @@
             },
             fullscreenChange (isFullScreen) {
                 // console.log(isFullScreen);
+            },
+            scrollBarResize () {
+                this.$refs.scrollBar.resize();
             }
         },
         watch: {
@@ -188,14 +195,23 @@
             },
             lang () {
                 util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
+            },
+            openedSubmenuArr () {
+                setTimeout(() => {
+                    this.scrollBarResize();
+                }, 300)
             }
         },
         mounted () {
             this.init();
+            window.addEventListener('resize', this.scrollBarResize);
         },
         created () {
             // 显示打开的页面的列表
             this.$store.commit('setOpenedList');
+        },
+        dispatch () {
+            window.removeEventListener('resize', this.scrollBarResize);
         }
     };
 </script>
diff --git a/src/views/main-components/shrinkable-menu/components/sidebarMenu.vue b/src/views/main-components/shrinkable-menu/components/sidebarMenu.vue
@@ -3,7 +3,7 @@
 </style>
 
 <template>
-    <Menu ref="sideMenu" :active-name="$route.name" :open-names="openNames" :theme="menuTheme" width="auto" @on-select="changeMenu">
+    <Menu ref="sideMenu" :active-name="$route.name" :open-names="openNames" :theme="menuTheme" width="auto"z @on-select="changeMenu">
         <template v-for="item in menuList">
             <MenuItem v-if="item.children.length<=1" :name="item.children[0].name" :key="'menuitem' + item.name">
                 <Icon :type="item.children[0].icon || item.icon" :size="iconSize" :key="'menuicon' + item.name"></Icon>

diff --git a/src/views/main.less b/src/views/main.less
@@ -27,6 +27,7 @@
         left: 0;
         z-index: 21;
         transition: width .3s;
+        background: rgb(73, 80, 96)
     }
     .layout-text{
         display: inline-block;

diff --git a/src/views/my-components/area-linkage/area-linkage.vue b/src/views/my-components/area-linkage/area-linkage.vue
@@ -28,6 +28,9 @@
                         <pre>
 &lt;al-cascader v-model="res1" /&gt;
                         </pre>
+                        <Button @click="setAreaOne">set city</Button>
+                        <Button @click="setAreaTwo">set city</Button>
+                        <Button @click="setAreaThree">set city</Button>
                         <div>
                             <p>更多配置可参考iview-area组件官方文档：<a href="https://github.com/iview/iview-area" target="_block">iview-area</a></p>
                         </div>
@@ -179,18 +182,18 @@
 </template>
 
 <script>
-// import alSelector from './components/al-selector.vue';
-// import alCascader from './components/al-cascader.vue';
+import alSelector from './components/al-selector.vue';
+import alCascader from './components/al-cascader.vue';
 
-import Vue from 'vue';
-import iviewArea from 'iview-area';
-Vue.use(iviewArea);
+// import Vue from 'vue';
+// import iviewArea from 'iview-area';
+// Vue.use(iviewArea);
 
 export default {
-    // components: {
-    //     alSelector,
-    //     alCascader
-    // },
+    components: {
+        alSelector,
+        alCascader
+    },
     data () {
         return {
             res1: [],
@@ -201,6 +204,15 @@ export default {
     methods: {
         renderFormat (label) {
             return label.join(' => ');
+        },
+        setAreaOne () {
+            this.resDefault = ['北京市', '市辖区', '东城区', '东华门街道'];
+        },
+        setAreaTwo () {
+            this.resDefault = ['山西省', '太原市', '小店区', '北营街道'];
+        },
+        setAreaThree () {
+            this.resDefault = ['130000', '130700', '130730', '130730100000'];
         }
     },
     watch: {

diff --git a/src/views/my-components/scroll-bar/scroll-bar-page.vue b/src/views/my-components/scroll-bar/scroll-bar-page.vue
@@ -0,0 +1,102 @@
+<template>
+	<div>
+		<Row :gutter="10">
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar
+							scroll-y-type="inner"
+						>
+							<p v-for="i in 100" :key="`item-${i}`">item - {{ i }}</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar>
+							<p class="list-item" v-for="i in 6" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar show-all>
+							<p v-for="i in 100" :key="`item-${i}`">item - {{ i }}</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar show-all>
+							<p class="list-item" v-for="i in 6" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+		</Row>
+		<Row :style="{marginTop: '10px'}" :gutter="10">
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar show-all dis-scroll-x>
+							<p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar show-all dis-scroll-y>
+							<p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar show-all scroll-x="none">
+							<p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+			<Col span="6">
+				<Card :padding="4">
+					<div class="scroll-container">
+						<scroll-bar>
+							<p class="list-item" v-for="i in 100" :key="`item-${i}`">item - {{ i }} - item-long-show-x-scrollbar- long-text-make-scroller-x-show-and-useable - item-long-show-x-scrollbar</p>
+						</scroll-bar>
+					</div>
+				</Card>
+			</Col>
+		</Row>
+	</div>
+</template>
+
+<script>
+import scrollBar from './vue-scroller-bars';
+export default {
+	name: 'scroll-bar-page',
+	components: {
+		scrollBar
+	}
+}
+</script>
+
+<style lang="less">
+.scroll-container{
+	height: 260px;
+}
+.list-item{
+	word-break: keep-all;
+	white-space: nowrap;
+}
+</style>
diff --git a/src/views/my-components/scroll-bar/vue-scroller-bars/index.js b/src/views/my-components/scroll-bar/vue-scroller-bars/index.js
@@ -0,0 +1,3 @@
+import scrollBar from './scroll-bar.vue';
+
+export default scrollBar;
diff --git a/src/views/my-components/scroll-bar/vue-scroller-bars/scroll-bar.less b/src/views/my-components/scroll-bar/vue-scroller-bars/scroll-bar.less
@@ -0,0 +1,90 @@
+@prefix: ~'vue-scroller-bars';
+
+.@{prefix}{
+	&-wraper{
+		height: 100%;
+    	width: 100%;
+		overflow: hidden;
+		position: relative;
+		&.show-when-hover{
+			.@{prefix}-scroll{
+				opacity: 0;
+			}
+			.@{prefix}-place-holder{
+				opacity: 0;
+			}
+		}
+		&.show-when-hover:hover{
+			.@{prefix}-scroll{
+				opacity: 1;
+			}
+			.@{prefix}-place-holder{
+				opacity: 1;
+			}
+		}
+	}
+	&-content{
+		position: absolute;
+		min-width: 100%;
+		left: 0;
+		top: 0;
+	}
+	&-scroll{
+		position: relative;
+		transition: opacity .3s ease .2s;
+		background: rgba(250, 250, 250, 1);
+		box-sizing: border-box;
+		padding: 1px 2px;
+		z-index: 9999999;
+		&:hover &-bar{
+			background: rgb(100, 100, 100);
+		}
+		&-y{
+			width: 14px;
+			height: 100%;
+			float: right;
+			border-left: 1px solid rgba(190, 190, 190, .5);
+			border-right: 1px solid rgba(190, 190, 190, .5);
+			&.scroll-y-cover{
+				position: absolute;
+				right: 0px;
+				top: 0px;
+			}
+		}
+		&-x{
+			width: 100%;
+			height: 14px;
+			float: right;
+			border-top: 1px solid rgba(190, 190, 190, .5);
+			border-bottom: 1px solid rgba(190, 190, 190, .5);
+			&.scroll-x-cover{
+				position: absolute;
+				left: 0px;
+				bottom: 0px;
+			}
+		}
+		&-bar{
+			background: rgba(190, 190, 190, 1);
+			position: absolute;
+			border-radius: 4px;
+			transition: background .2s ease;
+			&-y{
+				width: ~'calc(100% - 4px)';
+				min-height: 14px;
+			}
+			&-x{
+				height: ~'calc(100% - 4px)';
+				min-width: 14px;
+			}
+		}
+	}
+	&-place-holder{
+		position: absolute;
+		transition: opacity .3s ease .2s;
+		right: 0px;
+		bottom: 0px;
+		width: 14px;
+		height: 14px;
+		background: rgba(250, 250, 250, 1);
+	}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -82,4 +82,4 @@ module.exports = merge(webpackBaseConfig, { @@
                 inject: false
             })
         ]
-    });
+    });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import scrollBar from './scroll-bar.vue';

		export default scrollBar;