Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

美化左侧div宽度拖拉 按钮

Browse Source
This commit is contained in:
WangHao
2020-10-03 17:38:46 +08:00
parent d869b770e3
commit 96186a3b07
3 changed files with 775 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ruoyi-ui/src/assets/styles/base.css
View File

@ -14,7 +14,7 @@
.header-listtxet{
display: none;
}
.transition-box{
.main-right{
width: 250px!important;
}
.tabBar{
@ -52,6 +52,9 @@
.transition-box{
display: none;
}
.isresize{
display: none;
}
.sousouleft-switch{
display: block;
}

132
ruoyi-ui/src/views/bookmark/ceshi/index.vue
View File

@ -1,37 +1,119 @@
<template>
<div>
<div style="width: 500px">
<tags-input
v-model="tagList"
:defaulList="defaulList"
:listFilter=true
placeholder="按enter键创建标签"
@tagClose="tagClose"></tags-input>
<template>
<div class="box" ref="box">
<div class="left">
<!--左侧div内容-->
</div>
<div class="resize" title="收缩侧边栏">
⋮
</div>
<div class="mid">
<!--右侧div内容-->
</div>
</div>
</template>
<script>
import TagsInput from '../../../components/TagsInput'
export default {
components: {
TagsInput
},
data() {
return {
// 子组件返回的list
tagList: null,
// 付默认值
defaulList:[],
// 是否去重
listFilter:false
}
name: 'Dashboard',
mounted () {
this.dragControllerDiv();
},
methods: {
// 标签关闭方法
tagClose(tag){
console.log(tag)
dragControllerDiv: function () {
var resize = document.getElementsByClassName('resize');
var left = document.getElementsByClassName('left');
var mid = document.getElementsByClassName('mid');
var box = document.getElementsByClassName('box');
for (let i = 0; i < resize.length; i++) {
// 鼠标按下事件
resize[i].onmousedown = function (e) {
//颜色改变提醒
resize[i].style.background = 'red';
var startX = e.clientX;
console.log("鼠标按下后："+e.clientX)
resize[i].left = resize[i].offsetLeft;
console.log("鼠标按下后："+resize[i].left)
console.log("鼠标按下后："+resize[i].offsetLeft)
// 鼠标拖动事件
document.onmousemove = function (e) {
var endX = e.clientX;
var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
resize[i].style.left = moveLen; // 设置左侧区域的宽度
for (let j = 0; j < left.length; j++) {
left[j].style.width = moveLen + 'px';
mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
}
};
// 鼠标松开事件
document.onmouseup = function (evt) {
//颜色恢复
resize[i].style.background = '#d6d6d6';
document.onmousemove = null;
document.onmouseup = null;
resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
};
resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
};
}
},
}
}
</script>
<style lang="scss" scoped>
/* 拖拽相关样式 */
/*包围div样式*/
.box {
width: 100%;
height: 100%;
margin: 1% 0px;
overflow: hidden;
box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}
/*左侧div样式*/
.left {
width: calc(32% - 10px); /*左侧初始化宽度*/
height: 100%;
background: #FFFFFF;
float: left;
}
/*拖拽区div样式*/
.resize {
cursor: col-resize;
float: left;
position: relative;
top: 45%;
background-color: #d6d6d6;
border-radius: 5px;
margin-top: -10px;
width: 10px;
height: 50px;
background-size: cover;
background-position: center;
/*z-index: 99999;*/
font-size: 32px;
color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
color: #444444;
}
/*右侧div'样式*/
.mid {
float: left;
width: 68%; /*右侧初始化宽度*/
height: 100%;
background: #fff;
box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
}
</style>

341
ruoyi-ui/src/views/bookmark/index/index.vue
View File

@ -1,12 +1,10 @@
<template>
<div >
<div class="box" ref="box">
<el-container >
<el-container class="box" ref="box">
<transition name="el-zoom-in-left" >
<el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box" style="overflow-x:hidden;overflow-y: hidden;">
<el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left"
style="overflow-x:hidden;overflow-y: hidden;">
<el-header class="aside-logo">
<!-- <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>-->
<div class="logoname">
@ -40,11 +38,9 @@
</div>
<div class="tabBar">
<div class="" style="width: 100%;height: 30px;background-color: #cacaca;float: left;text-align: center;line-height: 30px" >
<div class=""
style="width: 100%;height: 30px;background-color: #cacaca;float: left;text-align: center;line-height: 30px">
<i class="el-icon-folder-checked"></i>
<span>新的收藏集</span>
</div>
@ -58,12 +54,16 @@
</el-aside>
<!-- <el-footer class="aside-navigation">-->
<!-- </el-footer>-->
</transition>
<div class="isresize">
</div>
<!-- <el-drawer-->
<!-- title="我是标题"-->
<!-- :visible.sync="drawer"-->
@ -75,14 +75,16 @@
<!-- </el-drawer>-->
<!-- <el-button @click="isShowZtree = !isShowZtree">Click Me</el-button>-->
<el-container >
<el-container class="mid">
<el-header class="header-sousou" style="height: 50px">
<div class="sousou-left">
<div class="sousouleft-switch" @click="drawer = true"><i class="el-icon-s-unfold"/></div>
<div class="sousou-leftico" @click="drawer = true"><img src="https://favicon.lucq.fun/?url=https://www.baidu.com"/></div>
<div class="sousou-leftico" @click="drawer = true"><img
src="https://favicon.lucq.fun/?url=https://www.baidu.com"/></div>
</div>
<div class="sousou-input">
@ -108,7 +110,10 @@
</div>
<div class="sousouright-icon"><el-badge :value="5" :max="99" class="item" ><i class="el-icon-message-solid" style="font-size: 17px;"></i></el-badge></div>
<div class="sousouright-icon">
<el-badge :value="5" :max="99" class="item"><i class="el-icon-message-solid" style="font-size: 17px;"></i>
</el-badge>
</div>
<div class="sousouright-icon">
<el-dropdown trigger="click" size="small" :hide-on-click="false">
@ -116,7 +121,8 @@
<i class="el-icon-plus" style="font-size: 18px;"/>
</span>
<el-dropdown-menu slot="dropdown" class="sq-dropdown">
<el-dropdown-item class="filter-item" icon="el-icon-plus" @click.native="addbookmarkurl">添加连接</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" @click.native="addbookmarkurl">添加连接
</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="b">添加文本</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="d">导入书签</el-dropdown-item>
</el-dropdown-menu>
@ -126,13 +132,11 @@
</div>
<div class="header-list">
<el-dropdown trigger="click" size="small" :hide-on-click="false">
<span class="el-dropdown-link">
<el-avatar :size="28" src="https://up.raindrop.io/collection/templates/social-media-logos-6/97social.png"></el-avatar>
<el-avatar :size="28"
src="https://up.raindrop.io/collection/templates/social-media-logos-6/97social.png"></el-avatar>
</span>
<el-dropdown-menu slot="dropdown" class="sq-dropdown">
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="a">外观显示</el-dropdown-item>
@ -155,8 +159,8 @@
</el-container>
</el-container>
</el-container>
<!-- 编辑弹窗-->
@ -182,7 +186,8 @@
<!-- </el-form-item>-->
<el-form-item prop="menuOrder">
<div class="labelname">排序(小到大)</div><br/>
<div class="labelname">排序(小到大)</div>
<br/>
<el-input-number v-model="form.menuOrder" placeholder="计数器"></el-input-number>
</el-form-item>
@ -198,8 +203,6 @@
</el-dialog>
<!-- 添加链接-->
<!-- 添加或修改书签管理对话框 -->
<el-dialog title="添加连接" :visible.sync="addopen" width="500px" append-to-body>
@ -256,20 +259,20 @@
<el-form-item label="选择状态" prop="start">
<el-radio-group v-model="form.start" size="medium">
<el-radio v-for="(item, index) in bookmarkstatus" :key="index" :label="item.value"
:disabled="item.disabled">{{item.name}}</el-radio>
:disabled="item.disabled">{{item.name}}
</el-radio>
</el-radio-group>
</el-form-item>
<!-- 1.未读稍后再看 2 已读 2.續看-->
<el-form-item label="选择类型" prop="type">
<el-radio-group v-model="form.type" size="medium">
<el-radio v-for="(item, index) in bookmarktype" :key="index" :label="item.value"
:disabled="item.disabled">{{item.name}}</el-radio>
:disabled="item.disabled">{{item.name}}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="addbookmark">确 定</el-button>
@ -278,10 +281,6 @@
</el-dialog>
</div>
@ -301,6 +300,7 @@
import "../ztree/zTreeStyle.css"
import "../ztree/jquery.ztree.exedit.js"
import {listMenuByUserId} from "@/api/bookmark/menu";
export default {
name: 'areaTree',
components: {
@ -348,8 +348,7 @@
// 表单参数
form: {},
// 表单校验
rules: {
},
rules: {},
drawerS: false,
drawer: false,
direction: 'ltr',
@ -412,12 +411,19 @@
}],
asideHeight: {
height: "",
width:"",
}
}
},
mounted () {
window['editBookmark'] = (e) => {
this.editBookmark(e)
},
//div拖动
this.dragControllerDivs();
},
created() {
var that = this;
//书签菜单
@ -427,7 +433,59 @@
window.addEventListener('resize', this.getHeight);
this.getHeight()
},
methods: {
/**div拖拽宽度**/
dragControllerDivs: function () {
console.log("开始拖拽")
var resize = document.getElementsByClassName('isresize');
var left = document.getElementsByClassName('main-right');
var mid = document.getElementsByClassName('el-container mid is-vertical');
var box = document.getElementsByClassName('box');
var transition = document.getElementsByClassName('transition-box');
for (let i = 0; i < resize.length; i++) {
// 鼠标按下事件
resize[i].onmousedown = function (e) {
//颜色改变提醒
resize[i].style.background = 'transparent';
var startX = e.clientX;
console.log("鼠标按下后：" + e.clientX)
resize[i].left = resize[i].offsetLeft;
console.log("鼠标按下后：" + resize[i].left)
console.log("鼠标按下后：" + resize[i].offsetLeft)
// 鼠标拖动事件
document.onmousemove = function (e) {
var endX = e.clientX;
var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
resize[i].style.left = moveLen; // 设置左侧区域的宽度
for (let j = 0; j < left.length; j++) {
console.log("開始設置宽度")
left[j].style.width = moveLen + 'px';
// this.asideHeight.width = moveLen + 'px';
mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
}
};
// 鼠标松开事件
document.onmouseup = function (evt) {
//颜色恢复
resize[i].style.background = 'transparent';
document.onmousemove = null;
document.onmouseup = null;
resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
};
resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
};
}
},
/**自动获取高度**/
getHeight() {
@ -531,11 +589,6 @@
},
/** 转换书签菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
@ -658,7 +711,6 @@
var switchObjspan = $("#" + treeNode.tId + "_span");
// console.log("进入addHoverDom:统计"+treeNode.bookmarkCount+"_sz 的数量:"+confCount);
// console.log("addDiyDom:统计2"+$.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes()[0].bookmarkCount);
//console.log("addDiyDom:统计2"+$.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes()[0]);
@ -753,7 +805,6 @@
},
editBookmark: function (e) {
this.reset();
this.getTreeselect();
@ -829,11 +880,7 @@
},
mounted(){
window['editBookmark'] = (e) => {
this.editBookmark(e)
}
},
destroyed() {
window.removeEventListener('resize', this.getHeight)
},
@ -842,52 +889,107 @@
},
}
</script>
<style >
body {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.ztree li ul{ margin:0; padding:0}
.ztree li {line-height:32px}
.ztree li a {width:200px;height:32px;padding-top: 0px;font-size: 14px;width:100%}
.ztree li a:hover {text-decoration:none; background-color: #E5E5E5;}
.ztree li a span.button.switch {vertical-align:middle}
.ztree.showIcon li a span.button.switch {visibility:visible}
.ztree li a.curSelectedNode {background-color:#E5E5E5;border:0;height:32px;}
.ztree li span {line-height:32px;}
.ztree li span.button {margin-top: 0px;margin-left:2px;width: 20px;height: 20px;}
.ztree li ul {
margin: 0;
padding: 0
}
.ztree li span.button.switch {width: 20px;height: 20px;}
.ztree li {
line-height: 32px
}
.ztree li a {
width: 200px;
height: 32px;
padding-top: 0px;
font-size: 14px;
width: 100%
}
.ztree li a:hover {
text-decoration: none;
background-color: #E5E5E5;
}
.ztree li a span.button.switch {
vertical-align: middle
}
.ztree.showIcon li a span.button.switch {
visibility: visible
}
.ztree li a.curSelectedNode {
background-color: #E5E5E5;
border: 0;
height: 32px;
}
.ztree li span {
line-height: 32px;
}
.ztree li span.button {
margin-top: 0px;
margin-left: 2px;
width: 20px;
height: 20px;
}
.ztree li span.button.switch {
width: 20px;
height: 20px;
}
/*.ztree li a.level0 span {font-size: 100%;font-weight: bold}*/
.ztree li span.button {background-image:url("../ztree/bottom.png");}
.ztree li span.button.switch.level0 {width: 20px; height:20px}
.ztree li span.button.switch.level1 {width: 20px; height:20px}
.ztree li span.button.noline_open {background-position: 0 0;}
.ztree li span.button.noline_close {background-position: 0 0;background-image:url("../ztree/right.png");}
.ztree li span.button {
background-image: url("../ztree/bottom.png");
}
.ztree li span.button.switch.level0 {
width: 20px;
height: 20px
}
.ztree li span.button.switch.level1 {
width: 20px;
height: 20px
}
.ztree li span.button.noline_open {
background-position: 0 0;
}
.ztree li span.button.noline_close {
background-position: 0 0;
background-image: url("../ztree/right.png");
}
/*.ztree li span.button.noline_open.level0 {background-position: 0 0;}*/
/*.ztree li span.button.noline_close.level0 {background-position:-18px 0;}*/
.ztree li span.button.ico_close{vertical-align: middle}
.ztree li span.button.ico_close {
vertical-align: middle
}
.ztree li span.button.ico_open{vertical-align: middle}
.ztree li span.button.ico_open {
vertical-align: middle
}
.ztree li span.button.ico_docu {vertical-align: middle}
.ztree li span.button.ico_docu {
vertical-align: middle
}
.ztr {
@ -911,6 +1013,7 @@
overflow-y: hidden;
}
aside {
padding: 0;
margin-bottom: 0;
@ -929,32 +1032,39 @@
.aside-title {
height: 32px;
}
.aside-title:hover {
background-color: #c5c5c5;
}
.aside-title i {
margin-left: 26px;
font-size: 20px;
margin-right: 11px;
vertical-align: middle;
}
.aside-title span {
font-size: 14px;
margin-right: 11px;
}
.aside-logo {
display: flex;
align-items: center;
}
.aside-logo div {
width: 50%;
}
.logoname span {
margin-left: 8px;
font-family: "PingFang SC";
font-size: 20px;
font-weight: 400;
}
.logoright i {
float: right;
display: block;
@ -968,17 +1078,12 @@
}
.logoright i:active {
background-color: #7a6df0;
color: #FFFFFF;
}
.reminder {
margin-left: 27px;
color: #878787;
@ -993,6 +1098,7 @@
background-color: #a0c4ff;
}
.filter {
/*width: 100%;*/
/*height: 30px;*/
@ -1004,6 +1110,7 @@
display: flex;
flex-wrap: wrap;
}
.filter-sort {
color: #7e868d;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 -1px 0 rgba(0, 0, 0, .04);
@ -1017,6 +1124,7 @@
padding: 0 8px;
}
.filter-sort:hover {
color: #6f8eee;
background-color: #e6e6e6;
@ -1024,24 +1132,24 @@
}
.bookmarkmain {
padding-top: 0px !important;
}
.separator {
float: left;
}
.filter-sort i {
margin-left: -4px;
margin-right: -1px;
}
.filter div {
margin-bottom: 3px;
}
.header-sousou {
display: flex;
}
@ -1056,6 +1164,7 @@
}
.header-sousou input:focus {
background-color: #FFFFFF !important;
border: 1px solid #C0C4CC;
@ -1072,7 +1181,6 @@
}
.sousou-input {
width: 82.5%;
@ -1080,24 +1188,25 @@
}
.header-list {
/*line-height: 50px;*/
margin-top: 10px;
/*align-content: center;*/
/*justify-content: center;*/
}
.header-list:hover {
color: #7a6df0;
}
.header-list i {
font-size: 25px;
margin-right: 2px;
}
.main-label span i {
margin-left: 5px;
}
@ -1105,9 +1214,11 @@
.main-label span {
line-height: 22px;
}
.main-label :nth-child(1) {
margin-right: -1px;
}
.main-label :nth-child(2) {
margin-right: 5px;
}
@ -1135,6 +1246,7 @@
color: #545454;
font-size: 13px;
}
.bookmark {
height: 65px;
}
@ -1144,6 +1256,7 @@
margin-right: 5px;
}
.bookmark-icon img {
width: 14px;
height: 14px;
@ -1151,17 +1264,19 @@
}
.bookmark-official {
float: left;
}
.info {
font-size: 12px;
}
.info-wrap {
color: #8c8c8c;
}
.bookmark-time {
float: left;
@ -1173,6 +1288,7 @@
margin-top: 2px !important;
margin-bottom: 7px !important;
}
.sousouleft-switch {
width: 30px;
@ -1188,6 +1304,7 @@
opacity: 0.8;
}
.sousou-left {
display: flex;
}
@ -1224,24 +1341,29 @@
border-left: #8c8c8c 1px solid;
margin-left: 10px;
}
.bookmarklist {
width: 100%;
height: 600px;
/*background-color: #fff;*/
float: left
}
.sousouright-icon {
margin-right: 24px;
margin-top: 10px;
}
.sq-dropdown {
top: 33px !important;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .2) !important;
font-weight: 800 !important;
}
.sq-dropdown div {
display: none !important;
}
.labelname {
font-weight: 800;
color: rgb(0, 0, 0);
@ -1249,17 +1371,21 @@
margin-bottom: -10px;
margin-right: 5px;
}
.el-form-item__content {
margin-left: 0px !important;
}
.el-dialog__body {
padding-top: 0px !important;
}
.custom-input input {
border: 0px;
border-radius: 0px;
border-bottom: 1px solid #C0C4CC;
}
.custom-input input:focus {
border: 0px;
border-radius: 0px;
@ -1272,9 +1398,11 @@
border-radius: 0px;
border-bottom: 1px solid #409EFF;
}
.addbookmarkurl input:focus {
border-bottom: 1px solid #409EFF;
}
.addbookmarkurl input:hover {
border-bottom: 1px solid #409EFF;
@ -1296,11 +1424,13 @@
float: left;
font-size: 13px;
}
.addbookmarkurl-button {
float: left;
margin-left: 5px;
border: 1px solid #409EFF !important;
}
.addbookmarkurl-button:hover {
background-color: #409EFF !important;
color: #FFFFFF !important;
@ -1322,7 +1452,7 @@
.main-right {
/*overflow:scroll;*/
/*width: 300px;*/
width: 300px;
height: 85%;
min-height: 40%;
overflow: auto;
@ -1332,6 +1462,7 @@
z-index: 1;
}
.main-right::-webkit-scrollbar {
/*滚动条整体样式*/
width: 0px;
@ -1348,6 +1479,7 @@
}
/*定义滚动条轨道 内阴影+圆角 透明效果*/
::-webkit-scrollbar-track {
background-color: transparent;
@ -1360,14 +1492,47 @@
position: fixed;
bottom: 0;
}
.popover-suosou {
width: 70% !important;
top: 40px;
left: 72px;
}
/* 拖拽相关样式 */
/*包围div样式*/
/*拖拽区div样式*/
.isresize {
background-color: transparent ;
/*border-radius: 6px;*/
width: 12px;
/*height: 50px;*/
font-size: 25px;
color: white;
/*margin-top: 23%;*/
}
/*拖拽区鼠标悬停样式*/
.isresize:hover {
/*color: #f2f2f2;*/
/*color: #f2f2f2;*/
}
.isresize i{
line-height: 36px;
transform: rotate(90deg);
width: 8px;
}
.main-right{
min-width: 250px;
}
.box{
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
}
</style>