Stone-Slider组件

1. 引入stone-slider.scss
1. Slider基础用法
1. 离散值
1. 带有输入框
1. 竖向模式
1. 展示标记
1. script源码

1. 引入stone-slider.scss

在main.js中引入stone-slider.scss

require('@/assets/css/stone-slider.scss')

给el-switch添加stone-slider样式。

2. Slider基础用法

在这里插入图片描述

源码：

<div class="block">
  <span class="demonstration">默认</span>
  <el-slider v-model="value1" class="stone-slider" />
</div>
<div class="block">
  <span class="demonstration">自定义初始值</span>
  <el-slider v-model="value2" class="stone-slider" />
</div>
<div class="block">
  <span class="demonstration">隐藏 Tooltip</span>
  <el-slider v-model="value3" :show-tooltip="false" class="stone-slider" />
</div>
<div class="block">
  <span class="demonstration">格式化 Tooltip</span>
  <el-slider v-model="value4" :format-tooltip="formatTooltip" class="stone-slider" />
</div>
<div class="block">
  <span class="demonstration">禁用</span>
  <el-slider v-model="value5" disabled class="stone-slider" />
</div>

3. 离散值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53CXyHEv-1601258552559)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\msohtmlclip1\01\clip_image004.png)]

在这里插入图片描述

源码：

<div class="block">
  <el-slider
  v-model="value6"
  :step="10"
  class="stone-slider" />
</div>

4. 带有输入框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8C6113j9-1601258552561)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\msohtmlclip1\01\clip_image006.png)]

源码：

<div class="block">
  <el-slider
  v-model="value7"
  class="stone-slider"
  show-input />
</div>

5. 竖向模式

源码：

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

6. 展示标记

源码：

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

7. script源码

<script>
export default {
  name: 'StoneSliderDemo',
  data() {
    return {
      value1: 0,
      value2: 50,
      value3: 36,
      value4: 48,
      value5: 42,
      value6: 10,
      value7: 10,
      value8: 42,
      value9: [30, 60],
      marks: {
        0: '0°C',
        8: '8°C',
        37: '37°C',
        50: {
          style: {
            color: '#1989FA !important'
          },
          label: this.$createElement('strong', '50%')
        }
      }
    }
  },
  methods: {
    formatTooltip(val) {
      return val / 100
    }
  }
}
</script>