vue-material：仅在小屏幕上显示浮动操作按钮/快速拨号

Question

所以我将 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 覆盖了13=]。我还尝试用提到的类将组件包装在 div 中，但这根本不起作用。

Answer 1

方法一

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

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

.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/

vue-material：仅在小屏幕上显示浮动操作按钮/快速拨号

vue-material: show floating-action-button / speed-dial only on small screens

css

vue.js

vuejs2

vue-material