我正在构建我的第一个 Vue.js 项目，我想通过左右键盘箭头键在页面（上一页/下一页）之间导航。
我创建了一个简单的警报测试（并在请求的底部附加了我的代码）来演示我面临的问题。使用时v-on:click，我创建的警报方法工作得很好。我尝试过使用v-on:keyup、v-on:keydown和v-on:keypress，但没有一个选项触发警报来指示箭头键功能正在运行。
我发现这个3 年多前的线程详细描述了一个类似的问题，其中一条评论描述了我自 v1.0.0 以来正在使用的方法作为可行的解决方案。我已经检查了当前版本的 Vue 的键修饰符文档，看起来我做的一切都是正确的。
我很可能错过了一些重要的东西，但经过大量的实验和研究，我可以使用一些帮助。提前致谢！
new Vue({
el: "#app",
methods: {
popupLeft: function(){
alert("You have gone to the previous page");
},
popupRight: function(){
alert("You have gone to the next page");
},
popupClose: function(){
alert("You have closed this page");
},
}
})<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<div id="app">
<button @keyup.left="popupLeft">Prev Page</button>
<button @keyup.right="popupRight">Next Page</button>
<button @click="popupClose">Close Page</button>
</div>我正在为自己开发一个新的入门主题。其中，我希望在整个主题中使用许多断点。我不想管理每个媒体查询的断点，而是想将 CSS 变量设置为断点像素值并调用媒体查询内的变量。下面是一个示例（理想情况下）这是如何工作的
:root {
--medium: 1024px;
}
p {
color: black;
}
@media screen and ( min-width: var(--medium) ) {
p {
color: red;
}
}<p>Text I want to be red in screens larger than 1024px.</p>遗憾的是，这个逻辑在常规 CSS/CSS3 中不起作用。有谁熟悉创建一个单点的方法，我可以在不使用预处理器的情况下调整整个主题的媒体查询断点？提前致谢！