Question

我在VueJS应用上使用了<md-progress-bar>组件，但是我想在滚动页面时在底部屏幕上固定您的位置。我尝试设置样式position: fixed;，absolute和relative，但没有人起作用。

<template>
  <div>
  ...
    <md-progress-bar style="position: absolute;" md-mode="indeterminate" v-show="true"></md-progress-bar>
  </div>
</template>

还有...

<md-progress-bar
  style="position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;"
  md-mode="indeterminate"
  v-show="true"
></md-progress-bar>

Answer 1

Vue.use(VueMaterial.default)

new Vue({
  el: '#app'
})

div.md-progress-bar--fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.spacer {
  height: 1000vh;
}

.as-console-wrapper {
  display: none !important;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">

<div id="app">
 <div class="spacer"></div>
  <md-progress-bar class="md-progress-bar--fixed" md-mode="indeterminate" v-show="true"></md-progress-bar>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material"></script>
<script>
</script>

滚动时未在底部页面上固定Material VueJS组件

1 个答案: