Question

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

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

这是页面加载时的样子：

代码：

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

有人能解决在页面加载时正确加载旋钮的问题吗？

Answer 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?
  />

From the documentation：

（*）默认情况下，滑块组件跟踪窗口调整大小和抽屉打开/关闭事件以重置其布局，但是如果css调整大小或位置更改不正确，则该布局可能处于关闭状态。在这种情况下，您可以使用layout-on事件来强制进行布局，或者以编程方式调用layout（）方法。

CodePen mirror

编辑： 我敢打赌，这是因为您在String中传递了Number，而不是max ，min和step属性。.You can read more in their documentation here。还是您可能没有正确加载css？

尝试这样的事情：

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

Vue Mdc滑块未正确更新

1 个答案: