e
3 years ago
parent
cc2f686927
commit
09841d835e
32 changed files with 25 additions and 623 deletions
@ -1,7 +1,7 @@ |
|||||||
<template> |
<template> |
||||||
<div class="header flex-between"> |
<div class="header flex-between"> |
||||||
<div class="logo"> |
<div class="logo"> |
||||||
<img class="cursor" @click="goHome" src="../../assets/img/logo.png"> |
<img class="cursor" @click="goHome" src="../assets/img/logo.png"> |
||||||
</div> |
</div> |
||||||
<div class="header-right"> |
<div class="header-right"> |
||||||
<div class="header-user-con"> |
<div class="header-user-con"> |
||||||
@ -1,186 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="tags" v-if="showTags"> |
|
||||||
<ul> |
|
||||||
<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> |
|
||||||
<router-link :to="item.path" class="tags-li-title"> |
|
||||||
{{item.title}} |
|
||||||
</router-link> |
|
||||||
<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
<div class="tags-close-box"> |
|
||||||
<el-dropdown @command="handleTags"> |
|
||||||
<el-button size="mini" type="primary"> |
|
||||||
标签选项<i class="el-icon-arrow-down el-icon--right"></i> |
|
||||||
</el-button> |
|
||||||
<el-dropdown-menu size="small" slot="dropdown"> |
|
||||||
<el-dropdown-item command="other">关闭其他</el-dropdown-item> |
|
||||||
<el-dropdown-item command="all">关闭所有</el-dropdown-item> |
|
||||||
</el-dropdown-menu> |
|
||||||
</el-dropdown> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import bus from './bus'; |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
tagsList: [] |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
isActive(path) { |
|
||||||
return path === this.$route.fullPath; |
|
||||||
}, |
|
||||||
// 关闭单个标签 |
|
||||||
closeTags(index) { |
|
||||||
const delItem = this.tagsList.splice(index, 1)[0]; |
|
||||||
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]; |
|
||||||
if (item) { |
|
||||||
delItem.path === this.$route.fullPath && this.$router.push(item.path); |
|
||||||
}else{ |
|
||||||
this.$router.push('/dashboard'); |
|
||||||
} |
|
||||||
}, |
|
||||||
// 关闭全部标签 |
|
||||||
closeAll(){ |
|
||||||
this.tagsList = []; |
|
||||||
this.$router.push('/dashboard'); |
|
||||||
}, |
|
||||||
// 关闭其他标签 |
|
||||||
closeOther(){ |
|
||||||
const curItem = this.tagsList.filter(item => { |
|
||||||
return item.path === this.$route.fullPath; |
|
||||||
}) |
|
||||||
this.tagsList = curItem; |
|
||||||
}, |
|
||||||
// 设置标签 |
|
||||||
setTags(route){ |
|
||||||
const isExist = this.tagsList.some(item => { |
|
||||||
return item.path === route.fullPath; |
|
||||||
}) |
|
||||||
if(!isExist){ |
|
||||||
if(this.tagsList.length >= 8){ |
|
||||||
this.tagsList.shift(); |
|
||||||
} |
|
||||||
this.tagsList.push({ |
|
||||||
title: route.meta.title, |
|
||||||
path: route.fullPath, |
|
||||||
name: route.matched[1].components.default.name |
|
||||||
}) |
|
||||||
} |
|
||||||
bus.$emit('tags', this.tagsList); |
|
||||||
}, |
|
||||||
handleTags(command){ |
|
||||||
command === 'other' ? this.closeOther() : this.closeAll(); |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
showTags() { |
|
||||||
return this.tagsList.length > 0; |
|
||||||
} |
|
||||||
}, |
|
||||||
watch:{ |
|
||||||
$route(newValue, oldValue){ |
|
||||||
this.setTags(newValue); |
|
||||||
} |
|
||||||
}, |
|
||||||
created(){ |
|
||||||
this.setTags(this.$route); |
|
||||||
// 监听关闭当前页面的标签页 |
|
||||||
bus.$on('close_current_tags', () => { |
|
||||||
for (let i = 0, len = this.tagsList.length; i < len; i++) { |
|
||||||
const item = this.tagsList[i]; |
|
||||||
if(item.path === this.$route.fullPath){ |
|
||||||
if(i < len - 1){ |
|
||||||
this.$router.push(this.tagsList[i+1].path); |
|
||||||
}else if(i > 0){ |
|
||||||
this.$router.push(this.tagsList[i-1].path); |
|
||||||
}else{ |
|
||||||
this.$router.push('/'); |
|
||||||
} |
|
||||||
this.tagsList.splice(i, 1); |
|
||||||
break; |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
|
|
||||||
<style> |
|
||||||
.tags { |
|
||||||
position: relative; |
|
||||||
height: 30px; |
|
||||||
overflow: hidden; |
|
||||||
background: #fff; |
|
||||||
padding-right: 120px; |
|
||||||
box-shadow: 0 5px 10px #ddd; |
|
||||||
} |
|
||||||
|
|
||||||
.tags ul { |
|
||||||
box-sizing: border-box; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.tags-li { |
|
||||||
float: left; |
|
||||||
margin: 3px 5px 2px 3px; |
|
||||||
border-radius: 3px; |
|
||||||
font-size: 12px; |
|
||||||
overflow: hidden; |
|
||||||
cursor: pointer; |
|
||||||
height: 23px; |
|
||||||
line-height: 23px; |
|
||||||
border: 1px solid #e9eaec; |
|
||||||
background: #fff; |
|
||||||
padding: 0 5px 0 12px; |
|
||||||
vertical-align: middle; |
|
||||||
color: #666; |
|
||||||
-webkit-transition: all .3s ease-in; |
|
||||||
-moz-transition: all .3s ease-in; |
|
||||||
transition: all .3s ease-in; |
|
||||||
} |
|
||||||
|
|
||||||
.tags-li:not(.active):hover { |
|
||||||
background: #f8f8f8; |
|
||||||
} |
|
||||||
|
|
||||||
.tags-li.active { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.tags-li-title { |
|
||||||
float: left; |
|
||||||
max-width: 80px; |
|
||||||
overflow: hidden; |
|
||||||
white-space: nowrap; |
|
||||||
text-overflow: ellipsis; |
|
||||||
margin-right: 5px; |
|
||||||
color: #666; |
|
||||||
} |
|
||||||
|
|
||||||
.tags-li.active .tags-li-title { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.tags-close-box { |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
top: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
padding-top: 1px; |
|
||||||
text-align: center; |
|
||||||
width: 110px; |
|
||||||
height: 30px; |
|
||||||
background: #fff; |
|
||||||
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1); |
|
||||||
z-index: 10; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
import Vue from 'vue'; |
|
||||||
|
|
||||||
// 使用 Event Bus
|
|
||||||
const bus = new Vue(); |
|
||||||
|
|
||||||
export default bus; |
|
||||||
@ -1,80 +0,0 @@ |
|||||||
import Vue from 'vue'; |
|
||||||
|
|
||||||
// v-dialogDrag: 弹窗拖拽属性
|
|
||||||
Vue.directive('dialogDrag', { |
|
||||||
bind(el, binding, vnode, oldVnode) { |
|
||||||
const dialogHeaderEl = el.querySelector('.el-dialog__header'); |
|
||||||
const dragDom = el.querySelector('.el-dialog'); |
|
||||||
|
|
||||||
dialogHeaderEl.style.cssText += ';cursor:move;' |
|
||||||
dragDom.style.cssText += ';top:0px;' |
|
||||||
|
|
||||||
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
|
||||||
const sty = (() => { |
|
||||||
if (window.document.currentStyle) { |
|
||||||
return (dom, attr) => dom.currentStyle[attr]; |
|
||||||
} else { |
|
||||||
return (dom, attr) => getComputedStyle(dom, false)[attr]; |
|
||||||
} |
|
||||||
})() |
|
||||||
|
|
||||||
dialogHeaderEl.onmousedown = (e) => { |
|
||||||
// 鼠标按下，计算当前元素距离可视区的距离
|
|
||||||
const disX = e.clientX - dialogHeaderEl.offsetLeft; |
|
||||||
const disY = e.clientY - dialogHeaderEl.offsetTop; |
|
||||||
|
|
||||||
const screenWidth = document.body.clientWidth; // body当前宽度
|
|
||||||
const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
|
|
||||||
|
|
||||||
const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
|
|
||||||
const dragDomheight = dragDom.offsetHeight; // 对话框高度
|
|
||||||
|
|
||||||
const minDragDomLeft = dragDom.offsetLeft; |
|
||||||
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; |
|
||||||
|
|
||||||
const minDragDomTop = dragDom.offsetTop; |
|
||||||
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; |
|
||||||
|
|
||||||
|
|
||||||
// 获取到的值带px 正则匹配替换
|
|
||||||
let styL = sty(dragDom, 'left'); |
|
||||||
let styT = sty(dragDom, 'top'); |
|
||||||
|
|
||||||
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
|
||||||
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, ''); |
|
||||||
}; |
|
||||||
|
|
||||||
document.onmousemove = function (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.cssText += `;left:${left + styL}px;top:${top + styT}px;`; |
|
||||||
}; |
|
||||||
|
|
||||||
document.onmouseup = function (e) { |
|
||||||
document.onmousemove = null; |
|
||||||
document.onmouseup = null; |
|
||||||
}; |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
@ -1,30 +0,0 @@ |
|||||||
export const messages = { |
|
||||||
'zh': { |
|
||||||
i18n: { |
|
||||||
breadcrumb: '国际化产品', |
|
||||||
tips: '通过切换语言按钮，来改变当前内容的语言。', |
|
||||||
btn: '切换英文', |
|
||||||
title1: '常用用法', |
|
||||||
p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。', |
|
||||||
p2: '没有什么比信念更能支撑我们度过艰难的时光了。', |
|
||||||
p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。', |
|
||||||
title2: '组件插值', |
|
||||||
info: 'Element组件需要国际化，请参考 {action}。', |
|
||||||
value: '文档' |
|
||||||
} |
|
||||||
}, |
|
||||||
'en': { |
|
||||||
i18n: { |
|
||||||
breadcrumb: 'International Products', |
|
||||||
tips: 'Click on the button to change the current language. ', |
|
||||||
btn: 'Switch Chinese', |
|
||||||
title1: 'Common usage', |
|
||||||
p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.", |
|
||||||
p2: "Nothing can help us endure dark times better than our faith. ", |
|
||||||
p3: "If you can do what you do best and be happy, you're further along in life than most people.", |
|
||||||
title2: 'Component interpolation', |
|
||||||
info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.', |
|
||||||
value: 'documentation' |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
<template> |
|
||||||
<section class="main"> |
|
||||||
<div class="crumbs"> |
|
||||||
<el-breadcrumb separator="/"> |
|
||||||
<el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item> |
|
||||||
</el-breadcrumb> |
|
||||||
</div> |
|
||||||
<div class="container"> |
|
||||||
<span>{{$t('i18n.tips')}}</span> |
|
||||||
<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';">{{$t('i18n.btn')}}</el-button> |
|
||||||
<div class="list"> |
|
||||||
<h2>{{$t('i18n.title1')}}</h2> |
|
||||||
<p>{{$t('i18n.p1')}}</p> |
|
||||||
<p>{{$t('i18n.p2')}}</p> |
|
||||||
<p>{{$t('i18n.p3')}}</p> |
|
||||||
</div> |
|
||||||
<h2>{{$t('i18n.title2')}}</h2> |
|
||||||
<div> |
|
||||||
<i18n path="i18n.info" tag="p"> |
|
||||||
<a place="action" href="https://element.eleme.cn/2.0/#/zh-CN/component/i18n">{{ $t('i18n.value') }}</a> |
|
||||||
</i18n> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
data(){ |
|
||||||
return { |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.list{ |
|
||||||
padding: 30px 0; |
|
||||||
} |
|
||||||
.list p{ |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
a{ |
|
||||||
color: #409eff; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,225 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="crumbs"> |
|
||||||
<el-breadcrumb separator="/"> |
|
||||||
<el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item> |
|
||||||
</el-breadcrumb> |
|
||||||
</div> |
|
||||||
<div class="container"> |
|
||||||
<h2>使用方法</h2> |
|
||||||
<p style="line-height: 50px;"> |
|
||||||
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标） |
|
||||||
</p> |
|
||||||
<p class="example-p"> |
|
||||||
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i> |
|
||||||
<span><i class="el-icon-lx-redpacket_fill"></i></span> |
|
||||||
</p> |
|
||||||
<p class="example-p"> |
|
||||||
<i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i> |
|
||||||
<span><i class="el-icon-lx-weibo"></i></span> |
|
||||||
</p> |
|
||||||
<p class="example-p"> |
|
||||||
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i> |
|
||||||
<span><i class="el-icon-lx-emojifill"></i></span> |
|
||||||
</p> |
|
||||||
<br> |
|
||||||
<h2>图标</h2> |
|
||||||
<div class="search-box"> |
|
||||||
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input> |
|
||||||
</div> |
|
||||||
<ul> |
|
||||||
<li class="icon-li" v-for="(item,index) in list" :key="index"> |
|
||||||
<div class="icon-li-content"> |
|
||||||
<i :class="`el-icon-lx-${item}`"></i> |
|
||||||
<span>{{item}}</span> |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
data: function(){ |
|
||||||
return { |
|
||||||
keyword: '', |
|
||||||
iconList: [ |
|
||||||
'attentionforbid', |
|
||||||
'attentionforbidfill', |
|
||||||
'attention', |
|
||||||
'attentionfill', |
|
||||||
'tag', |
|
||||||
'tagfill', |
|
||||||
'people', |
|
||||||
'peoplefill', |
|
||||||
'notice', |
|
||||||
'noticefill', |
|
||||||
'mobile', |
|
||||||
'mobilefill', |
|
||||||
'voice', |
|
||||||
'voicefill', |
|
||||||
'unlock', |
|
||||||
'lock', |
|
||||||
'home', |
|
||||||
'homefill', |
|
||||||
'delete', |
|
||||||
'deletefill', |
|
||||||
'notification', |
|
||||||
'notificationfill', |
|
||||||
'notificationforbidfill', |
|
||||||
'like', |
|
||||||
'likefill', |
|
||||||
'comment', |
|
||||||
'commentfill', |
|
||||||
'camera', |
|
||||||
'camerafill', |
|
||||||
'warn', |
|
||||||
'warnfill', |
|
||||||
'time', |
|
||||||
'timefill', |
|
||||||
'location', |
|
||||||
'locationfill', |
|
||||||
'favor', |
|
||||||
'favorfill', |
|
||||||
'skin', |
|
||||||
'skinfill', |
|
||||||
'news', |
|
||||||
'newsfill', |
|
||||||
'record', |
|
||||||
'recordfill', |
|
||||||
'emoji', |
|
||||||
'emojifill', |
|
||||||
'message', |
|
||||||
'messagefill', |
|
||||||
'goods', |
|
||||||
'goodsfill', |
|
||||||
'crown', |
|
||||||
'crownfill', |
|
||||||
'move', |
|
||||||
'add', |
|
||||||
'hot', |
|
||||||
'hotfill', |
|
||||||
'service', |
|
||||||
'servicefill', |
|
||||||
'present', |
|
||||||
'presentfill', |
|
||||||
'pic', |
|
||||||
'picfill', |
|
||||||
'rank', |
|
||||||
'rankfill', |
|
||||||
'male', |
|
||||||
'female', |
|
||||||
'down', |
|
||||||
'top', |
|
||||||
'recharge', |
|
||||||
'rechargefill', |
|
||||||
'forward', |
|
||||||
'forwardfill', |
|
||||||
'info', |
|
||||||
'infofill', |
|
||||||
'redpacket', |
|
||||||
'redpacket_fill', |
|
||||||
'roundadd', |
|
||||||
'roundaddfill', |
|
||||||
'friendadd', |
|
||||||
'friendaddfill', |
|
||||||
'cart', |
|
||||||
'cartfill', |
|
||||||
'more', |
|
||||||
'moreandroid', |
|
||||||
'back', |
|
||||||
'right', |
|
||||||
'shop', |
|
||||||
'shopfill', |
|
||||||
'question', |
|
||||||
'questionfill', |
|
||||||
'roundclose', |
|
||||||
'roundclosefill', |
|
||||||
'roundcheck', |
|
||||||
'roundcheckfill', |
|
||||||
'global', |
|
||||||
'mail', |
|
||||||
'punch', |
|
||||||
'exit', |
|
||||||
'upload', |
|
||||||
'read', |
|
||||||
'file', |
|
||||||
'link', |
|
||||||
'full', |
|
||||||
'group', |
|
||||||
'friend', |
|
||||||
'profile', |
|
||||||
'addressbook', |
|
||||||
'calendar', |
|
||||||
'text', |
|
||||||
'copy', |
|
||||||
'share', |
|
||||||
'wifi', |
|
||||||
'vipcard', |
|
||||||
'weibo', |
|
||||||
'remind', |
|
||||||
'refresh', |
|
||||||
'filter', |
|
||||||
'settings', |
|
||||||
'scan', |
|
||||||
'qrcode', |
|
||||||
'cascades', |
|
||||||
'apps', |
|
||||||
'sort', |
|
||||||
'searchlist', |
|
||||||
'search', |
|
||||||
'edit' |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
list(){ |
|
||||||
return this.iconList.filter((item) => { |
|
||||||
return item.indexOf(this.keyword) !== -1; |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.example-p{ |
|
||||||
height: 45px; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.search-box{ |
|
||||||
text-align: center; |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
.search{ |
|
||||||
width: 300px; |
|
||||||
} |
|
||||||
ul,li{ |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
.icon-li{ |
|
||||||
display: inline-block; |
|
||||||
padding: 10px; |
|
||||||
width: 120px; |
|
||||||
height: 120px; |
|
||||||
} |
|
||||||
.icon-li-content{ |
|
||||||
display: flex; |
|
||||||
height: 100%; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.icon-li-content i{ |
|
||||||
font-size: 36px; |
|
||||||
color: #606266; |
|
||||||
} |
|
||||||
.icon-li-content span{ |
|
||||||
margin-top: 10px; |
|
||||||
color: #787878; |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue