将样式应用于使用VUEJS通过V-FOR动态添加的HTML元素

Question

我正在使用v-for动态向列表中添加元素。

<ol>
    <li v-for="light in lights">
        <input type="range" min="0" max="255" v-model="light.currentBrightness" v-on:change="setBrightness(light)" />
    </li>
</ol>

我想使用Rangeslider装饰滑块。

问题是，当DOM初始化后添加新元素时，它没有采用rangeslider.js中指定的样式。解决此问题的方法是调用rangeslider.js中的重新初始化方法，该方法将重新调节所有滑块元素。

当运行时动态添加元素时，我不确定如何调用JavaScript方法。有人怎么做吗？对我来说，这似乎是一个非常普遍的问题，但我找不到谷歌搜索的解决方案。

我的问题与GitHub中讨论的问题相同。

Answer 1

如果您是JavaScript和Vue的新手，那么您在靠近深处的潜水。Rangeslider不仅是样式（例如CSS），而且是一个替换内置范围输入的小部件。

VUE背后的一个基本思想是它控制DOM，并且您只修改模型，但是有一些精心控制的例外。组件具有生命周期钩子，允许您插入和修改组件拥有的DOM元素。

一些有关V模型支持的说明：

因此，要使组件与v-Model合作，应该是配置为2.2.0 ）：

• 接受价值道具
• 发出带有新值的输入事件

因此，我们制作一个模板是范围输入元素的组件。我们给它一个value道具。在mounted钩中，我们在输入元素上初始化rangeslider（以el提供），然后将其设置为更改上的EMIT input事件。

new Vue({
  el: '#app',
  data: {
    lights: [{
        currentBrightness: 10
      },
      {
        currentBrightness: 30
      }
    ]
  },
  methods: {
    addRange: function() {
      this.lights.push({
        currentBrightness: 50
      });
    }
  },
  components: {
    rangeSlider: {
      props: ['value', 'min', 'max'],
      template: '<input min="{{min}}" max="{{max}}" type=range />',
      mounted: function() {
        var vm = this
        $(this.$el)
          .val(this.value)
          // init rangeslider
          .rangeslider({
            polyfill: false
          })
          // emit event on change.
          .on('change', function() {
            vm.$emit('input', this.value)
          })
      }
    }
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.js"></script>
<div id="app">
  <ol>
    <li v-for="light in lights">
      <range-slider v-model="light.currentBrightness" min="0" max="255"></range-slider>
      <div>{{light.currentBrightness}}</div>
    </li>
  </ol>
  <button @click="addRange">Add Range</button>
</div>

Answer 2

您可以使用以下CSS代码在HTML5范围输入中应用一些样式：

body {
    padding: 30px;
}
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    /*required for proper track sizing in FF*/
    width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}
input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}
input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;
    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}