元件—滑塊

基礎用法

<template>
 <div class="block">
  <span class="demonstration">預設</span>
  <el-slider v-model="value1"></el-slider>
 </div>
 <div class="block">
  <span class="demonstration">自定義初始值</span>
  <el-slider v-model="value2"></el-slider>
 </div>
 <div class="block">
  <span class="demonstration">隱藏 Tooltip</span>
  <el-slider v-model="value3" :show-tooltip="false"></el-slider>
 </div>
 <div class="block">
  <span class="demonstration">格式化 Tooltip</span>
  <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
 </div>
 <div class="block">
  <span class="demonstration">禁用</span>
  <el-slider v-model="value5" disabled></el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value1: 0,value2: 50,value3: 36,value4: 48,value5: 42
   }
  },methods: {
   formatTooltip(val) {
    return val / 100;
   }
  }
 }
</script>

離散值

<template>
 <div class="block">
  <span class="demonstration">不顯示間斷點</span>
  <el-slider
   v-model="value1"
   :step="10">
  </el-slider>
 </div>
 <div class="block">
  <span class="demonstration">顯示間斷點</span>
  <el-slider
   v-model="value2"
   :step="10"
   show-stops>
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value1: 0,value2: 0
   }
  }
 }
</script>

帶有輸入框

<template>
 <div class="block">
  <el-slider
   v-model="value"
   show-input>
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value: 0
   }
  }
 }
</script>

範圍選擇

<template>
 <div class="block">
  <el-slider
   v-model="value"
   range
   show-stops
   :max="10">
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value: [4,8]
   }
  }
 }
</script>

豎向模式

<template>
 <div class="block">
  <el-slider
   v-model="value"
   vertical
   height="200px">
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value: 0
   }
  }
 }
</script>

展示標記

<template>
 <div class="block">
  <el-slider
   v-model="value"
   range
   :marks="marks">
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value: [30,60],marks: {
     0: '0°C',8: '8°C',37: '37°C',50: {
      style: {
       color: '#1989FA'
      },label: this.$createElement('strong','50%')
     }
    }
   }
  }
 }
</script>

Attributes

Events

到此這篇關於Element中Slider滑塊的具體使用的文章就介紹到這了,更多相關Element Slider滑塊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！