如何使用css或js根据vue.js中的条件在打印页面中设置不显示？

Question

我在 vue 框架中工作，我目前正在为我的应用程序打印网页。 我需要针对一种情况的解决方案。 我已经在下面解决了。

<template>

      <div id = "intro" style = "text-align:center;">
        <div
        v-for="report in reports"
        :key="report.property"
        :class="['Section1', { 'non-print-css' : noprint }]">
          <div class="Icon" id="printReport_AId" v-if="isOverview">
             <font-awesome-icon :icon="report.icon" @click="printWindow()"/>
        </div>
      </div>

     <div class="logo"> this text should  be none when printing . if the section1 is none in screen. </div>
      </div>
</template>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               timestamp: ''
            },
            created() {

            },
            methods: {
              printWindow() {
      const curURL = document.location.href;
      history.replaceState(history.state, '', '/');
      const originalTitle = document.title;
      document.title = '. ';
      window.print();
      document.title = originalTitle;
      history.replaceState(history.state, '', curURL);
    },

     computed: {
       noprint() {
      const printicon = document.getElementById('printReport_AId');
      if (printicon.style.display === 'none') {
        return true;
      }
      return false;
      },
   }

            }
         });
      </script>
<style>
.non-print-css {
  // i have to set the display none for logo when its printed.
}

</style>

我有两个 div 类

1. 第一节
2. 标识。

状况：

• 如果第 1 部分不显示，那么当我打印页面时，不应打印徽标。

  我在计算中添加了条件来检查部分显示是否为无，如果为真，它应该在我们设置@print 的地方执行 css。 标志显示是无。

  我需要在 css 或 js 中的适当解决方案

Answer 1

您可以使用媒体查询来应用特定于打印的样式，特别是

@media print {
    .non-print-css {
        display: none;
    }
}

Answer 2

1. “如果第1部分未显示任何内容” ...表示该元素已渲染但未显示，您必须给您的section1一个v-show指令，而不是v-if ...，将其设置为false （ v-show ）时元素将display : none 。
2. “那么当我打印页面时，不应该打印徽标” ...因此，如果将section1 v-show设置为false我们将无法正确打印....在这种情况下，我们应该在数据中创建一个变量并将其绑定到section1 （ v-show ），以便当该变量为false元素将display : none所以我们不打印...。让我们仅在isSection1为true时才在我们的方法上调用该变量isSection1 ... now然后我们打印...应该是这样的：

data: {
    isSection1: false, // false means section1 has display : none
    timestamp: ''
  },
  methods: {
    printWindow() {
     // only if section1 doesn't have display : none
      if (this.isSection1) {
        const curURL = document.location.href;
        history.replaceState(history.state, '', '/');
        const originalTitle = document.title;
        document.title = '. ';
        window.print();
        document.title = originalTitle;
        history.replaceState(history.state, '', curURL);
      }
    }
  }

<div class="section1" v-show="isSection1"> </div>

Answer 3

我已经部分修复了它，但是元素id为null，未监听事件

1. 将v-bind添加到徽标类。

2. 如下所示添加mounted（）和compute（）。

mounted() {
    window.addEventListener('print', this.noprint);
    },

computed(){
    noprint() {
        const printicon = document.getElementById('printReport_AId');
        if (printicon != 'null') {
          return true;
        }
        return false;
    },
  },

Answer 4

我通过这里寻找一种方法来有条件地渲染组件，但在未渲染时保留空间。 从这里过去后，我发现了这个很棒的出版物，它解释了 VueJS 中可用的 3 个选项。

所以，在这里你在这里输入链接描述