ElementUI学习 Switch 开关+Slider 滑块

基本用法

绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。
简单例子:

<template>
    <div class="switch">
       <el-switch v-model="value"
                  active-color="#13ce66"
                  inactive-color="red">
       </el-switch>
       
    </div>
</template>
<script>
    export default {
        name: "cascader",
        data(){
          return {
            value : true
          }
    }
  }
</script>
<style>
</style>

效果:

文字描述

Slider 滑块

基础用法
通过v-model绑定的值来设置初始值

<template>
    <div class="book">
      <span class="demonstration">默认</span>
      <el-row :gutter="20">
          <el-slider v-model="value">
          </el-slider>
      </el-row>
    </div>
</template>
<script>
    export default {
        name: "cascader",
        data(){
          return {
            value : 0
          }
    }
  }
</script>
<style>
</style>

通过:show-tooltip="false"来隐藏数值
通过:format-tooltip="formatTooltip"格式化