123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <div v-drag class="mobile-nav-button" draggable="false" @click="showMobileNav($event)">
- <appstore-outlined class="xn-appout-line" />
- </div>
- <a-drawer v-model:open="visible" :width="210" :closable="false" placement="left">
- <header class="snowy-header-logo mobile-nav">
- <div class="snowy-header-left">
- <div class="logo-bar">
- <img class="logo" :src="sysBaseConfig.SNOWY_SYS_LOGO" />
- <span>{{ sysBaseConfig.SNOWY_SYS_NAME }}</span>
- </div>
- </div>
- </header>
- <a-menu class="xn-inline-line" mode="inline" @select="onSelect">
- <NavMenu :nav-menus="menu"></NavMenu>
- </a-menu>
- </a-drawer>
- </template>
- <script setup>
- import NavMenu from './NavMenu.vue'
- import { globalStore } from '@/store'
- import { useRouter } from 'vue-router'
- const router = useRouter()
- const store = globalStore()
- const vDrag = (el) => {
- const oDiv = el // 当前元素
- let firstTime = ''
- let lastTime = ''
- // 禁止选择网页上的文字
- // document.onselectstart = function() {
- // return false;
- // };
- oDiv.onmousedown = function (e) {
- // 鼠标按下,计算当前元素距离可视区的距离
- const disX = e.clientX - oDiv.offsetLeft
- const disY = e.clientY - oDiv.offsetTop
- document.onmousemove = function (e) {
- oDiv.setAttribute('drag-flag', true)
- firstTime = new Date().getTime()
- // 通过事件委托,计算移动的距离
- const l = e.clientX - disX
- const t = e.clientY - disY
- // 移动当前元素
- if (t > 0 && t < document.body.clientHeight - 50) {
- oDiv.style.top = `${t}px`
- }
- if (l > 0 && l < document.body.clientWidth - 50) {
- oDiv.style.left = `${l}px`
- }
- }
- document.onmouseup = function () {
- lastTime = new Date().getTime()
- if (lastTime - firstTime > 200) {
- oDiv.setAttribute('drag-flag', false)
- }
- document.onmousemove = null
- document.onmouseup = null
- }
- // return false不加的话可能导致黏连,就是拖到一个地方时div粘在鼠标上不下来,相当于onmouseup失效
- return false
- }
- }
- const visible = ref(false)
- const menu = ref([])
- const sysBaseConfig = computed(() => {
- return store.sysBaseConfig
- })
- onBeforeMount(() => {
- const menus = router.getMenu()
- menu.value = filterUrl(menus)
- })
- const showMobileNav = (e) => {
- const isdrag = e.currentTarget.getAttribute('drag-flag')
- visible.value = true
- if (isdrag === 'true') {
- return false
- } else {
- visible.value = true
- }
- }
- // 当菜单被选中时
- const onSelect = (obj) => {
- const pathLength = obj.keyPath.length
- const path = obj.keyPath[pathLength - 1]
- router.push({ path })
- visible.value = false
- }
- // 转换外部链接的路由
- const filterUrl = (map) => {
- map.forEach((item, index) => {
- item.meta = item.meta ? item.meta : {}
- // 处理隐藏
- if (item.meta.hidden) {
- map.splice(index, 1)
- }
- // 处理http
- if (item.meta.type === 'iframe') {
- item.path = `/i/${item.name}`
- }
- // 递归循环
- if (item.children && item.children.length > 0) {
- item.children = filterUrl(item.children)
- }
- })
- return map
- }
- </script>
- <style lang="less" scoped>
- .xn-appout-line {
- font-size: 20px;
- color: white;
- }
- .xn-inline-line {
- width: 208px;
- margin-left: -24px;
- }
- .mobile-nav {
- margin-top: -24px;
- margin-left: -24px;
- margin-right: -24px;
- }
- .mobile-nav-button {
- position: fixed;
- bottom: 10px;
- left: 10px;
- z-index: 10;
- width: 50px;
- height: 50px;
- background: var(--primary-color);
- box-shadow: 0 2px 12px 0 var(--primary-color);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- </style>
|