gpt4 book ai didi

vue.js - Vuetify 抽屉导航拖动以调整大小

转载 作者:搜寻专家 更新时间:2023-10-30 22:32:50 27 4
gpt4 key购买 nike

所以我已经找到了“拖动以调整大小”的位置 - 它只是感觉有点迟钝......有谁知道这可能是为什么,以及如何解决它?

我曾尝试使用 vm.$forceUpdate() 强制刷新,但似乎没有任何效果..

The CodePen can be found here.


编辑: 为这个问题/帖子添加了演示代码工作解决方案。这样,如果 CodePen 出现问题,我们仍然可以使用演示代码。

new Vue({
el: "#app",
data: () => {
return {
navigation: {
shown: false,
width: 200,
borderSize: 3
}
};
},
computed: {
direction() {
return this.navigation.shown === false ? "Open" : "Closed";
}
},
methods: {
setBorderWidth() {
let i = this.$refs.drawer.$el.querySelector(
".v-navigation-drawer__border"
);
i.style.width = this.navigation.borderSize + "px";
i.style.cursor = "ew-resize";
i.style.backgroundColor = "red";
},
setEvents() {
const minSize = this.navigation.borderSize;
const el = this.$refs.drawer.$el;
const drawerBorder = el.querySelector(".v-navigation-drawer__border");
const vm = this;
const direction = el.classList.contains("v-navigation-drawer--right") ?
"right" :
"left";

function resize(e) {
document.body.style.cursor = "ew-resize";
let f =
direction === "right" ?
document.body.scrollWidth - e.clientX :
e.clientX;
el.style.width = f + "px";
}

drawerBorder.addEventListener(
"mousedown",
(e) => {
if (e.offsetX < minSize) {
el.style.transition = "initial";
document.addEventListener("mousemove", resize, false);
}
},
false
);

document.addEventListener(
"mouseup",
() => {
el.style.transition = "";
this.navigation.width = el.style.width;
document.body.style.cursor = "";
document.removeEventListener("mousemove", resize, false);
},
false
);
}
},
mounted() {
this.setBorderWidth();
this.setEvents();
}
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.js"></script>

<div id="app">
<v-app>
<v-navigation-drawer ref="drawer" app right hide-overlay :width="navigation.width" v-model="navigation.shown">
<v-toolbar color="primary">
<v-toolbar-title class="headline text-uppercase">
<span>t a</span><span class="font-weight-light"> b s </span>
</v-toolbar-title>
</v-toolbar>
<v-tabs>
<v-tab v-for="n in 3" :key="n">
Item {{ n }}
</v-tab>
<v-tab-item v-for="n in 3" :key="n">
<v-card flat>
<v-card-text>Content for tab {{ n }} would go here</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</v-navigation-drawer>
<v-container>
<v-layout justify-center>
<v-btn @click="navigation.shown = !navigation.shown">Toggle {{ direction }}</v-btn>
</v-layout>
<v-layout justify-center>
<p>Once the navigation drawer is opened, drag it's border to resize (highlited in red)</p>
</v-layout>
</v-container>
</v-app>
</div>

最佳答案

那是因为抽屉导航的过渡效果。在按下鼠标时将过渡设置为初始状态,然后在松开鼠标时将其释放。

在鼠标按下添加

el.style.transition ='initial';

在鼠标上添加

el.style.transition ='';

代码笔:https://codepen.io/dagalti/pen/ywRNYx

关于vue.js - Vuetify 抽屉导航拖动以调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55261712/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com