import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import piniaStore from "@/store";
import "@/assets/styles/index.scss"
import {useAccountInfoStore} from "@/store/accountInfoStore";
InitCustomConfig().then(config => {
const app = createApp(App)
.use(piniaStore)
.use(router)
.use(i18n)
document.title = config.logoConfig?.systemTitle ?? ""
// 自定義指令--拖拽
app.directive('drag',(el) => {
let oDiv = el // 當前元素
// let self = this // 上下文
// 禁止選擇網(wǎng)頁上的文字
document.onselectstart = function () {
return false
}
oDiv.onmousedown = function (e:any) {
oDiv.style.cursor = 'move'
let parentWidth = oDiv.parentElement.offsetWidth
let parentHeight = oDiv.parentElement.offsetHeight
let oDivWidth = oDiv.offsetWidth
let oDivHeight = oDiv.offsetHeight
// 鼠標按下，計算當前元素距離可視區(qū)的距離
let disX = e.clientX - oDiv.offsetLeft
let disY = e.clientY - oDiv.offsetTop
document.onmousemove = function (e) {
let left:number = e.clientX - disX
let top:number = e.clientY - disY
// 通過事件委托，計算移動的距離
if(left < 0) {
left = 0
}
if(top < 0) {
top = 0
}
if(left + oDivWidth > parentWidth) {
left = parentWidth - oDivWidth
}
if(top + oDivHeight > parentHeight) {
top = parentHeight - oDivHeight
}
let right = parentWidth - left - oDivWidth
let bottom = parentHeight - top - oDivHeight
//移動當前元素
oDiv.style.right = right + "px";
// oDiv.style.bottom = bottom + "px";
oDiv.style.top = top + "px";
}
document.onmouseup = function (e) {
oDiv.style.cursor = 'default'
document.onmousemove = null
document.onmouseup = null
}
// return false不加的話可能導致黏連，就是拖到一個地方時div粘在鼠標上不下來孤个，相當于onmouseup失效
return false
}
}
);
// 自定義指令--按鈕權限
app.directive('permission',
(el, binding) => {
if (useAccountInfoStore().account.authority) {
if (useAccountInfoStore().account.authority?.indexOf(binding.value) === -1 && useAccountInfoStore().account.authority?.indexOf("admin") === -1) {
el.parentNode && el.parentNode.removeChild(el)
}
}
}
);
}).catch(err => {
console.log(err);
})
<template>
<div class="parents-box" v-drag >
<div class="sub-box">
可拖拽盒子
</div>
</div>
</template>
<script lang='ts' setup>
import { ref, reactive,watch } from 'vue'
import { $ref } from 'vue/macros';
</script>
<style scoped lang='scss'>
.parents-box {
width: 100%;
height: 100%;
position: relative;
.sub-box{
position: absolute;
right: 10px;
top: 10px;
width: 300px;
height: 200px;
user-select: none;
z-index: 2;
}
}
</style>
- 注意：
1.在定義自定義拖拽指令時設置 oDiv.style.right/oDiv.style.left oDiv.style.top/oDiv.style.bottom 的方向 在div元素上使用的時候css中的 right/left top/bottom 也需要保持一致 （要使用position: absolute;）
2.使用的div元素 css中 z-index需要設置的大一些 避免權重不夠 拖拽時導致沒有效果
