如何详细使用Element UI框架中的Slider滑块组件？

本文共计622个文字，预计阅读时间需要3分钟。

组件 - 滑块+基本用法+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

组件—滑块

基础用法

<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滑块内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！