45 lines
1.0 KiB
JavaScript
45 lines
1.0 KiB
JavaScript
import { reactive } from "vue";
|
|
|
|
export const controlPanel = reactive({
|
|
sections: [
|
|
{
|
|
iconClass: 'iconfont icon-collections'
|
|
},
|
|
{
|
|
iconClass: 'iconfont icon-setting'
|
|
},
|
|
{
|
|
iconClass: 'iconfont icon-about'
|
|
}
|
|
],
|
|
currentIndex: -1,
|
|
click(index) {
|
|
if (this.currentIndex === index) {
|
|
this.currentIndex = -1;
|
|
} else {
|
|
if (horizontalResizer.width < 5) {
|
|
horizontalResizer.width = 410;
|
|
}
|
|
this.currentIndex = index;
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
export const horizontalResizer = reactive({
|
|
active: false,
|
|
hover: false,
|
|
width: 400,
|
|
mousedown() {
|
|
this.active = true;
|
|
document.addEventListener('mousemove', resize);
|
|
}
|
|
});
|
|
|
|
export function resize(event) {
|
|
// 50 是 --right-nav-width
|
|
const computedWidth = window.innerWidth - event.clientX - 50;
|
|
if (computedWidth >= 0 && computedWidth <= 2000) {
|
|
horizontalResizer.width = computedWidth;
|
|
}
|
|
} |