试图实现将一些计算方法插入到仅依赖于移动视口的元素上。以下是我正在使用的基本要点:
<a class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} @click="onTopicClicked($event, m, t)" href="#">{{t.title}}</a>
<script>
export default {
data() {
return {
isClosed: false
}
},
computed: {
toggleMenu() {
return {
isClosed: this.isClosed
}
}
},
watch: {
browserWidth(prevWidth, newWidth) {
console.log('width changed from ' + newWidth + ' to ' + prevWidth);
},
mounted() {
var that = this;
this.$nextTick(function() {
window.addEventListener('resize', function(e) {
that.browserWidth = window.innerWidth;
if(that.browserWidth > 824) {
console.log('Desktop View');
} else {
console.log('Mobile View');
}
})
})
}
}
</script>
我想尝试使用resize事件来确定浏览器的宽度,这样我就可以将计算出的函数动态地插入到该<a>
标记上
发布于 2018-06-05 14:44:16
你可以像Karthikeyan所说的那样提供两个不同的元素(一个用于桌面,另一个用于移动设备),或者有条件地向该元素添加click事件:
v-on="isMobileView ? { mouseover: onTopicClicked($event, m, t) } : {}"
发布于 2018-06-05 11:11:20
您可以添加一个数据来说明视图是否是移动视图,并使用v-if、v-else并将@click仅添加到v- if ="isMobileView“
<a v-if="isMobileView" class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} @click="onTopicClicked($event, m, t)" href="#">{{t.title}}</a>
<a v-else class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} href="#">{{t.title}}</a>
<script>
export default {
data() {
return {
isClosed: false,
isMobileView: false
}
},
computed: {
toggleMenu() {
return {
isClosed: this.isClosed
}
}
},
watch: {
browserWidth(prevWidth, newWidth) {
console.log('width changed from ' + newWidth + ' to ' + prevWidth);
},
mounted() {
var that = this;
function checkIfMobileView() {
that.isMobileView = window.innerWidth <= 824;
}
this.$nextTick(function() {
window.addEventListener('resize', checkIfMobileView);
});
checkIfMobileView();
}
}
</script>
https://stackoverflow.com/questions/50688176
复制相似问题