Element 에서 Slider 슬라이더 의 구체 적 인 사용

구성 요소 슬라이더
기초 용법

<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 슬라이더 에 관 한 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!