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 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
JS高级运动实例分析
Dec 20 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
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
因str_replace导致的注入问题总结
2019/08/08 PHP
JavaScript的Function详细
2006/11/14 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
Node.js编写组件的三种实现方式
2016/02/25 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python实现随机漫步方法和原理
2019/06/10 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
python基于socket函数实现端口扫描
2020/05/28 Python
深圳茁壮笔试题
2015/05/28 面试题
大学生找工作推荐信范文
2013/11/28 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
学习十八大的心得体会
2014/09/12 职场文书
国庆节慰问信
2015/02/15 职场文书
离婚起诉书范本
2015/05/18 职场文书
教师外出学习心得体会
2016/01/18 职场文书
高中化学教学反思
2016/02/22 职场文书
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL