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标记中，但这不起作用，因为它被md-speed-dial的组件css覆盖。我还尝试使用上面提到的类在div中包装组件，但这根本不起作用。

Answer 1

方法1

可以覆盖该类，因为它没有标记为!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
    }
  }

方法2

使用v-show来控制显示。例如：

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

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

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

1 个答案: