时间戳

首页 > 解决方案 > 根据屏幕大小有条件地从 DOM 中删除元素

vue.js - 根据屏幕大小有条件地从 DOM 中删除元素

问题描述

在我的 Vue/Vuetify 应用程序中，我可以使用 Vuetify显示助手类有条件地根据屏幕大小隐藏元素，例如

<!-- Show on medium width and above -->
<v-app-bar app height="74px" class="hidden-sm-and-down">
  <button @click="logout" data-cy="logout">Log Out</button
</v-app-bar>

<!-- Show on small width and below -->
<v-app-bar app height="74px" class="hidden-md-and-up">
  <button @click="logout" data-cy="logout">Log Out</button
</v-app-bar>

通过设置 CSS 属性隐藏元素display: none。这会导致以下赛普拉斯命令失败

cy.get('[data-cy="logout"]').click()

随着错误

cy.click() 只能在单个元素上调用。您的主题包含 2 个元素

所以很明显赛普拉斯并没有忽略带有display: none.

有没有办法删除这些元素而不是隐藏它们，或者告诉赛普拉斯忽略隐藏的元素？

标签： vue.jsvuetify.jscypressvisibility

解决方案

  1. 将数据属性“removeElement”添加到您的数据部分。

  2. 为 Vuetify 断点属性添加一个观察者，并根据何时需要删除/添加元素将“removeElement”设置为 true/false。

watch: {
    '$vuetify.breakpoint.width'(val) {
        if (val < 425)
            this.removeElement = true
        else
            this.removeElement = false
    },
},
  1. 更新您的模板以使用 v-if="removeElement" 而不是 class=" .... "

推荐阅读