Element中Slider滑块的具体使用


Posted in Javascript onJuly 29, 2020

组件—滑块

基础用法

Element中Slider滑块的具体使用

<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>

离散值

Element中Slider滑块的具体使用

<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>

带有输入框

Element中Slider滑块的具体使用

<template>
 <div class="block">
  <el-slider
   v-model="value"
   show-input>
  </el-slider>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value: 0
   }
  }
 }
</script>

范围选择

Element中Slider滑块的具体使用

<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>

竖向模式

Element中Slider滑块的具体使用

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

<script>
 export default {
  data() {
   return {
    value: 0
   }
  }
 }
</script>

展示标记

Element中Slider滑块的具体使用

<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

Element中Slider滑块的具体使用

Element中Slider滑块的具体使用

Events

Element中Slider滑块的具体使用

到此这篇关于Element中Slider滑块的具体使用的文章就介绍到这了,更多相关Element Slider滑块内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
vue中轮训器的使用
Jan 27 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue 实现超长文本截取,悬浮框提示
Jul 29 #Javascript
javascript实现移动端触屏拖拽功能
Jul 29 #Javascript
Vue实现移动端拖拽交换位置
Jul 29 #Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 #Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 #Javascript
JavaScript编写开发动态时钟
Jul 29 #Javascript
js编写简易的计算器
Jul 29 #Javascript
You might like
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python描述器descriptor详解
2015/02/03 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
九年级英语教学反思
2014/01/31 职场文书
教师产假请假条
2014/04/10 职场文书
销售员岗位职责
2014/06/09 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript