1

我正在使用材料的 Vue 实现：https ://stasson.github.io/vue-mdc-adapter/#/

我遇到的问题是页面加载。当我查看我的滑块时，栏会根据保存的值正确填充，但可用于更改滑块值的旋钮保持在 0。但是，每当我调整窗口大小或打开和关闭开发工具时，旋钮都会调整到正确位置。

这是页面加载时的样子： 在此处输入图像描述

代码：

  <mdc-slider
    v-model="value"
    min="0"
    max="120"      
    step="5"
    unit="mins"
  />

有没有人可以在页面加载时正确加载旋钮？

4

1 回答 1

1

我不确定您的Vue对象是什么样的，但这对我有用..

编辑＃2：看起来这是“常见的”。此外，您需要确保已css加载所有正确的文件等。如果您可以提供一些重现此问题的代码，或者详细说明您的配置..您是否对css等.. 做了什么特别的事情？

编辑#2.1：您可以根据文档和layout-on属性尝试以下任一示例..（这是在黑暗中刺伤 - 我不确定这些示例中的任何一个是否有效..）

 // Example 1:
 <mdc-slider
    v-model="value"
    min=0   
    max=120      
    step=5 
    layout-on   // ADDED: you could try using an empty prop
    unit="mins" // not sure what this is doing?
  />

 // Example 2:
 <mdc-slider
    v-model="value"
    min=0   
    max=120      
    step=5 
    layout-on="change" // ADDED: or pass in the 'change' event
    unit="mins"        // not sure what this is doing?
  />

从文档中：

(*) 默认情况下，滑块组件跟踪窗口调整大小和抽屉打开/关闭事件以重置其布局，但如果关闭 css 调整大小或位置更改，布局可能会关闭。在这种情况下，您可以使用 layout-on 事件来强制布局，或以编程方式调用 layout() 方法。

CodePen 镜子

编辑：我敢打赌，这是因为您在 , 和 , 属性中传入's而String不是Number's 。您可以在此处阅读他们的文档中的更多信息。或者你可能没有正确加载？maxminstepcss

尝试这样的事情：

 <mdc-slider
    v-model="value"
    min=0    // or :min="0"
    max=120  // or :max="120"      
    step=5   // or :step="5"
    unit="mins"
  />

在此处输入图像描述

new Vue({
  el: "#app",
  data: {
    max1: 120,
    max2: 200,
    value1: 120,
    value2: 80,
  }
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/vue-mdc-adapter@^0.6.0/dist/vue-mdc-adapter.min.css" type="text/css">
<script src="https://unpkg.com/vue@^2.5.9/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-mdc-adapter@^0.6.0/dist/vue-mdc-adapter.min.js"></script>

<div id="app">
  <div>
    <div style="width: 400px; margin: 50px 0 0 30px;">
      <span>Max: <b>{{ max1 }}</b> | Current: <b>{{ value1 }}</b></span>
      <mdc-slider min=0 :max=max1 step=10 display-markers v-model="value1" />
    </div>
    <div style="width: 400px; margin: 50px 0 0 30px;">
      <span>Max: <b>{{ max2 }}</b> | Current: <b>{{ value2 }}</b></span>
      <mdc-slider min=0 :max=max2 step=10 display-markers v-model="value2" />
    </div>
  </div>
</div>

于 2019-04-14T21:20:33.450 回答