Vuetify——使用v-slider组件

原创已于 2022-01-25 22:53:55 修改 · 976 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-01-25 22:52:53 首次发布

本文介绍如何使用Vue.js实现透明度调节功能。通过v-model双向绑定及v-slider组件，允许用户调整0到1之间的透明度值。代码示例展示了如何初始化Vue实例并配置滑块属性。

最近需要在个性化设置页中实现设置透明度opacity，opacity值：0-1
在这里插入图片描述

<div id="app">
  <v-app id="inspire">
    <div class="mt-12">
      <v-slider
        v-model="ex3.val"
        :label="ex3.label"
        :thumb-color="ex3.color"
        thumb-label="always"
                min="0"
                max="1"
                step="0.1"
      ></v-slider>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      ex3: { label: '透明度设置', val: 0.6, color: 'red' },
    }
  },
})