根据屏幕大小有条件地从 DOM 中删除元素答案

【问题标题】：Conditionally remove element from DOM depending on screen size根据屏幕大小有条件地从 DOM 中删除元素
【发布时间】：2021-04-01 10:14:40
【问题描述】：

在我的 Vue/Vuetify 应用程序中，我可以使用 Vuetify display helper classes 有条件地根据屏幕大小隐藏元素，例如

<!-- 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 隐藏元素。这会导致以下 Cypress 命令失败

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

出现错误

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

显然赛普拉斯不会忽略带有display: none 的元素。

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

【问题讨论】：

你试试Breakpoint conditionals？

标签： vue.js vuetify.js cypress visibility

【解决方案1】：

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

watch: {
    '$vuetify.breakpoint.width'(val) {
        if (val < 425)
            this.removeElement = true
        else
            this.removeElement = false
    },
},

更新您的模板以使用 v-if="removeElement" 而不是 class=" .... "

【讨论】：

【解决方案2】：

当父/祖先有display: none 时，jquery :visible 选择器起作用。

参考visibility

如果满足以下条件，则认为元素是隐藏的：
...
它的 CSS 属性（或祖先）是display: none。

测试小提琴

/// <reference types="@cypress/fiddle" />

const test = {
  html: `
  <div>
    <header style="display: none">
      <button data-cy="logout">Button small</button>
    </header>
    <header>
      <button data-cy="logout">Button medium</button>
    </header>
  </div>
  `,
  test: `
    cy.get('[data-cy="logout"]:visible').click()
  `
}
it('the test', () => {
  cy.runExample(test)
})

【讨论】：