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 { |
||||
background-color: #ffffff; |
||||
background-color: $--color-white; |
||||
|
||||
.navbar-item { |
||||
color: $navbar-item-color-light; |
||||
|
||||
&: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