组件—滑块
基础用法
<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
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“Element中Slider滑块的具体使用”评论...
更新日志
2024年05月06日
2024年05月06日
- 群星《宝丽金摘金宝典 3CD》[WAV+CUE][1.9GB]
- 中唱《好歌珍藏--明月寄情》500首经典优美旋律30CD[WAV]
- 【古典音乐】卡拉扬《首次录音(6)》2006[FLAC+CUE整轨
- 【古典音乐】卡拉扬《首次录音(7)》2006[FLAC+CUE整轨]
- 【古典音乐】卡拉扬《首次录音(7)》2006[FLAC+CUE整轨]
- 梅艳芳《极品珍藏24K金碟》[WAV+CUE][730MB]
- 郑秀文《靓声天碟》[WAV+CUE][730MB]
- 群星《二十周年精选 高级发烧友试机必选》[WAV+CUE][650MB]
- 【古典音乐】卡拉扬《首次录音(8)》2006[FLAC+CUE整轨]
- 吴俊宏.2014-爱着你【豪记】【WAV+CUE】
- 名洋.1990-分手摆在胸口【天下唱片】【WAV+CUE】
- 罗大佑.2018-当年离家的年轻人巡回演唱会【大右音乐】【WAV+CUE】
- 姜育恒.1991-金曲精丫永声】【WAV+CUE】
- 水木年华.2010-启程【英皇星艺】【WAV+CUE】
- 邓丽君《漫步人生路》[DSF][1.3G]