1

所以我将 vue 与vue-material结合使用

我定义了以下快速拨号：

<template>
  <md-speed-dial class="md-top-right" md-direction="bottom" md-event="click">
      <md-speed-dial-target class="md-primary">
        <md-icon class="md-morph-initial">add</md-icon>
        <md-icon class="md-morph-final">close</md-icon>
      </md-speed-dial-target>

      <md-speed-dial-content>
        <md-button class="md-icon-button">
          <md-icon>directions</md-icon>
        </md-button>

        <md-button class="md-icon-button">
          <md-icon>streetview</md-icon>
        </md-button>
      </md-speed-dial-content>
    </md-speed-dial>
</template>

我怎样才能只在小屏幕上显示它？

我尝试将类添加md-xlarge-hide md-large-hide md-medium-hide到根md-speed-dial标记，但这不起作用，因为它被 .css 的组件 css 覆盖md-speed-dial。我还尝试使用提到的类将组件包装在 adiv中，但这根本不起作用。

4

1 回答 1

2

方法一

该类可以被覆盖，因为它没有用!important. 见https://github.com/vuematerial/vue-material/blob/dev/dist/vue-material.min.css

您可以添加!important到这些类以使它们更难覆盖（全局或仅在此组件上）。 

.md-hide {
    display: none !important
  }

  @media (min-width:1904px) {
    .md-xlarge-hide {
      display: none !important
    }
  }

  @media (max-width:1903px) {
    .md-large-hide {
      display: none !important
    }
  }

  @media (max-width:1264px) {
    .md-medium-hide {
      display: none !important
    }
  }

  @media (max-width:944px) {
    .md-small-hide {
      display: none !important
    }
  }

  @media (max-width:600px) {
    .md-xsmall-hide {
      display: none !important
    }
  }

方法二

用于v-show控制显示。例子：

<div v-show="window.screen.width<768">example</div>

https://jsfiddle.net/jacobgoh101/4kg2ndkb/2/

于 2018-02-05T07:57:36.920 回答