toesbieya
6 years ago
parent
c44753a0ce
commit
b449fbfa7b
@ -1,250 +0,0 @@ |
|||||||
// cover some element-ui styles |
|
||||||
.el-alert { |
|
||||||
&--info.is-light { |
|
||||||
color: #606266; |
|
||||||
background-color: #f0faff; |
|
||||||
border: 1px solid #abdcff; |
|
||||||
|
|
||||||
.el-icon-info { |
|
||||||
color: $--color-primary; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-button { |
|
||||||
[class*="el-icon-"] + span { |
|
||||||
margin-left: 7px; |
|
||||||
} |
|
||||||
|
|
||||||
//按钮新增类型type=dashed |
|
||||||
&.el-button--dashed { |
|
||||||
border-style: dashed; |
|
||||||
} |
|
||||||
|
|
||||||
&.el-button--small { |
|
||||||
font-size: 14px; |
|
||||||
padding: 8px 15px; |
|
||||||
|
|
||||||
&.is-circle { |
|
||||||
padding: 8px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-card { |
|
||||||
overflow: visible; |
|
||||||
|
|
||||||
.el-card__body { |
|
||||||
height: 100%; |
|
||||||
|
|
||||||
@include clearfix; |
|
||||||
} |
|
||||||
|
|
||||||
.el-card__header + .el-card__body { |
|
||||||
height: calc(100% - 55px); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-date-editor.el-input, |
|
||||||
.el-date-editor--daterange { |
|
||||||
width: 100% !important; |
|
||||||
} |
|
||||||
|
|
||||||
.el-dialog { |
|
||||||
@include deep-shadow; |
|
||||||
|
|
||||||
margin-bottom: 0; |
|
||||||
min-width: 384px; |
|
||||||
|
|
||||||
.el-dialog__header { |
|
||||||
border-bottom: 1px solid #EBEEF5; |
|
||||||
padding: 17px; |
|
||||||
|
|
||||||
.el-dialog__title { |
|
||||||
line-height: inherit; |
|
||||||
color: inherit; |
|
||||||
font-size: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
.el-dialog__headerbtn { |
|
||||||
top: 18px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-dialog__footer { |
|
||||||
border-top: 1px solid #EBEEF5; |
|
||||||
padding: 10px 16px; |
|
||||||
} |
|
||||||
|
|
||||||
.el-scrollbar__wrap { |
|
||||||
//53 for dialog header,53 for dialog footer |
|
||||||
max-height: calc(100vh - 53px - 53px - #{$dialog-top * 2}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-drawer { |
|
||||||
&__body { |
|
||||||
overflow-y: overlay; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-loading-mask { |
|
||||||
background: #ffffff; |
|
||||||
color: $--color-primary; |
|
||||||
} |
|
||||||
|
|
||||||
.el-menu { |
|
||||||
width: 100%; |
|
||||||
border: none !important; |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
&::-webkit-scrollbar { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
//子级菜单激活时，父级同样高亮 |
|
||||||
.el-menu-item.is-active, |
|
||||||
.is-active > .el-submenu__title { |
|
||||||
color: $--color-primary !important; |
|
||||||
} |
|
||||||
|
|
||||||
//箭头图标与字体同色 |
|
||||||
.el-submenu__title i { |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
//原先垂直时右侧展开箭头偏上 |
|
||||||
.el-submenu__icon-arrow { |
|
||||||
margin-top: -4px; |
|
||||||
} |
|
||||||
|
|
||||||
//弹出菜单 |
|
||||||
&.el-menu--popup { |
|
||||||
max-height: 88vh; |
|
||||||
min-width: 160px; |
|
||||||
padding: 0; |
|
||||||
margin-bottom: 0.5vh; |
|
||||||
overflow-y: auto; |
|
||||||
|
|
||||||
.el-menu-item, |
|
||||||
.el-submenu__title { |
|
||||||
padding: 0 $menu-padding; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&--horizontal > .el-menu-item:not(.is-disabled):hover, |
|
||||||
&--horizontal > .el-menu-item:not(.is-disabled):focus, |
|
||||||
&--horizontal > .el-submenu .el-submenu__title:hover, |
|
||||||
&--horizontal .el-menu .el-menu-item, |
|
||||||
&--horizontal .el-menu .el-submenu__title { |
|
||||||
background-color: inherit; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-message { |
|
||||||
@include deep-shadow; |
|
||||||
@include max-width-on-mobile; |
|
||||||
border-width: 0; |
|
||||||
|
|
||||||
.el-message__icon, .el-message__content { |
|
||||||
color: #ffffff !important; |
|
||||||
} |
|
||||||
|
|
||||||
&.el-message--success { |
|
||||||
background: $--color-success; |
|
||||||
} |
|
||||||
|
|
||||||
&.el-message--info { |
|
||||||
background: $--color-primary; |
|
||||||
} |
|
||||||
|
|
||||||
&.el-message--warning { |
|
||||||
background: $--color-warning; |
|
||||||
} |
|
||||||
|
|
||||||
&.el-message--error { |
|
||||||
background: $--color-danger; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-message-box { |
|
||||||
position: relative; |
|
||||||
@include deep-shadow; |
|
||||||
@include max-width-on-mobile; |
|
||||||
} |
|
||||||
|
|
||||||
.el-notification { |
|
||||||
@include deep-shadow; |
|
||||||
|
|
||||||
.el-notification__icon.el-icon-info { |
|
||||||
color: $--color-primary; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-pagination { |
|
||||||
text-align: right; |
|
||||||
|
|
||||||
.el-pagination__editor.el-input { |
|
||||||
margin: 0 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.el-table + & { |
|
||||||
padding-top: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-scrollbar { |
|
||||||
height: 100%; |
|
||||||
|
|
||||||
.el-scrollbar__wrap { |
|
||||||
-webkit-overflow-scrolling: touch; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-select { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.el-steps { |
|
||||||
&.el-steps--horizontal { |
|
||||||
.el-step__line { |
|
||||||
left: 57%; |
|
||||||
right: -43%; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-table { |
|
||||||
thead { |
|
||||||
color: #303133 |
|
||||||
} |
|
||||||
|
|
||||||
thead > tr > th { |
|
||||||
background: #fbfbfb; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-textarea { |
|
||||||
.el-input__count { |
|
||||||
background: transparent; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-upload { |
|
||||||
$size: 100px; |
|
||||||
|
|
||||||
&-list__item-thumbnail { |
|
||||||
object-fit: cover; |
|
||||||
} |
|
||||||
|
|
||||||
&.el-upload--picture-card { |
|
||||||
height: $size; |
|
||||||
width: $size; |
|
||||||
line-height: $size; |
|
||||||
} |
|
||||||
|
|
||||||
&-list .el-upload-list__item { |
|
||||||
height: $size; |
|
||||||
width: $size; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,93 @@ |
|||||||
|
// cover some element-ui styles |
||||||
|
.el-backtop { |
||||||
|
border-radius: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.el-drawer { |
||||||
|
&__body { |
||||||
|
overflow-y: overlay; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-menu { |
||||||
|
width: 100%; |
||||||
|
border: none !important; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
//子级菜单激活时，父级同样高亮 |
||||||
|
.el-menu-item.is-active, |
||||||
|
.is-active > .el-submenu__title { |
||||||
|
color: $--color-primary !important; |
||||||
|
} |
||||||
|
|
||||||
|
//箭头图标与字体同色 |
||||||
|
.el-submenu__title i { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
//原先垂直时右侧展开箭头偏上 |
||||||
|
.el-submenu__icon-arrow { |
||||||
|
margin-top: -4px; |
||||||
|
} |
||||||
|
|
||||||
|
//弹出菜单 |
||||||
|
&.el-menu--popup { |
||||||
|
max-height: 88vh; |
||||||
|
min-width: 160px; |
||||||
|
padding: 0; |
||||||
|
margin-bottom: 0.5vh; |
||||||
|
overflow-y: auto; |
||||||
|
|
||||||
|
.el-menu-item, |
||||||
|
.el-submenu__title { |
||||||
|
padding: 0 $menu-padding; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&--horizontal > .el-menu-item:not(.is-disabled):hover, |
||||||
|
&--horizontal > .el-menu-item:not(.is-disabled):focus, |
||||||
|
&--horizontal > .el-submenu .el-submenu__title:hover, |
||||||
|
&--horizontal .el-menu .el-menu-item, |
||||||
|
&--horizontal .el-menu .el-submenu__title { |
||||||
|
background-color: inherit; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-message { |
||||||
|
@include deep-shadow; |
||||||
|
@include max-width-on-mobile; |
||||||
|
border-width: 0; |
||||||
|
|
||||||
|
.el-message__icon, |
||||||
|
.el-message__content { |
||||||
|
color: $--color-white !important; |
||||||
|
} |
||||||
|
|
||||||
|
&.el-message--success { |
||||||
|
background-color: $--color-success; |
||||||
|
} |
||||||
|
|
||||||
|
&.el-message--info { |
||||||
|
background-color: $--color-primary; |
||||||
|
} |
||||||
|
|
||||||
|
&.el-message--warning { |
||||||
|
background-color: $--color-warning; |
||||||
|
} |
||||||
|
|
||||||
|
&.el-message--error { |
||||||
|
background-color: $--color-danger; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-scrollbar { |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
.el-scrollbar__wrap { |
||||||
|
-webkit-overflow-scrolling: touch; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
/*仅覆盖element-ui中的预设变量，不会被使用*/ |
||||||
|
|
||||||
|
//el-menu的hover背景颜色 |
||||||
|
$--menu-item-hover-fill: none; |
||||||
|
|
||||||
|
//引入element的scss时需要覆盖字体路径 |
||||||
|
$--font-path: '~element-ui/lib/theme-chalk/fonts'; |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
@mixin clearfix { |
||||||
|
&::after { |
||||||
|
visibility: hidden; |
||||||
|
display: block; |
||||||
|
font-size: 0; |
||||||
|
content: " "; |
||||||
|
clear: both; |
||||||
|
height: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@mixin deep-shadow { |
||||||
|
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); |
||||||
|
} |
||||||
|
|
||||||
|
@mixin mobile { |
||||||
|
@media (max-width: $max-mobile-width) { |
||||||
|
@content |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@mixin pc { |
||||||
|
@media (min-width: $max-mobile-width) { |
||||||
|
@content |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@mixin max-width-on-mobile { |
||||||
|
@include mobile { |
||||||
|
max-width: 384px; |
||||||
|
} |
||||||
|
} |
||||||
@ -1,82 +0,0 @@ |
|||||||
export default { |
|
||||||
bind(el, bind, vnode) { |
|
||||||
const dialogHeaderEl = el.querySelector('.el-dialog__header') |
|
||||||
const dragDom = el.querySelector('.el-dialog') |
|
||||||
|
|
||||||
dialogHeaderEl.style.setProperty('cursor', 'move') |
|
||||||
|
|
||||||
dialogHeaderEl.addEventListener('mousedown', e => { |
|
||||||
// 鼠标按下，计算当前元素距离可视区的距离
|
|
||||||
const disX = e.clientX - dialogHeaderEl.offsetLeft |
|
||||||
const disY = e.clientY - dialogHeaderEl.offsetTop |
|
||||||
|
|
||||||
const dragDomWidth = dragDom.offsetWidth |
|
||||||
const dragDomHeight = dragDom.offsetHeight |
|
||||||
|
|
||||||
const screenWidth = document.body.clientWidth |
|
||||||
const screenHeight = document.body.clientHeight |
|
||||||
|
|
||||||
const minDragDomLeft = dragDom.offsetLeft |
|
||||||
const maxDragDomLeft = screenWidth - minDragDomLeft - dragDomWidth |
|
||||||
|
|
||||||
const minDragDomTop = dragDom.offsetTop |
|
||||||
const maxDragDomTop = screenHeight - minDragDomTop - dragDomHeight |
|
||||||
|
|
||||||
// 获取到的值带px 正则匹配替换
|
|
||||||
let {left: styL, top: styT} = window.getComputedStyle(dragDom) |
|
||||||
|
|
||||||
if (styL.includes('%')) { |
|
||||||
styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100) |
|
||||||
styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100) |
|
||||||
} |
|
||||||
else { |
|
||||||
styL = +styL.replace(/px/g, '') |
|
||||||
styT = +styT.replace(/px/g, '') |
|
||||||
} |
|
||||||
|
|
||||||
function onMousemove(e) { |
|
||||||
// 通过事件委托，计算移动的距离
|
|
||||||
let left = e.clientX - disX |
|
||||||
let top = e.clientY - disY |
|
||||||
|
|
||||||
// 边界处理
|
|
||||||
if (-(left) > minDragDomLeft) { |
|
||||||
left = -minDragDomLeft |
|
||||||
} |
|
||||||
else if (left > maxDragDomLeft) { |
|
||||||
left = maxDragDomLeft |
|
||||||
} |
|
||||||
|
|
||||||
if (-(top) > minDragDomTop) { |
|
||||||
top = -minDragDomTop |
|
||||||
} |
|
||||||
else if (top > maxDragDomTop) { |
|
||||||
top = maxDragDomTop |
|
||||||
} |
|
||||||
|
|
||||||
// 移动当前元素
|
|
||||||
dragDom.style.setProperty('left', `${left + styL}px`) |
|
||||||
dragDom.style.setProperty('top', `${top + styT}px`) |
|
||||||
} |
|
||||||
|
|
||||||
function onMouseup() { |
|
||||||
window.removeEventListener('mousemove', onMousemove) |
|
||||||
window.removeEventListener('mouseup', onMouseup) |
|
||||||
} |
|
||||||
|
|
||||||
window.addEventListener('mousemove', onMousemove) |
|
||||||
window.addEventListener('mouseup', onMouseup) |
|
||||||
}) |
|
||||||
|
|
||||||
function resetStyle() { |
|
||||||
dragDom.style.removeProperty('left') |
|
||||||
dragDom.style.removeProperty('top') |
|
||||||
} |
|
||||||
|
|
||||||
//当dialog关闭时恢复原位
|
|
||||||
vnode.componentInstance.$on('closed', resetStyle) |
|
||||||
vnode.componentInstance.$once('hook:beforeDestroy', () => { |
|
||||||
vnode.componentInstance.$off('closed', resetStyle) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import dragDialog from './dragDialog' |
|
||||||
|
|
||||||
Vue.directive('drag-dialog', dragDialog) |
|
||||||
|
|
||||||
@ -1,11 +1,11 @@ |
|||||||
.navbar.light { |
.navbar.light { |
||||||
background-color: #ffffff; |
background-color: $--color-white; |
||||||
|
|
||||||
.navbar-item { |
.navbar-item { |
||||||
color: $navbar-item-color-light; |
color: $navbar-item-color-light; |
||||||
|
|
||||||
&:hover { |
&:hover { |
||||||
background: $navbar-item-hover-color-light; |
background-color: $navbar-item-hover-color-light; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,23 @@ |
|||||||
|
@import "~@/asset/style/var"; |
||||||
|
|
||||||
|
.page-main { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
flex: 1; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #f0f2f5; |
||||||
|
|
||||||
|
> .scroll-container { |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
flex-direction: column; |
||||||
|
overflow-y: overlay; |
||||||
|
overflow-x: inherit; |
||||||
|
|
||||||
|
> .page-view { |
||||||
|
margin: $page-view-margin; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1,11 +0,0 @@ |
|||||||
export default { |
|
||||||
path: 'directive', |
|
||||||
meta: {title: '全局指令', icon: 'el-icon-s-grid', alwaysShow: true}, |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
path: 'dragDialog', |
|
||||||
component: 'example/directive/dragDialog', |
|
||||||
meta: {title: '可拖拽dialog'} |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="tip-row"> |
|
||||||
可拖拽的dialog |
|
||||||
</div> |
|
||||||
|
|
||||||
<el-button @click="value = true">打开dialog</el-button> |
|
||||||
|
|
||||||
<el-dialog v-drag-dialog :visible.sync="value" title="我可以拖动"> |
|
||||||
<div>蛤蛤</div> |
|
||||||
</el-dialog> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: "dragDialogPage", |
|
||||||
|
|
||||||
data() { |
|
||||||
return { |
|
||||||
value: false |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
Loading…
Reference in new issue