manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

---wiki正式切换到vue3版本---

Browse Source
This commit is contained in:
暮光：城中城
2023-01-11 20:33:42 +08:00
parent bc28320565
commit b8068ef29e
115 changed files with 15723 additions and 40477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
zyplayer-doc-ui/wiki-ui/src/components/layouts/RightResize.vue
View File

@@ -1,77 +1,73 @@
<template>
<div ref="rightResize" class="right-resize">
<i ref="rightResizeBar">...</i>
<div ref="rightResizeRef" class="right-resize">
<i ref="rightResizeBarRef">...</i>
</div>
</template>
<script>
export default {
data() {
return {
rightAsideWidth: 300,
}
},
mounted() {
this.dragChangeRightAsideWidth();
},
methods: {
dragChangeRightAsideWidth() {
// 保留this引用
let resize = this.$refs.rightResize;
let resizeBar = this.$refs.rightResizeBar;
resize.onmousedown = e => {
let startX = e.clientX;
// 颜色改变提醒
resize.style.background = "#ccc";
resizeBar.style.background = "#aaa";
resize.left = resize.offsetLeft;
document.onmousemove = e2 => {
// 计算并应用位移量
let endX = e2.clientX;
let moveLen = startX - endX;
if ((moveLen < 0 && this.rightAsideWidth < 600) || (moveLen > 0 && this.rightAsideWidth > 300)) {
startX = endX;
this.rightAsideWidth -= moveLen;
if (this.rightAsideWidth < 300) {
this.rightAsideWidth = 300;
}
this.$emit('input', this.rightAsideWidth);
this.$emit('change', this.rightAsideWidth);
}
};
document.onmouseup = () => {
// 颜色恢复
resize.style.background = "#fafafa";
resizeBar.style.background = "#ccc";
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
<script setup>
import {onBeforeUnmount, ref, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
let rightAsideWidth = 300;
let emit = defineEmits(['update:value', 'change']);
onMounted(() => {
dragChangeRightAsideWidth();
});
let rightResizeRef = ref();
let rightResizeBarRef = ref();
const dragChangeRightAsideWidth = () => {
// 保留this引用
let resize = rightResizeRef.value
let resizeBar = rightResizeBarRef.value
resize.onmousedown = (e) => {
let startX = e.clientX
// 颜色改变提醒
resize.style.background = '#ccc'
resizeBar.style.background = '#aaa'
resize.left = resize.offsetLeft
document.onmousemove = (e2) => {
// 计算并应用位移量
let endX = e2.clientX
let moveLen = startX - endX
if ((moveLen < 0 && rightAsideWidth < 600) || (moveLen > 0 && rightAsideWidth > 300)) {
startX = endX
rightAsideWidth -= moveLen
if (rightAsideWidth < 300) {
rightAsideWidth = 300
}
emit('update:value', rightAsideWidth)
emit('change', rightAsideWidth)
}
}
};
document.onmouseup = () => {
// 颜色恢复
resize.style.background = '#fafafa'
resizeBar.style.background = '#ccc'
document.onmousemove = null
document.onmouseup = null
}
return false
}
}
</script>
<style scoped>
.right-resize {
width: 5px;
height: 100%;
cursor: w-resize;
background: #fafafa;
}
.right-resize {
width: 5px;
height: 100%;
cursor: w-resize;
background: #fafafa;
}
.right-resize i {
margin-top: 300px;
width: 5px;
height: 35px;
display: inline-block;
word-wrap: break-word;
word-break: break-all;
line-height: 8px;
border-radius: 5px;
background: #ccc;
color: #888;
}
.right-resize i {
margin-top: 300px;
width: 5px;
height: 35px;
display: inline-block;
word-wrap: break-word;
word-break: break-all;
line-height: 8px;
border-radius: 5px;
background: #ccc;
color: #888;
}
</style>