自己封装vue组建之Stone-Slider组件

港控/mmm° 2022-12-11 03:21 207阅读 0赞

# Stone-Slider组件 #

**目录**

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

# 1. 引入stone-slider.scss #

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

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

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

# 2. Slider基础用法 #

![在这里插入图片描述][2020092810070914.png_pic_center]

源码：

<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)\]

![在这里插入图片描述][20200928100729546.png_pic_center]

源码：

# 4. 带有输入框 #

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

源码：

# 5. 竖向模式 #

源码：

# 6. 展示标记 #

源码：

# 7. script源码 #

[2020092810070914.png_pic_center]: /images/20221123/343a6cb7e76b423f8b07578a9140e6f4.png
[20200928100729546.png_pic_center]: /images/20221123/c856c54121ac4297ae54a9c05fac9876.png